28172 sujets

CSS et mise en forme, CSS3

Menu déroulant sur tablettes

Bonjour,

Après 14 ans d’existence, je viens de refaire l'interface de mon petit site, j'ai modifié le menu pour le faire sous forme de menu déroulant.

Sur PC, aucun problème, il fonctionne parfaitement, mais mon problème viens sur tablette et smartphone!!!

En l'absence de souris, il fonctionne mal ! si vous voulez bien voir : Smiley url http://www.aqua-planete.com/[/url]

Il devrait se refermer dès qu'on pointe (au doigt) ailleurs qu'au menu (ça le fais parfois mais pas toujours).

Je joigne le CSS, si quelqu'un veut bien m'aider?

/* main menu styles */
#nav {
    font-family:Arial;
	font-size:13px;
    display:inline-block;
    width:64%;
    margin:0px auto;
    padding:0;
    background:#265789 url(/forum/skins/defaut/off.gif) repeat-x 0 -110px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
    margin:8px;
    float:left;
    position:relative;
    list-style:none;
}
#nav a {
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
    display:block;
    padding:8px 20px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}

/* selected menu element */
#nav .current a, #nav li:hover > a {
    background:#A4B6C9 url(../images/bg.png) repeat-x 0 -20px;
    color:#000;
    border-top:1px solid #f8f8f8;

    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}

/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#000;
}
#nav ul li a:hover {
    background:#265789 url(../images/bg.png) repeat-x 0 -100px;
    color:#fff;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}

#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

/* drop down */
#nav li:hover > ul {
    opacity:1;
    visibility:visible;
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:340px;
    position:absolute;
    background:#aabbcc url(../images/bg.png) repeat-x 0 0;
    border:1px solid #7788aa;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .1s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .1s linear, visibility .1s linear .1s;
    -o-transition:opacity .1s linear, visibility .1s linear .1s;
    transition:opacity .1s linear, visibility .1s linear .1s;
}
#nav ul li {
    float:none;
    margin:0;
}
#nav ul a {
    font-weight:normal;
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
    left:280px;
    top:0px;
}


Aussi, sur PC, le fait que le menu disparaisse dès que la souris sort du menu, pensez vous que ce soit une bonne idée? C'est pas un peu gênant parfois?

Merci beaucoup, d'avance...
Salut,

Tu as beaucoup trop de préfixes CSS inutiles, et souvent dans le mauvais ordre... http://www.emmanuelbeziat.com/blog/prefixes-css-jusqua-quand/

Bref, pour ton menu, le fait est qu'un smartphone aura toujours des difficultés à émuler le comportement d'un hover, pour la simple et bonne raison que ce n'est pas fait pour ça. C'est pourquoi aujourd'hui on privilégie soit des menus très simples et non-déroulants, oui bien qu'on passe ceux-ci dans un menu "spécial" mobile tels que ceux-ci : http://slicknav.com/, http://mmenu.frebsite.nl/, http://jasonweaver.name/lab/flexiblenavigation/

Il y en a un paquet, à toi de voir ce qui te convient. Smiley cligne
Salut!

Tout d'abord, enlève les "<a href="#">" c'est pas propre et ça ne sert à rien puisqu'il n'y a pas de lien pour ces éléments.
Ensuite, ajoute un onclick sur le premier niveau de li et les li qui ont un sous menu.

Ça donnerait donc une truc du genre:
<ul id="nav">
        <li onclick=""><a href="http://www.aqua-planete.com/index.php">Accueil</a></li>
	<li onclick="">Menu
               <ul>
                <li onclick="">Matériels *
			<ul>
                        <li></li>
                        ...
			</ul>
		</li></li>
		...
                </ul>
            </li>
            </li onclick=""></li>
            </li onclick=""></li>
            ...
	</ul>


Normalement ça devrait fonctionner sur tablette et smartphone
Merci bcp...

J'ai remplacé les <li> par <li onclick=""> comme tu as dis, sur Ipad, ça merde encore un peu!

Par contre, si j’enlève les "<a href="#">", ca déforme ma barre de menu car les titres ne sont plus sous forme de lien, et étant plus aquariophile qu'informaticien, je ne sais modifier ça dans le CSS, tout comme enlever les préfixe en trop ou même juste de les classer dans le bon ordre.
Il veut mieux éviter de mettre des attributs d'événements (comme onclick) dans le html. On utilise des eventListener dans un fichier js séparé, que ce soit en js vanilla ou en jquery.

Du reste, il n'y a pas de contre-indication particulière à l'utilisation de liens pour ça ; en revanche, un élément de liste n'a pas vocation à être cliquable (même qui ça fonctionne parfaitement une fois le js géré).

Bref, je te recommande vraiment de te tourner vers l'un ou l'autre des liens que je t'ai proposé plus bas. Gérer un menu déroulant sous devices mobiles est un challenge, fies-toi donc à des systèmes éprouvés. Smiley cligne
Salut,

D'une part, je te remercie très sincèrement de prendre du temps pour me répondre, cependant, m'aider en me redirigeant sur des sites d'explication en anglophone ne m'aide franchement pas bcp (je ne parle malheureusement pas la langue de Shakespeare)!!!

Comme je disais plus haut, avant tout, je suis aquariophile et je fais partager cette passion et aide du mieux que je peux les néophytes, j'ai construit un petit site il y a 14 ans, que je fais avancer doucement avec parfois bcp de mal, mais en aucun cas je ne suis passionné d'informatique, je passe souvent plusieurs heures pour essayer de comprendre un tout petit morceau de code! Je ne cherche pas à connaitre le CSS par cœur (ca je dois dire un peu que je m'en cogne, même si je ne devrais pas), je veux juste que le brin de détail dont j'ai besoin me soit soufflé, rien de plus.

Quand un de mes membres me demande un renseignement quel qu’il soit, je ne le renvoi pratiquement jamais sur la page concernée, je tente avant tout de lui apporter une vraie aide personnalisée en essayant d’être utile. Sinon, le forum, à quoi servirait-il? Non, ce n'est pas un lieu de redirection, c'est bien un forum d'aide, pour aider.. non?!

Et le problème, c'est que sur 95% des sites de programmation, les seuls aides qu'on nous propose, c'est des liens sur d'autres sites explicatifs! mais les liens, je sais les trouver, les sites d'entraide, on a que l’embarras du choix, si je demande de l'aide, c'est justement pour un dédié, de devoir lire et comprendre un site de 250 pages juste pour chercher ou il me manque une virgule... c'est lourd non? car le but final pour moi, c'est que la page de mon site soit présentable!

Mais tout ceci, ne le prends pas mal, c'est très générale comme remarque, elle ne t'es pas dédiée. Ca fait 14 ans que je rame dès que j'ai besoin de la moindre aide pour améliorer une page, et pour cette raison, je demande vraiment le moins possible.

Salutations

PS : L'aide de "juliesunset" n'est peut être pas très juste, mais son post, c'est de l'aide utile et constructive, là, c'est vraiment du concret!
Comme je le disais, adapter un menu déroulant sur tablette est compliqué et je te déconseille de le faire, à plus forte raison si tu ne maitrise pas bien la mécanique d'un site. Il ne s'agit pas d'un "brin de détail", le fait que le web soit accessible n'en fait pas quelque chose de simple. On ne peut pas simplement te dire "il faut juste que tu ajoutes un mot à tel endroit et ça fonctionne", de la même façon que tu ne peux pas dire à un néophyte "il suffit de remplir n'importe quel bocal avec de l'eau du robinet et hop, tu peux mettre des cichlides et des poissons rouges ensemble", ou qu'un maçon ne peut pas dire à quelqu'un "si tu veux déplacer ta fenêtre de quinze cm sur la droite il suffit de la pousser sur la droite".

Si je te propose des liens, c'est parce qu'il existe des éléments tout faits et tout prêts qui servent précisément à ça, qui se veulent le plus simple d'utilisation possible ; et ce sont vers ces éléments que je te dirige. Il n'y a besoin d'aucune compétence particulière, il ne faut pas programmer quoique ce soit, et les seules étapes consistent à suivre ce qui est généralement indiqué sur lesdites pages. Après, je ne pouvais pas savoir que tu ne comprenais pas l'anglais ; je vais donc te guider si tu veux.

Reprenons donc au début : Premièrement, il te faut jQuery sur ton site. Ajoute donc ceci juste avant la balise </body> (la balise fermante, pas ouvrante) :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


Ensuite, il te faut télécharger le plugin qui s'occupera de ton menu. Je te suggère Slicknav : http://slicknav.com/ Clique donc sur "télécharger", tu te retrouves avec une archive à extraire, qui contient divers fichiers et dossiers. Ce qui nous intéresse ici se trouve dans le dossier "dist" (c'est toujours le cas) (dist = distribuable) : Prend les deux fichiers "jquery.slicknav.min.js" et "slicknav.css". Pour les ranger, je te conseille simplement de faire un dossier "slicknav" à la racine de ton site.
Il te reste ensuite à appeler ces fichiers sur ton site.

En dessous de la balise script ajoutée tantôt, mets celle-ci :
<script type="text/javascript" src="slicknav/jquery/slicknav.min.js"></script>


Puis, juste avant de fermer ta balise </head> en début de page, appelle le CSS comme suit : 
<link type="text/css" rel="stylesheet" href="slicknav/slicknav.css" />


Ton plugin est prêt, il faut désormais l'instancier — c'est à dire l'appliquer à ton site. Ton menu correspond à l'exemple proposé sur le site de slicknav, c'est parfait. Il porte l'id "nav", donc on va s'en servir pour instancier le plugin.

À la suite de l'appel au plugin (la balise script, à la fin de ta page), ajoutes ceci :
<script type="text/javascript">
$(function(){
	$('#nav).slicknav();
});</script>


Et c'est tout. Il y aura sûrement quelques ajustements à faire, mais attendons déjà d'en être à ce stade.
Modifié par Manumanu (24 May 2015 - 19:47)
Salut

C'est un menu qui se déroule par un :hover ?
Si oui j'ai eu le même type de problème récemment (des fois ça se ferme, des fois ça se ferme pas quand on clique en dehors).
Même si l'idéal est de faire autrement qu'avec un :hover, j'ai moi aussi rechigner et finit par trouver un "truc".

Il s'avère que le menu veut bien se refermer quand on clique à l'extérieur sur un élément "actif" (le clic ou le :hover doit déclencher quelque chose).
Comme derrière j'avais essentiellement du texte (donc inactif), j'ai attribué une "action" au fait de le survoler. En l'occurrence je l'ai fait passer du noir au noir avec <onmouseover="this.style.color='black'">. Mais attention il faut que ça "paraisse" un changement. De #000 à #000 ça ne marchait pas ! Mais de #000 à 'black' ça marche !
Sujet clos
Aller à