28173 sujets

CSS et mise en forme, CSS3

[Résolu]Menu jQuery + horizontal

Bonsoir,

j'ai suivi le tutoriel sur la création d'un menu déroulant avec jQuery.
Cependant je n'arrive pas à l'adapter à l'horizontal!

Voici mon code html:


<head>
  <link rel="stylesheet" type="text/css" href="format.css" />
  <script type="text/javascript" src="./jquery-1.2.1.js"></script>
  <script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
    $(".navigation ul.subMenu:not('.open_at_load')").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;
    });

} ) ;
// -->

</script>
</head>
<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> 
</html>


et maintenant mon code CSS:

.navigation {
      margin: 0;
      padding: 0;
      list-style: none;
      background: #000;
      color: #fff;
      width: 100%;
      font: arial;
      font-size: 15pt;
      text-align: center;
      vertical-align: center;
      font-variant : small-caps;
      list-style-type : none;
      }
   .navigation a, .navigation span {
      display: block;
      float: left; 
      height: 30px;
      width: 150px;
      color: #fff;
      text-decoration: none;
      background: #000 url('./boutonmenu.png') left bottom no-repeat;
      }
   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
      background-image: url('./boutonmenuplus.png');
      }
   .navigation .open a, .navigation .open span {
      background-image: url('./boutonmenumoins.png');
      }
   .navigation a:hover, .navigation a:focus, .navigation a:active {
      text-decoration: underline;
      }
   .navigation .subMenu {
      font-size: .8em;
      width: 150px;
      background-image: url('./boutonmenu.png');
      background-repeat: repeat-x;
      font-size: .9em;
      border-bottom: 0px solid #193441;
      list-style-type : none;
      }
   .navigation ul.subMenu a {
      background: none;
      padding: 3px 20px;
      }


Le tout est disponible ici si vous souhaitez voir mon bug!
http://maxime350.free.fr/jquery/essai.html#
Merci à tous pour votre aide!
Modifié par maxime350 (23 Dec 2007 - 16:51)
Bonjour,

Loin d'être parfait mais ça fonctionne

Css

  li.toggleSubMenu {
  		display:block;
  		float:left;
  		width:150px;
}  
	li.linkSubMenu {
  		display:block;
  		float:left;
  		width:150px;
}
  .navigation {

      margin: 0;

      padding: 0;

      list-style: none;

      background: #000;


      background-image: url('./images/boutonmenu.png');
      color: #fff;

      font: arial;

      font-size: 15pt;

      text-align: center;

      vertical-align: center;

      font-variant : small-caps;

      list-style-type : none;

      }

   .navigation a, .navigation span {

      display: block;

      height: 30px;

      width: 150px;

      color: #fff;

      text-decoration: none;

      background: #000 url('./images/boutonmenu.png') left bottom no-repeat;

      }

   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span {

      background-image: url('./images/boutonmenuplus.png');

      }

   .navigation .open a, .navigation .open span {

      background-image: url('./images/boutonmenumoins.png');

      }

   .navigation a:hover, .navigation a:focus, .navigation a:active {

      text-decoration: underline;

      }

   .navigation .subMenu {
      
      background-color:olive;

      background-repeat: repeat-x;

      list-style-type : none;
      
      margin:0;
      padding:0;

      }

   .navigation ul.subMenu a {

      background: none;

      }


Html/js

<head>

  <script type="text/javascript" src="./jquery-1.2.1.js"></script>

  <script type="text/javascript" src="./jquery-1.2.1.js"></script>

  <script type="text/javascript">

<!--

$(document).ready( function () {

    // On cache les sous-menus

    // sauf celui qui porte la classe "open_at_load" :

    $(".navigation ul.subMenu:not('.open_at_load')").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;

    });



} ) ;

// -->



</script>

</head>

<ul class="navigation">

    <li class="linkSubMenu">
		<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> 

</html>


FastSnake.
Sujet clos
Aller à