www.webdeveloper.com
Results 1 to 2 of 2

Thread: Share a simple drop down menu with jquery

  1. #1
    Join Date
    May 2014
    Location
    Los angeles, USA
    Posts
    1

    Cool Share a simple drop down menu with jquery

    <h2>[Coding] drop down menu with jquery part 1</h2>
    I wrote a simple script for a drop down menu with jquery since a website I was working has an issue to maintain original drop down menu. This is my first time to write a drop down script. Please let me know if any trouble.

    Here is my simple script:
    <a href="http://tewenchiu.net/home/myref/drop-down/drop-down.html" target="_blank">demo</a>

    Html:

    <div id="menu-language">
    <ul id="parent">
    <li>Country <div class="arrow-down"></div></li>
    <ul id='child'>
    <a href="#"><li> Japan</li></a>
    <a href="#"><li> USA</li></a>
    </ul>
    </ul>
    </div>

    CSS: (*If you don't have background image or arrow image to use, you can just use the plain color.)

    #menu { margin: 0; padding: 0px; width:137px;background: url(pulldown_language_menu_mid.png);}/*control dropdown menu width*/
    #menu a {text-decoration: none;}
    #menu ul {list-style: none; margin: 0;padding: 0px; }
    #menu li { color: #fff; font-size:13px;} /*control all li item*/
    #menu li:hover{ color: #f00; background: url(pulldown_language_menu_mid.png);}

    #parent {margin: 0 ; padding: 0; }
    #parent li {padding:5px;}
    #parent li div.arrow-down {float: right; position: relative; top:5px; width:10px; height: 10px; background: url(arrows-ffffff.png) left bottom;}
    #parent li div.arrow-down-active {float: right; position: relative; top:5px; width:10px; height: 10px; background: url(arrows-ffffff.png) right bottom;}
    #parent li div.arrow-right {float: right; position: relative; top:5px; width:10px; height: 10px; background: url(arrows-ffffff.png) left top;}
    #parent li div.arrow-right-active {float: right; position: relative; top:5px; width:10px; height: 10px; background: url(arrows-ffffff.png) right top;}

    #child {display: none; }
    #child li { padding:5px; }

    Jquery:
    $(document).ready(function() {
    $('#menu').mouseenter(function(){
    $('#child',this).stop(true, false).slideToggle('slow');
    $( "#parent li div.arrow-down",this ).addClass( "arrow-down-active" ); //hightlight the arrow down
    });
    $('#menu').mouseleave(function(){
    $('#child',this).stop(true, false).slideToggle('slow');
    $( "#parent li div.arrow-down",this ).removeClass( "arrow-down-active");
    });
    });

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,379
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles