JQuery Horizontales Akkordeon CSS

Ich versuche in Jquery ein einfaches mehrstufiges UL Horizontal Accordion (oder Slide-Menü) zu erstellen. Hunter Daley stellte gnädigerweise den JQuery-Code zur Verfügung, aber ich kann den CSS nicht herausfinden. Ich weiß, das ist neu, aber ich bin wirklich fest.JQuery Horizontales Akkordeon CSS

Wenn Ul li Ul herausgleitet, erzeugt es einen Zeilenumbruch, ich möchte alles inline anzeigen lassen, ohne Unterbrechungen. Ich habe versucht Whitespace: Nowrap, Display Inline usw. Es wird einfach nicht scheinen es zu tun. Irgendwelche Ideen?

Per, Glavic Antwort: Ich habe versucht, Schwimmer zu verwenden, aber wenn ich Safari Fehler machen und blinken die Unterebene UL während der Animation:

Mit Floats:

Rechts Ich habe versucht, es ohne Schwimmer zu machen. Ich versuche, mit der Animationsfunktion zu bleiben.

Safari Bugs aus und blinkt die Sub-ul während der 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-Beitrag:

<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>

Quelle

2009-02-25 stapler

Haben Sie hier einen Blick http://stackoverflow.com/a/27262010/1922144 – davidcondrey

Wenn ich Sie richtig verstehen möchten Sie erste und zweite Menü-Ebene in einer Linie (horizontal) haben?

Try this:

<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>

Quelle

2009-02-25 19:08:45

Danke, aber Safari Fehler aus und blinkt die Unter ul während der Animation. – stapler

Nicht inline verwenden, Elemente sind besser, wenn sie blockiert sind. Versuchen Sie eine feste Höhe auf anderen ul. –

Ich denke, dass "display: inline" würde den Trick tun - aber die belebte Funktion ist die Einstellung die Anzeige auf "Block" anstelle von "inline".

Wenn es in Ordnung ist, "einzufangen" anstatt zu animieren, können Sie dies stattdessen tun.

<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>

Quelle

2009-02-25 19:36:43

Danke Ian, aber ich versuche, bei der Animationsfunktion zu bleiben. – stapler

Gern geschehen - ich kann einfach nicht herausfinden, wie man die Anzeige überschreibt: Blockieren, dass die Animate-Funktion verwendet. Es ist frustrierend, denn wenn Sie es mit Firebug ändern, wird es perfekt angezeigt. Ich glaube nur nicht, dass die Animate-Funktion Ihnen erlaubt, die Anzeige inline zu verwenden. Auf der Suche nach einer Problemumgehung ... :) –

Dies ist möglicherweise der falsche Pfad für mich - es ist möglicherweise nicht möglich, ein Inline-Element an erster Stelle zu animieren ... –

Es macht Spaß, sich selbst zu bauen. Es macht auch Spaß, diese awesomeness zu verwenden: http://jqueryui.com/demos/accordion/

Quelle

2009-02-25 20:33:33

Ermöglicht Ihnen der jQuery-Accordian, den Inhalt horizontal anzuzeigen? –

Noope, tut es nicht – stapler

JQuery Horizontales Akkordeon CSS

Antwort

Verwandte Themen