JQuery Accordéon horizontal CSS

J'essaye de construire un accordéon horizontal multi-niveau simple (ou un menu de diapositives) dans Jquery. Hunter Daley a gracieusement fourni le code Jquery, mais je n'arrive pas à comprendre le css. Je sais que c'est newb, mais je suis vraiment coincé. Quand Ul li Ul glisse, cela crée un saut de ligne, je voudrais que tout soit affiché en ligne, sans interruption. J'ai essayé les espaces: nowrap, afficher en ligne, etc Cela ne semble pas le faire. Des idées?JQuery Accordéon horizontal CSS

Selon, la réponse de Glavic: Je tente de d'utiliser des flotteurs, mais si je fais des bugs Safari out et flash sous-niveau UL lors de l'animation:

En utilisant Flotteurs:

droit , J'essayais de le faire sans les flotteurs. J'essaie de rester avec la fonction d'animation. Safari émet une bogue et fait clignoter le sous-élément au cours de l'animation.

<style type="text/css"> 
<!-- 
body { 
    font-size: 1em; 
    line-height: 1em; 
} 
ul { 
    background-color: yellow; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    height: 1em; 
    float: left; 
} 
ul li { 
    background-color: aqua; 
    float: left; 
} 
ul li ul { 
    background-color: blue; 
} 
ul li ul li { 
    background-color: green; 
} 
a, a:link, a:hover, a:visited, a:active { 
    color: black; 
    text-decoration: none; 
    float: left; 
} 
--> 
</style>

Original Post:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 

    <title>untitled</title> 
     <style type="text/css"> 
    <!-- 
    ul{ 
     list-style: none; 
     background-color: yellow; 
     margin: 0; 
     padding: 0; 
       white-space: nowrap; 
      } 

    ul li { 
     background-color: aqua; 
     display: inline; 


    } 

    ul li ul { 
     background-color: blue; 
       } 


    ul li ul li { 
     background-color: green;  
    } 

    a, a:link, a:hover, a:visited, a:active { 
      color: black; 
      text-decoration: none; 

    } 
    --> 
    </style> 

    <script type="text/javascript"> 
      var $current = null; 
     $(document).ready(function(){ 
      $("ul li ul").hide(); // hide submenus by default on load 

      $("ul li a").click(function(){ 
       var $sub = $(this).next(); 
       if ($sub.css("display") == "none") 
       { 
       if ($current != null) 
        $current.animate({ width: 'hide' }); // if you want to only show one sub at a time 
       $sub.animate({ width: 'show' }); 
       $current = $sub; 
       } 
       else 
       { 
       $sub.animate({ width: 'hide' }); 
       $current = null; 
       } 
      }); 
     }); 

    </script> 

</head> 

<body> 
    <ul> 
      <li> 
        <a href="#">Top-level 1</a> 
      </li> 
      <li> 
        <a href="#">Top-level 2</a> 

        <ul> 
          <li><a href="#">Bottom Level A1</a></li> 
          <li><a href="#">Bottom Level A2</a></li> 
          <li><a href="#">Bottom Level A3</a></li> 
          <li><a href="#">Bottom Level A4</a></li> 
        </ul> 
      </li> 

      <li> 
        <a href="#">Top-level 3</a> 
        <ul> 
          <li><a href="#">Bottom Level B1</a></li> 
          <li><a href="#">Bottom Level B2</a></li> 
        </ul> 
      </li> 

      <li> 
        <a href="#">Top-level 4</a> 
      </li> 
    </ul> 


</body> 
</html>

Source

2009-02-25 stapler

Jetez un oeil ici http://stackoverflow.com/a/27262010/1922144 – davidcondrey

Si je vous comprends bien, vous aimeriez avoir des premier et deuxième niveau de menu dans une ligne (horizontale)?

Essayez ceci:

