Menu déroulant qui se replie

pas très ergonomique...

19 août 2010 à 19:48:37

Bonjour,

Je bloque sur un petit souci d'ergonomie sur un design.. Voilà mon menu actuellement.

En fait, j'ai là un menu déroulant vertical "accordéon". Sauf que, lorsqu'on passe en dessous du sous-menu déroulé.. Zip ! Tout remonte (plus de :hover) >_<

.

Je voudrais un système simple (déroulement au clic par exemple), qui rectifie ce problème.

Ce que j'ai tenté :
Je me suis essayé au javascript... N'ayant jamais touché à ce langage, je ne suis arrivé à rien de fonctionnel (je crois que je suis vraiment nul XD ). Et je n'ai pas trop envie de me taper tout le tuto de javascript pour un petit effet (qui n'est d'ailleurs pas spécifié dedans).

J'ai appris aussi cette astuce (avec un lien vers une ancre) : http://lehollandaisvolant.net/tuto/css.php#lightbox
Mais qui ne fonctionne pas dans mon cas... Au clic, le scroll se fixe sur le lien.
Bref ! Help !

Code HTML intégré dans la page :

<div id="menu">
	<ul class="navig">
		<li class="end"><a href="index.php">Accueil</a></li>
		<li class="end"><a  href="inscrire.php">S'inscrire</a></li>
		<li class="end"><a href="forum.php"target="_blank">Forum</a></li>
		<li class="end"><a href="regles.php">Règlement</a></li>
		<li class="extended">
			<a href="#">Histoires</a>
			<ul id="smenu1">
				<li class="end"><a href="">des Elfes</a></li>
				<li class="end"><a href="">des Hommes</a></li>
				<li class="end"><a href="">des Nains</a></li>
				<li class="end"><a href="">des Orcs</a></li>
			</ul>
		</li>
		<li class="end"><a href="screen.html">Aperçus</a></li>
		<li class="end"><a href="team_forgic.php">L'équipe</a></li>
	</ul>
</div>

Code CSS concerné :

*{margin:0;padding:0;}
a{text-decoration:none;}

body
{
	margin: 10px 0;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
}

#menu
{
	float:left;
	width: 140px;
	padding-top:50px;
	list-style-type: none;
	padding-left:5px;
	display:inline;
	background: url("http://www.malusoftweb.com/jean-louis/fangame/style/images/spiral.png") no-repeat;
}

#menu li
{
	padding:3px 0;
}

#menu li a
{
  display:inline;
}

#menu ul
{
	list-style-type:none;
	background:url("http://www.malusoftweb.com/jean-louis/fangame/style/images/pluie.png") repeat-y;
	padding-left:20px;
}

#menu ul li ul
{
  background:transparent;
  padding-left:0px;
  display: none;
}

#menu ul li:hover ul
{
  display: block;
}

#menu ul li ul li
{
  padding-left:20px;
}

#menu a
{
	height:20px;
	text-decoration:none;
	color:white;
	padding:3px 8px 3px 7px;
}

#menu a:hover
{
	font-style: italic;
	color:#bdf8ff;
	background:#365967 url("http://www.malusoftweb.com/jean-louis/fangame/style/images/menu.gif") center no-repeat;
	border-top: 1px dotted #bdf8ff;
	border-bottom: 1px dotted #bdf8ff;
	height:18px;
}

Merci d'avance pour toute piste.

⌕ Un moteur de recherche de caractères spéciaux | ✉ Me contacter

Buddy

23 août 2010 à 15:27:10

Up !

⌕ Un moteur de recherche de caractères spéciaux | ✉ Me contacter

birdy42

23 août 2010 à 15:32:02

Citation : Buddy

Ce que j'ai tenté :
Je me suis essayé au javascript... N'ayant jamais touché à ce langage, je ne suis arrivé à rien de fonctionnel (je crois que je suis vraiment nul XD ). Et je n'ai pas trop envie de me taper tout le tuto de javascript pour un petit effet (qui n'est d'ailleurs pas spécifié dedans).

Détrompe toi :-°

Buddy

23 août 2010 à 21:14:53

Ah... Merci d'avoir rectifié.

Je crois que je vais me farcir le tuto alors... >_<

⌕ Un moteur de recherche de caractères spéciaux | ✉ Me contacter

lieo

23 août 2010 à 21:16:05

Pour le déroulement, je connais que la fonction Jquery slideUp / slideDown, qui fait une animation de déroulement (montant / descendant).

Ps: en js, je connais pas d'animation qui pourrait te contenir, et le tutoriel Js, t'apprendras juste à cacher / afficher un élément en css.
re-Ps: tu auras un peu le même problème en Js, dès lors que tu cliquera sur un autre lien, tu risque d'avoir le même problème d'ergonomie. Sauf si tu veux afficher définitivement le menu lors du clic. Dans ce cas suit le tutoriel