fragmente

How to …

I show you a nice jQuery snippet for a smoothy slider menu.

This was my first jQuery experience – if you find some tuning options, tell me please!

Here you can see my script in Action: http://www.gyn-endoskopie.de/

/**
 * @author team noir GbR
 * simple slide-out Menu
 * www.gyn-endoskopie.de
 * Version 1.5 - 11.01.2010
 */
$(document).ready(function() {
 //on first loading, hide the submenu
 $(".subul li").hide();
 //show active sub element, after paging
 $(".active").parent().parent(".subul").css('margin-top', -4).children("li").show(".subul li");

 //Actionhandling
 //click on menu
 $(".slide").click(function(){

 //only one submenu is allowed to show
 $(".angeklickt li").slideUp("fast");
 $(".angeklickt").removeClass("angeklickt");
 //close other open submenus
 $(".active").parent().parent(".subul").children("li").slideUp(".subul li");

 //mark heading ul
 $(this).next("ul").addClass('angeklickt');

 //show marked submenu
 if ($(".angeklickt li").is(":hidden")) {
 $(".angeklickt li").slideDown("slow");
 $("ul.angeklickt").css('margin-top', -4);
 return false;
 }
 //close/slide submenu
 else {
 $(".angeklickt li").slideUp("slow");
 $("ul.angeklickt").css('margin-top', 0);
 $(this).next("ul").removeClass("angeklickt");
 return false;
 }
 });

});

this is the menu source code:

<div>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Zur Person</a></li>
<li><a href="#l">Operationen</a>
 <ul class="subul>
   <li><a href="#" title="Operationsspektrum">Operationsspektrum</a></li>
   <li><a href="#" title="OP-Aufklärung">OP-Aufklärung</a></li>
   <li><a href="#" title="OP-Patienteninfos">OP-Patienteninfos</a></li>
   <li><a href="#" title="Anmeldung">Anmeldung</a></li>
 <li><a href="#" title="Novasure/Goldnetz">Novasure/Goldnetz</a></li>
 </ul>
</li>
<li><a href="#" title="Tagesklinik">Tagesklinik</a></li>
<li><a href="#">Kontakt</a>
 <ul class="subul>
   <li><a href="#" title="Schreiben Sie uns">Schreiben Sie uns</a></li>
   <li><a href="#" title="Anfahrt mit dem Auto">Anfahrt mit dem Auto</a></li>
   <li><a href="#" title="Wegbeschreibung">Wegbeschreibung</a></li>
 </ul>
</li>
</ul>
</div>

System information:

• TYPO3 4 CMS
• YAML 3.1
• CSS 2/3
• XHTML 1.0
• http://www.gyn-endoskopie.de/

greetz!

Related posts:

1. How to … integrate a YAML Menu to TYPO3
2. How to use position-absolute and z-index with Internet Explorer 7 and nested containers
3. How to build a YAML fullscreen layout
4. mixed TypoScript Snippets Vol. 1
5. Fight old Browsers – Warning with jQuery
6. jQuery badBrowser Update Version 1.4
7. How to … center a YAML Layout
8. Aptana IDE Webdevelopment