Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>jQuery Drop Down Menu</title> 
 
<!-- CSS For The Menu --> 
<link rel="stylesheet" href="styledrzewko.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.color.js"></script> 
<script type="text/javascript" src="jMenu.js"></script> 
</head> 
<body> 
<!-- Menu Start --> 
<div id="jQ-menu"> 
    <ul>
        <li><span class="toggle">Pielęgnacja twarzy</span> 
            <ul class="submenu1"> 
                <li><span class="toggle"><a class="current">First</a></span> 
                        <ul class="submenu2"> 
                            <li><span class="toggle">Living dimension</span>
                                <ul class="submenu3">
                                    <li><a href="livemosttreatment.html">> Live moist treatment</a></li>
                                    <li><a href="vitaleffect.html">> Vital effect</a></li>
                                </ul>
                            </li>
                            <li><span class="toggle"><a>Isabelle Lancray</a></span>
                                <ul class="submenu3">
                                    <li><a href="vitaminarevi.html">> Vitamina Revitalisant</a></li>
                                    <li><a href="alabaster.html">> Alabaster</a></li>
                                </ul>
                            </li>
                            <li><span class="toggle">Mia Pharm</span>
                                <ul class="submenu3">
                                    <li><a href="liftingjonowy.html">> Lifting Jonowy</a></li>
                                </ul>
                            </li>
                            <li><span class="toggle">Werner Gerlinger Cosmeticss</span>
                                <ul class="submenu3">
                                    <li><a href="energyshock.html">> Energy Schock Lift</a></li>
                                    <li><a href="vitapeel.html">> Vita Peel</a></li>
                                </ul>
                            </li>
                            <li><a href="purles.html">> Purles</a></li>
                            <li><a href="synesis.html">> Synesis</a></li>
                            <li><a href="medex.html">> Medex</a></li>
                            <li><a href="jadwiga.html">> Jadwiga</a></li>
                        </ul> 
                </li>
                <li><span class="toggle">Second</span>
                    <ul class="submenu2">
                        <li><a href="manualne.html">> Manualne oczyszczanie</a></li>
                        <li><a href="ultradzwieki.html">> Peeling kawitacyjny</a></li>
                        <li><a href="ozonowanie.html">> Ozonowanie D'arsonval</a></li>
                    </ul>
                </li>
                <li><a href="polzabiegi.html">> Pół zabiegi</a></li>
                <li><span class="toggle">Third</span>
                    <ul class="submenu2">
                        <li><a href="manualnymasaz.html">> Manualny masaż twarzy</a></li>
                    </ul>
                </li>
                <li><span class="toggle">Pielęgnacja okolicy oka</span>
                    <ul class="submenu2">
                        <li><a href="mezoterapiaiglowa.html">> Mezoterapia igłowa</a></li>
                    </ul>
                </li>
                <li><a href="mikrodermambrazja.html">> Mikrodermabrazja diamentowa</a></li>
                <li><span class="toggle">Mezoterapia igłowa - zastrzyki młodości</span>
                    <ul class="submenu2">
                        <li><a href="twarzy.html">> Mezoterapia twarzy</a></li>
                        <li><a href="okolicoka.html">> Mezoterapia okolic oka</a></li>
                        <li><a href="ciala.html">> Mezoterapia ciała</a></li>
                        <li><a href="preparaty.html">> Preparaty do mezoterapii</a></li>
                    </ul>
                </li>
                <li><a href="mezoterapiamikro.html">> Mezoterapia mikroigłowa - frakcyjna</a></li>
                <li><a href="zelazko.html">> Żelazko do prasowania zmarszczek</a></li>
            </ul> 
        </li> 
        <li><span class="toggle">Pielęgnacja ciała</span> 
            <ul class="submenu1">
            </ul>
        </li> 
        <li><span class="toggle">Pielęgnacja dłoni i stóp</span>
            <ul class="submenu1">
            </ul>
        </li>
        <li><span class="toggle">Styliacja brwi i rzęs</span>
            <ul class="submenu1">
            </ul>
        </li> 
        <li><span class="toggle">Zabiegi z aparaturą</span>
            <ul class="submenu1">
            </ul>
        </li>
        <li><span class="toggle">Medycyna estetyczna</span>
            <ul class="submenu1">
            </ul>
        </li> 
        <li><span class="toggle">Panna młoda</span>
            <ul class="submenu1">
            </ul>
        </li>
        <li><span class="toggle">Zabiegi dla mężczyzn</span>
            <ul class="submenu1">
            </ul>
        </li>
        <li><span class="toggle">Pozostałe zabiegi</span>
            <ul class="submenu1">
            </ul>
        </li>
    </ul> 
</div> 
 
 
​
 
</body> 
</html>
 
$(function() {
    // hide all the sub-menus
    $("span.toggle").next().hide();
    $(".current").parents("li ul").show();
    
    
    // add a link nudging animation effect to each link
    $("#jQ-menu a, #jQ-menu span.toggle").hover(function() {
        $(this).stop().animate( {
            //paddingLeft:"10px",
            color:getElementById("#jQ-menu a, #jQ-menu span.toggle").color
        }, 300);
    }, function() {
        $(this).stop().animate( {
            paddingLeft:"0",
            color:getElementById("#jQ-menu a, #jQ-menu span.toggle").color,
        }, 300);
    });
    $("#jQ-menu li.current a").hover(function() {
        $(this).stop().animate( {
            //paddingLeft:"10px",
            color:getElementById("#jQ-menu li.current a").color
        }, 300);
    }, function() {
        $(this).stop().animate( {
            paddingLeft:"0",
            color:getElementById("#jQ-menu li.current a").color,
        }, 300);
    });
    $("#jQ-menu span.toggle a.current").hover(function() {
        $(this).stop().animate( {
            //paddingLeft:"10px",
            color:getElementById("#jQ-menu span.toggle a.current").color
        }, 300);
    }, function() {
        $(this).stop().animate( {
            paddingLeft:"0",
            color:getElementById("#jQ-menu span.toggle a.current").color,
        }, 300);
    });
​
    
    // set the cursor of the toggling span elements
    $("span.toggle").css("cursor", "pointer");
    
    // prepend a plus sign to signify that the sub-menus aren't expanded
    $('span.toggle').each(function(){
      if($(this).next().find(".current").html() != null){
        $(this).prepend("> ");
      }else{
         $(this).prepend("> ");
      };
                });
    // add a click function that toggles the sub-menu when the corresponding
    // span element is clicked
  $("span.toggle").click(function() {
    $(this).addClass('expanded');
    $(this).next().toggle(1000);
    
    $(this).parent().parent().find('.expanded').not(this).each(function(){
       $(this).next().toggle(1000);
     });
});
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers