• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Suche spezielles Vertical/Accordion Menü

B

burn4ever

Mitglied
Hallo,
ich habe schon im Netz geuscht aber nichts passendes gefunden.

Im prinzip suche ich ein ganz normales, JavaScript basierendes vertical.accordion Menü.
Allerdings mit folgender Option.

Der Elternlink (erstes Listenelement) soll auch auf eine url verweisen können und nicht nur den accordion Effekt auslösen.
Dabei ist es mir wichtig das erst der Slide vorgenommen wird und dann die neue URL angesprochen wird damit die Animation durch das neu Laden der Seit nicht unterbrochen wird.

Kann mir jamand helfen, bzw. kennt einen Link?
 
Mach aus onclick() einfach onmouseover() und das erste Listenelement mit einem stinknormalen HTML-Link-Element.
Falls das ein Problem ist, zeig bitte den betreffenden Code.
 
Hallo,
verstehe ich nicht ganz. Wenn der Klick nicht nur das Akkordeon öffnet, sondern auch auf eine neue Seite führt, dann hat der Besucher doch gar keine Möglichkeit, den Inhalt des Elementes zu lesen bzw. anzuschauen?
Unabhängig davon kann man bei jQuery bei jeder Animation eine Callback-Funktion angeben, die ausgeführt wird, wenn die Animation beendet wird. Damit müsste sich dein Vorhaben realisieren lassen. Bei diesem Akkordeon-Menü z. B. ist der Code sehr übersichtlich und es sollte leicht sein, eine Callback-Funktion einzuführen, die eine neue Seite aufruft.
 
Zuletzt bearbeitet von einem Moderator:
Hallo,
also beide Varianten von Euch wären möglich.

Ich werde mich aber evtl. mal mit der callback-Variante versuchen.

Wenn ich das richtig verstanden habe kann ich ja nach dem slide mittels callback eine funktion aufrufen, also in meinem Fall dann den href (Link) aufrufen?!

Frage ich mich nur wie ich das global anwenden kann?
Ich möchte das Menü in einem Wordpress Theme verwendet. Um flexibel zu bleiben müsste ich mittels Script immer die Seiten ID (link) an die callback funktion übermitteln.
Aber wie? ;-)
 
Um flexibel zu bleiben müsste ich mittels Script immer die Seiten ID (link) an die callback funktion übermitteln.
Aber wie?
Zum Vergrößern anklicken....
Bei jQuery kannst Du ja mit $(this) auf das aktuelle Objekt zugreifen. Mit parent() kannst Du das übergeordnete Objekt ermitteln, das müsste in deinem Fall ein a-href-Tag sein, und das href-Attribut ermitteln. Ich beziehe mich dabei auf dieses Beispiel:
Making Accordion menu using jquery
 
Okay,
dann beziehe ich mich doch mal auf das Beispiel von Dir.

jQuery arbeitet ja in der Funktion alles nacheinander ab.
Also könnte ich ja nach diesen Zeilen den a-href-Tag aufrufen:
PHP: 
$(document).ready(function()
{
    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
    $("#firstpane p.menu_head").click(function()
    {
        $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
           $(this).siblings().css({backgroundImage:"url(left.png)"}.hier den a-href-Tag??);
    });
});

Könnte mir da jemand noch mal mit der Syntax behilflich sein??

hmtl-Code:
PHP: 
<body>
<div style="float:left" > <!--This is the first division of left-->
  <p><strong>&nbsp;Works on clicking </strong></p>
  <div id="firstpane" class="menu_list"> <!--Code for menu starts here-->
        <p class="menu_head"><a href="header1.html">Header1</a></p>
        <div class="menu_body">
        <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>    
        </div>
        <p class="menu_head">Header-2</p>
        <div class="menu_body">
            <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>    
        </div>
        <p class="menu_head">Header-3</p>
        <div class="menu_body">
          <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>            
       </div>
  </div>
</div>
</body>
 
IMO müsste es so gehen:
Code: 
$(document).ready(function()
{
    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
    $("#firstpane p.menu_head").click(function()
    {
        $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300[b],
               function (){
                   link = $(this).parent().next().attr("href");
                   if (link) window.location.href = link;
                   }[/b]).siblings("div.menu_body").slideUp("slow");
           $(this).siblings().css({backgroundImage:"url(left.png)"});
    });
});
Mit parent() und next() habe ich noch nicht so die Erfahrung, daher kann ich nicht garantieren, dass es so funktioniert.
Viel Erfolg!
 
Zuletzt bearbeitet von einem Moderator:
Hmm, das Problem was ich jetzt habe ist, daß der html a href-Tag
HTML: 
  <p class="menu_head"><a href="header1.html">header1</a></p>
ausgeführt wird aber nicht das jQuery Skript für den Link.
 
Wenn ich den oben aufgeführten Link (header1) betätige, wird dieser sofort ausgeführt, sprich ich gelange sofort zur header1.html. die Animation wird erst gar nicht ausgeführt.

Wenn ich den a href-Tag in der html entferne, funktioniert die Umleitung zur html nach der Animation.

Habe das erstmal mit einem vereinfachten JavaScript getestet:

HTML: 
$(document).ready(function()
{
    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
    $("#firstpane p.menu_head").click(function()
    {
        $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(800,
            function (){
                  //document.location.href= 'header1.html'; 
                  //alert("callback ausgeführt");
                   link = 'header1.html'; 
                   document.location.href = link;

                   }).siblings("div.menu_body").slideUp("slow");
           $(this).siblings().css({backgroundImage:"url(left.png)"});
    });
});
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben