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 HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
​
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<title>Menu Animation</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
​
<style type="text/css">
#menubar-box
{
    position: relative;
    display: block;
    height: 90px;
    width: 870px;
    top: 10px;
    margin: 0 auto;
}
#menubar
{
    position: relative;
    display: block;
    height: 70px;
    width: 860px;
    top: 10px;
    margin: 0 auto;
}
#menubar LI.main
{
    position: relative;
    display: block;
    float: left;
    height: 70px;
    width: 166px;
    margin: 0 2px;
    background-color: #6C7386;
    border: 1px solid black;
    cursor: pointer;
}
#menubar LI, #menubar UL UL LI, #menubar UL UL UL LI
{
    position: relative;
    display: block;
    float: left;
    height: 40px;
    width: 166px;
    background-color: #535763;
    cursor: pointer;
}
#menubar UL
{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#menubar UL UL LI
{
    height: 100%;
    width: 100%;
    top: 5px;
    background-color: #535763;
}
#menubar UL UL
{
    position: relative;
    visibility: hidden;
    height: 200px;
    width: 164px;
    top: 71px;
    left: 0px;
    padding: 0px 0px 5px;
    background-color: #535763;
    font-size: 95%;
    border-color: #000;
    border-width: 1px;
    border-style: none solid solid;
}
#menubar A
{
    position: absolute;
    display: block;
    height: 25px;
    width: 140px;
    top: 7px;
    z-index: 1000;
    margin: 0px 0px 0px 12px;
    border: 1px solid black;
    text-decoration: none;
    cursor: pointer;
}
#menubar UL UL LI A, #menubar UL UL UL LI A
{
    position: relative;
    height: 179px;
    margin: 0 auto;
    background-color: #EEEEEE;
    border-bottom: 1px solid #32353D;
}
</style>
​
<!-- Menu Bar -->
<script type="text/javascript">             
$(document).ready(function () {
​
    $("#menubar li.one").hover(function () {
        $(this).find("ul:first").css({height:"" })
        $(this).find("ul:first").stop({clearQueue:true, gotoEnd:true}).css({visibility: "visible",zIndex:"50000",display: "none" }).slideDown(1800, "easeOutElastic");
            },function(){
        $(this).find("ul ul:first,ul:first").stop({clearQueue:true, gotoEnd:true}).slideUp(1800);
    });
​
    $("#menubar li.two").hover(function () {
        $(this).find("ul:first").css({height:"",top:""});
        $(this).find("ul:first").stop({clearQueue:true, gotoEnd:true}).css({visibility: "visible",zIndex:"50000",display: "none" }).show("slide", { direction: "up" }, 1000);
            },function(){
        $(this).find("ul ul:first,ul:first").stop({clearQueue:true, gotoEnd:true}).hide("slide", { direction: "up" }, 1000);
    });
    
    $("#menubar li.three").hover(function () {
        $(this).find("ul:first").css({height:"",top:""});
        $(this).find("ul:first").stop({clearQueue:true, gotoEnd:true}).css({visibility: "visible",zIndex:"50000",display: "none" }).show("slide", { direction: "up" }, 1000);
            },function(){
        $(this).find("ul ul:first,ul:first").stop({clearQueue:true, gotoEnd:true}).slideUp(1800);
    });
    
    $("#menubar li.four").hover(function () {
        $(this).find("ul:first").css({height:"",top:""});
        $(this).find("ul:first").stop({clearQueue:true, gotoEnd:true}).css({visibility: "visible",zIndex:"50000",display: "none" }).slideDown(1800, "easeOutElastic");
            },function(){
        $(this).find("ul ul:first,ul:first").stop({clearQueue:true, gotoEnd:true}).hide("slide", { direction: "up" }, 1000);
    });
});
</script>
​
</head>
​
<body>
​
<div id="page">
    <div id="content">
        <div id="header"></div>
            <div id="menubar-box">
                <div id="menubar">
                <p> <b>This example uses <i>.slideDown(1800, "easeOutElastic");</i> and <i>.slideUp(1800);</i></b>
                <br>Everything works as intended.</p>
                    <ul class="menubar_hover_id">
                        <li class="main one">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main one">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main one">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main one">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main one">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>   
                    </ul>
                    
                </div> <!-- Closes menubar -->
            </div>  <!-- Closes menubar-box -->
​
            <br><br><br><br>
            <br><br><br><br>            
​
            <div id="menubar-box">
                <div id="menubar">
                <p> <b>This example uses <i>.show("slide", { direction: "up" }, 1000);</i> and <i>.hide("slide", { direction: "up" }, 1000);</i></b>
                <br>Note that the hover is, for some reason, lost when hovering the child UL or LI.</p>
                    <ul class="menubar_hover_id">
                        <li class="main two">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main two">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main two">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main two">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main two">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>   
                    </ul>
                </div> <!-- Closes menubar -->
            </div>  <!-- Closes menubar-box -->
            
            <br><br><br><br>
            <br><br><br><br>    
        
            <div id="menubar-box">
                <div id="menubar">
                <p> <b>This example uses <i>.show("slide", { direction: "up" }, 1000);</i> and <i>.slideUp(1800);</i></b>
                <br>Again, when hovering the child UL or LI, the hover is lost.</p>
                    <ul class="menubar_hover_id">
                        <li class="main three">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main three">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main three">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main three">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>
                        <li class="main three">
                            <ul>
                                <li><a></a></li>
                            </ul>
                        </li>   
                    </ul>
                </div> <!-- Closes menubar -->
            </div>  <!-- Closes menubar-box -->
​
            <br><br><br><br>
            <br><br><br><br>    
        
            <div id="menubar-box">
                <div id="menubar">
                <p> <b>This example uses <i>.slideDown(1800, "easeOutElastic");</i> and <i>.hide("slide", { direction: "up" }, 1000);</i></b>
                <br>Behaivior in this example can be quite erratic.  The child UL's position can jump from location to location and the size can very as well.</p>
                    <ul class="menubar_hover_id">
                        <li class="main four">
                                        <ul>
                                            <li><a></a></li>
                                        </ul>
                        </li>
                        <li class="main four">
                                <ul>
                                    <li><a></a></li>
                                </ul>
                        </li>
                        <li class="main four">
                                <ul>
                                    <li><a></a></li>
                                </ul>
                        </li>
                        <li class="main four">
                                <ul>
                                    <li><a></a></li>
                                </ul>
                        </li>
                        <li class="main four">
                                <ul>
                                    <li><a></a></li>
                                </ul>
                        </li>   
                    </ul>
                </div> <!-- Closes menubar -->
            </div>  <!-- Closes menubar-box -->
            
            <br><br><br><br>
            <br><br><br><br>
            
    </div>
</div>
</body>
</html>
 
document.getElementById("hello").innerHTML = "Hello World - this was inserted using JavaScript";
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers