18041 sujets

Questions générales et questions de débutants

Menu jquery horizontale

Bonjour,

Avec l'exemple de menu accordeon jquery :
code : html 

<ul class="navigation"> 
    <li><a href="#" title="Aller à la page 1">Item 1</a></li> 
 
    <li class="toggleSubMenu"><span>Item 2</span> 
        <ul class="subMenu"> 
            <li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li> 
 
            <li><a href="#" title="Aller à la page 2.2">Item 2.2</a></li> 
            <li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li> 
 
        </ul> 
    </li> 
    <li class="toggleSubMenu"><span>Item 3</span> 
        <ul class="subMenu"> 
 
            <li><a href="#" title="Aller à la page 3.1">Item 3.1</a></li> 
            <li><a href="#" title="Aller à la page 3.2">Item 3.2</a></li> 
 
        </ul> 
    </li> 
    <li><a href="#" title="Aller à la page 4">Item 4</a></li> 
 
</ul>


le css

.navigation { 
      margin: 0; 
      padding: 0; 
      list-style: none; 
      background: #000; 
      color: #fff; 
      width: 200px; 
      font: 1.2em "Trebuchet MS", sans-serif; 
      } 
   .navigation a, .navigation span { 
      display: block; 
      padding: 4px 10px; 
      color: #fff; 
      text-decoration: none; 
      background: #000 url(menu-item.png) left bottom no-repeat; 
      } 
   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span { 
      background-image: url(menu-item-deroule.png); 
      } 
   .navigation .open a, .navigation .open span { 
      background-image: url(menu-item-enroule.png); 
      } 
   .navigation a:hover, .navigation a:focus, .navigation a:active { 
      text-decoration: underline; 
      } 
   .navigation .subMenu { 
      font-size: .8em; 
      background: #ccc url(subMenu.png) 0 0 repeat-x; 
      font-size: .9em; 
      margin: 0; 
      padding: 0; 
      border-bottom: 1px solid #666; 
      } 
   .navigation ul.subMenu a { 
      background: none; 
      padding: 3px 20px; 
      }


javascript

$(document).ready( function () { 
    // On cache les sous-menus : 
    $(".navigation ul.subMenu").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".navigation li.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".navigation li.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.subMenu:visible").length != 0) { 
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") }); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    }); 
} ) ;


J'aimerai mettre ce menu en horizontale
j'ai essayer avec :
block :inline;


De plus travaillant avec des include php lorsque je vais sur un lien je n'ai plus le menu en haut


Je n'ai pas de page en ligne car j'attends de faire le menu pour l'y mettre


Merci de votre aide.
Salut,

Essayes peut-être avec un display:inline-block appliqué sur ta balise <ul>

ZuG'
Bonjour,

J'ai bien le menu horizontale, mais les liens du sous-menu ne s'affichent pas correctement.
Le premier lien du sous-menu s'affichent a droite du menu et les autres s'affichent sous le menu parent

Voici le code du menu :

<html>
<head>
<link type="text/css" rel="stylesheet" href="menu.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<ul class="navigation"> 
    <li class="toggleSubMenu"><span>Accueil</span>
 			<ul class="subMenu">
	 			<li><a href="#" title="Aller 1">1</a></li>
            <li><a href="#" title="Aller 2">2</a></li>
 			</ul>
 	</li>
    <li class="toggleSubMenu"><span>Theorie</span>
        <ul class="subMenu"> 
            <li><a href="#" title="Mathematique">Mathematique</a></li>
            <li><a href="#" title="Ethernet">Ethernet</a></li>
            <li><a href="#" title="TCP/IP">TCP/IP</a></li>
        </ul>
    </li>
    <li class="toggleSubMenu"><span>Linux</span> 
        <ul class="subMenu"> 
            <li><a href="#" title="Ligne de commande">Ligne de commande</a></li> 
            <li><a href="#" title="Reseau">Reseau</a></li> 
        </ul> 
    </li> 
    <li class="toggleSubMenu"><span>Windows</span>
    </li> 
</ul>
</body>
</html>


Voici le code du css :

.navigation {
      margin: 0;
      padding: 0; 
      list-style: none;
      background: #000;
      color: #fff;
      font: 1.2em "Trebuchet MS", sans-serif; 
      }
.navigation a, .navigation span { 
    	float:left;
  	display: none;
        color: #fff;
        text-decoration: none;
        background: #000 url(menu-item.png) left bottom no-repeat; 
      }
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span{
	display: block;
	background-image: url(menu-item-deroule.png);
      }
.navigation .open a, .navigation .open span {
	background-image: url(menu-item-enroule.png); 
      }
.navigation a:hover, .navigation a:focus, .navigation a:active { 
        text-decoration: underline;
      }
.navigation .subMenu {
	list-style-type : square;
	display: block;
      } 
.navigation ul.subMenu a {
		}


et le code du javascripts :

$(document).ready( function () { 
    // On cache les sous-menus : 
    $(".navigation ul.subMenu").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".navigation li.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".navigation li.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.subMenu:visible").length != 0) { 
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") }); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    }); 
} ) ;


Merci de votre aide.
Sujet clos
Aller à