[JavaScript] [jQuery] ul/li einzeln ausgeben (Dropdownmenu)

Dieses Thema im Forum "Webentwicklung" wurde erstellt von °EraZoR°, 11. März 2010 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 11. März 2010
    [jQuery] ul/li einzeln ausgeben (Dropdownmenu)

    Hi,
    ich versuch mich grade daran ein Dropdown-Menü für eine Navigation mit jQuery zu schreiben..
    Grundgerüst steht auch schon..
    HTML:
    <ul id="nav">
     <li><a href="#">Parent 01</a></li>
     <li><a href="#">Parent 02 &gt; </a>
     <ul class="menu">
     <li><a href="#">Item 01</a>
     <ul class="submenu" style="left:102%;top:-3%;">
     <li><a href="#">Item 01</a></li>
     <li><a href="#">Item 02</a></li>
     <li><a href="#">Item 03</a></li>
     </ul>
     </li>
     <li><a href="#" class="selected">Item 02</a></li>
     <li><a href="#">Item 03</a></li>
     </ul>
     <div class="clear"></div>
     </li>
     <li><a href="#">Parent 03 &gt; </a>
     <ul class="menu">
     <li><a href="#">Item 04</a></li>
     <li><a href="#">Item 05</a></li>
     <li><a href="#">Item 06</a></li>
     <li><a href="#">Item 07</a></li>
     </ul> 
     <div class="clear"></div>
     </li>
     <li><a href="#">Parent 04</a></li>
    </ul>
    
    So wie ihr seht gibt es einmal das erste DropDownMenü, welches die Klasse "menu" hat.. Und dann gibt es noch eins mit der Klasse "submenu", welches rechts neben seinem Elternelement hier Parent 02.Item 02 steht...
    So dieses Submenü soll nicht einfach erscheinen, sondern es soll zuerst das erste list-item eingeblendet werden und dann die anderen List-Items der Liste nach unten aufbauen..
    Wie bei einem Akkordeon..

    Hoffe ihr versteht wie ich das meine..
    Ich bekomm es bloß nicht hin, dass sich nur das erste List-Item anzeigt, weil ja die gesamte UL mit display:none ausgeblendet wird man somit das list-item nicht einfach einblenden kann..

    MfG
     
  2. 11. März 2010
    AW: [jQuery] ul/li einzeln ausgeben (Dropdownmenu)

    Hallo °EraZoR°

    hier ein kleiner anstoß von mir, ja es ist nicht das sauberste beim binden der elemente (^_^)
    soll auch nur eine hilfe für dich sein

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unbenanntes Dokument</title>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script language="javascript" type="text/javascript">
    $(function(){
     // binde alle a elemente die sich in ".menu li" befinden mit einem klick
     $('.menu li').children('a').click(function(){
     var submenu = $(this).parent('li').children('.submenu');
     // Prüfung ob ein submenu vorhanden ist
     if(submenu.length > 0){
     // ein und ausblenden des submenu
     submenu.toggle(100);
     }
     });
    });
    </script>
    <style type="text/css">
    .menu,.menu ul, .menu li{list-style:none;padding:0;margin:0;}
    .menu .submenu{display:none;padding: 0 0 0 20px;}
    </style>
    </head>
    <body>
    <ul class="menu">
     <li><a href="#">Parent 01</a></li>
     <li><a href="#">Parent 02 &bull; </a>
     <ul class="submenu">
     <li><a href="#">Item 01 &bull; </a>
     <ul class="submenu">
     <li><a href="#">Item 01</a></li>
     <li><a href="#">Item 02</a></li>
     <li><a href="#">Item 03</a></li>
     </ul>
     </li>
     <li><a href="#" class="selected">Item 02</a></li>
     <li><a href="#">Item 03</a></li>
     </ul>
     </li>
     <li><a href="#">Parent 03 &bull; </a>
     <ul class="submenu">
     <li><a href="#">Item 04</a></li>
     <li><a href="#">Item 05</a></li>
     <li><a href="#">Item 06</a></li>
     <li><a href="#">Item 07</a></li>
     </ul>
     </li>
     <li><a href="#">Parent 04</a></li>
    </ul>
    </body>
    </html>
     
  3. 13. März 2010
    AW: [jQuery] ul/li einzeln ausgeben (Dropdownmenu)

    Soweit bin ich ja auch schon....
    Bloß ich möchte nicht, dass ein Submenü einfach von oben links nach unten rechts ausfährt, sondern:
    Ich möchte dass zuerst ein einzelnes Submenü nach rechts ausfährt und dann unter diesem die restlichen Menüpunkte ausfahren..
     
  4. 18. März 2010
    AW: [jQuery] ul/li einzeln ausgeben (Dropdownmenu)

    hilfe nummer 2

    um einen nacheinander ablaufenden effekt zu erziehlen kannst du animate nutzen
    .animate() | jQuery API Documentation
    HTML:
    <script language="javascript" type="text/javascript">
    $('element').animate({
     "left":"100px"
    }).animate({
     "height":"400px"
    })
    </script>
    
    wenn dies nun aufgerufen wird bewegt sich das element als erstes nach recht um 100px, vorrausgesetzt es ist mit position absolute positioniert
    danach wird das element noch in der höhe angepast und wolla wir haben einen netten effekt

    Edit:
    Du kannst auch an animate noch einen callback anhängen und so noch spezielle effekte aufrufen

    HTML:
    <script language="javascript" type="text/javascript">
    $('element').animate({
     "left":"100px"
    }).animate({
     "height":"400px"
    },function(){
     $(children).animate({})
    // oder auch per each
     $.each(children,function(){
    // tu was
    })
    })
    </script>
    
     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.