Séparation dans menu déroulant [ RESOLU ]

Bonjour,

J'ai un menu déroulant mode tiroir.

Ils se trouvent que j'ai pas mal d'articles dans ce tiroir et je voudrai les séparer pour que ça soit plus claire. J'ai bien en stock <hr> entre mes <div class="sousmenu"> mais il y a t'il autre chose ?

Banane
Pomme
Poire
Melon

Version actuelle ci-dessus.

Je souhaiterai un truc du genre

Banane
------------
Pomme
Poire
------------
Melon
Cerise

Juste un séparateur pas un truc cliquable, juste pour indiquer une séparation. Pour que ça soit plus lisible.

Merci de vos retours.
Modifié par Tintin75 (11 Feb 2016 - 07:57)

A priori, un border-top sur le LI en dessous du séparateur (ou un border-bottom sur celui situé au-dessus, c'est selon) devrait faire l'affaire.
La possibilité de jouer sur le style et l'épaisseur de la bordure permet pas mal de choses.
Perso, le style dotted en gris me plaisait bien lorsque j'utilisais ce genre de chose.

<div class="sousmenu">
			<a href="Xl">P</a>
		</div>
		<div class="sousmenu">
			<a href="Y">Y</a>
		</div>

Je souhaite mettre une séparation entre les deux div class

Merci pour ta réponse.

Salut,

Bah comme l'a dit sepecat un border fait bien l'affaire.
Dans ton ca tu ne veux une séparation que s'il y en a deux ou plus donc je partirai sur un truc comme ça :

.sousmenu + .sousmenu {
    border-top:1px solid #000;
}

Merci je vais tester demain matin. J'ai compris merci. Je met le code dans mon css ?

J'étais parti sur <hr> personnalisé qui marche pas mal non plus. Bref, à l'état de proto, je veux un truc discret, qui marque juste une séparation, pour faciliter la navigation dans le menu.
Modifié par Tintin75 (10 Feb 2016 - 19:51)

Tintin75 a écrit :
J'étais parti sur &lt;hr&gt; personnalisé qui marche pas mal non plus. Bref, à l'état de proto, je veux un truc discret, qui marque juste une séparation, pour faciliter la navigation dans le menu.

En effet, le HR fonctionne et n'est pas interdit, sauf erreur de ma part.
Disons que l'usage des bordures permet d'économiser une balise (ledit HR) et simplifie un peu la relecture du code a posteriori.
Lorsque j'ai utilisé ce mode de séparation, j'ai trouvé qu'on pouvait jouer plus facilement sur l'épaisseur de bordure que sur la hauteur d'un HR (penser à lui mettre un background color qui va bien et une bonne hauteur).
A contrario, la solution "bordure" oblige à créer un sélecteur spécifique dans la feuille CSS, là où le HR se suffisait à lui-même.
Bref, on va faire une réponse qui n'en est pas une : essaie les deux solutions et voit celle avec laquelle tu te sens le mieux, aussi bien en maintenance qu'en matière de résultat sur les différents navigateurs. Il ne devrait pas y avoir beaucoup de divergences entre eux, mais mieux vaut ne croire que ce que l'on voit...
Modifié par sepecat (10 Feb 2016 - 20:25)

Je suis entièrement d'accord avec toi. Je vais tester ta méthode que je ne connais pas. Ca va me donner l'occasion d'apprendre. Je pense que ta méthode doit un poil plus performante que le hr personnalisé.

C'est pas le temps que ça prend à tester. Merci encore pour ton aide

Finalement, je résultat est sympa, je m'attendais pas à ça. Adopté !!!!

Merci encore

Merci et bonne journée, ça roule pour moi.
Modifié par Tintin75 (11 Feb 2016 - 08:11)

A priori, un sélecteur avec un :hover (survol souris) devrait faire l'affaire.
Attention toutefois aux effets genre agrandissement de la taille de la fonte ou passage en gras car ils ont pour conséquence d'augmenter la taille du texte et de réorganiser l'affichage.
Cela peut donner un effet de "yoyo" visuel perturbant pour l'utilisateur.
On peut l'éviter, dans une certaine mesure, en fixant les dimensions des blocs via CSS mais cela ne va pas vraiment dans le sens de adaptabilité du contenu, notamment en "Responsive web" où les mesures relatives (em, rem, %) sont privilégiées.
A tester donc...

Correction...
Ma réponse précédente concernait une question sur un effet "loupe" (passage fonte en 14 point au survol de la souris).
Répondant depuis un mobile il semble que mes gros doigts aient appuyé sur le mauvais sujet.
A rerouter, donc, vers le bon endroit.

Ca été vue, merci. Je l'ai bien sur un hover. Avec une police de 16 pixels. On voit bien la différence et c'est propre à l'écran.
Modifié par Tintin75 (11 Feb 2016 - 08:45)

Finalement je viens de tester sur mon smartphone, je vois une nette différence en terme de navigation avec les modifications. C'est plus lisible, comme quoi se gratter la tête apporte toujours une amélioration.