<style type="text/css"> 
    ul{ 
     list-style: none; 
     background-color: yellow; 
     margin: 0; 
     padding: 0; 
     float: left; 
    } 
    ul li { 
     background-color: aqua; 
     float: left; 
    } 
    ul li ul { 
     background-color: blue; 
    } 
    ul li ul li { 
     background-color: green; 
    } 
    a, a:link, a:hover, a:visited, a:active { 
     color: black; 
     text-decoration: none; 
     float: left; 
    } 
</style>

Source

2009-02-25 19:08:45

Merci, mais les bugs Safari out et clignote sous ul pendant l'animation. – stapler

Ne pas utiliser en ligne, les éléments sont meilleurs s'ils sont bloqués. Essayez la hauteur fixe sur d'autres ul. –

Je pense que « display: inline » ferait l'affaire - mais la fonction Animer est de régler l'affichage à « bloc » au lieu de « en ligne ».

S'il est possible de «mettre en place» au lieu d'animer, vous pouvez le faire à la place.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 

    <title>untitled</title> 
    <style type="text/css"> 
     ul{list-style:none;background-color:yellow;margin:0;padding:0;white-space:nowrap;display:inline;} 
     li ul{display:inline;} 
     ul li{background-color:aqua;display:inline;} 
     ul li ul{background-color: blue;} 
     ul li ul li{background-color: green;} 
     a, a:link, a:hover, a:visited, a:active{color: black;text-decoration: none;} 
    </style> 

    <script type="text/javascript"> 
     var $current = null; 
     $(document).ready(function() { 
      $("ul li ul").hide(); // hide submenus by default on load 

      $("ul li a").click(function() { 
       var $sub = $(this).next(); 
       if ($sub.css("display") == "none") { 
        if ($current != null) 
         //$current.animate({ width: 'hide' }); // if you want to only show one sub at a time 
        $current.removeAttr("display").attr({ style: "display:none;" }); 
        $sub.removeAttr("style").attr({ display: "inline" }); 
        $current = $sub; 
       } 
       else { 
        $sub.removeAttr("display").attr({ style: "display:none;" }); 
        $current = null; 
       } 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <ul> 
      <li> 
        <a href="#">Top-level 1</a> 
      </li> 
      <li> 
        <a href="#">Top-level 2</a> 

        <ul> 
          <li><a href="#">Bottom Level A1</a></li> 
          <li><a href="#">Bottom Level A2</a></li> 
          <li><a href="#">Bottom Level A3</a></li> 
          <li><a href="#">Bottom Level A4</a></li> 
        </ul> 
      </li> 

      <li> 
        <a href="#">Top-level 3</a> 
        <ul> 
          <li><a href="#">Bottom Level B1</a></li> 
          <li><a href="#">Bottom Level B2</a></li> 
        </ul> 
      </li> 

      <li> 
        <a href="#">Top-level 4</a> 
      </li> 
    </ul> 


</body> 
</html>

Source

2009-02-25 19:36:43

Merci Ian, mais j'essaie de rester fidèle à la fonction d'animation. – stapler

Vous êtes les bienvenus - Je n'arrive pas à comprendre comment contourner l'affichage: bloquer que la fonction animée utilise. C'est frustrant parce que si vous le changez en utilisant Firebug, il s'affiche parfaitement. Je ne pense tout simplement pas que la fonction animée vous permettra d'utiliser l'affichage en ligne. Vous cherchez une solution de contournement ... :) –

Cela peut être le mauvais chemin pour moi de descendre - il peut ne pas être possible d'animer un élément en ligne en premier lieu ... –

C'est amusant de construire soi-même. Il est aussi amusant d'utiliser cette génialité: http://jqueryui.com/demos/accordion/

Source

2009-02-25 20:33:33

L'accordéon jQuery vous permet-il d'afficher le contenu horizontalement? –

Noope, ce n'est pas – stapler

JQuery Accordéon horizontal CSS

Répondre

Questions connexes