jQuery – Menu Example in jQuery

Menu Example in JQuery

Prerequisites

This example follows the same code structure and menu that was done using JavaScript alone at Lecture – JavaScript – Creating menus with JavaScript , you should be familiar with this before progressing.

In addition you should be familiar with the Lecture – JQuery – Getting Started with JQuery

Summary

Topics Covered:

Creating simple drop down menus

Video

http://online1.daytonastate.edu/player2.php?id=a57e8915461b83adefb011530b711704 

Reference Materials

This is at http://javascript-array.com/scripts/jquery_simple_drop_down_menu/ 

JustUL.html

<html>
<head>
<title></title>
</head>
<body>
<ul id="jsddm">
    <li><a href="#">JavaScript</a>
        <ul>
            <li><a href="#">Drop Down Menu</a></li>
            <li><a href="#">jQuery Plugin</a></li>
            <li><a href="#">Ajax Navigation</a></li>
        </ul>
    </li>
    <li><a href="#">Effect</a>
        <ul>
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Fade Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
            <li><a href="#">Semitransparent</a></li>
        </ul>
    </li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">Help</a></li>
</ul>
</body>
</html> 

 

JMenu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JQuery Menu Example</title>
<link rel="stylesheet" type="text/css" href="/jmenu.css" >
<script src="jquery.js"></script>
<script type="text/javascript">
var timeout         = 2000;
var closetimer        = 0;
var ddmenuitem      = 0;
function jsddm_open()
{    jsddm_canceltimer();
    jsddm_close();
    ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{    if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{    closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{    if(closetimer)
    {    window.clearTimeout(closetimer);
        closetimer = null;}}
$(document).ready(function()
{    $('#jsddm > li').bind('mouseover', jsddm_open);
    $('#jsddm > li').bind('mouseout',  jsddm_timer);});
document.onclick = jsddm_close;
</script>
</head>
<body>
A nice thing about this menu is the ability to
place it anywhere on a page. <br/><br/>
<ul id="jsddm">
    <li><a href="#">JavaScript</a>
        <ul>
            <li><a href="#">Drop Down Menu</a></li>
            <li><a href="#">jQuery Plugin</a></li>
            <li><a href="#">Ajax Navigation</a></li>
        </ul>
    </li>
    <li><a href="#">Effect</a>
        <ul>
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Fade Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
            <li><a href="#">Semitransparent</a></li>
        </ul>
    </li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">Help</a></li>
</ul>
</body>
</html> 

jmenu.css

#jsddm
    margin: 0;
    padding: 0}
    #jsddm li
    {    float: left;
        list-style: none;
        font: 12px Tahoma, Arial}
    #jsddm li a
    {    display: block;
        background: #324143;
        padding: 5px 12px;
        text-decoration: none;
        border-right: 1px solid white;
        width: 70px;
        color: #EAFFED;
        white-space: nowrap}
    #jsddm li a:hover
    {    background: #24313C}
        
        #jsddm li ul
        {    margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-top: 1px solid white}
        
            #jsddm li ul li
            {    float: none;
                display: inline}
            
            #jsddm li ul li a
            {    width: auto;
                background: #A9C251;
                color: #24313C}
            
            #jsddm li ul li a:hover
            {    background: #8EA344} 

 

Additional Information

COP 4813 Lectures