www.webdeveloper.com
Results 1 to 2 of 2

Thread: Struggling with a drop down menu

Hybrid View

  1. #1
    Join Date
    Jul 2011
    Posts
    9

    Struggling with a drop down menu

    Hi developers!

    I have a laundry list of problems with my infantile drop down menu. This should probably be several posts. Any sort of help will be viewed as a wonderful gesture of human kindness. Let me know if there is anything I can do to repay you. I'm an English teacher by trade so I can edit and revise text very well. If you help me and need text professionally edited, let me know on this forum and I'll set up an email so you can send me your work for proofing.

    I'm very new at JS but spent the better part of a workday messing with this stuff.

    I'm using jQuery with Brian Cherne's HoverIntent plugin
    http://cherne.net/brian/resources/jq...verIntent.html

    Here are the issues I have. I have a lot

    • I can't make the navbar main items display inline and navbar subitems to display block.
    • I want the menu to drop down over the bottom <hr /> instead of moving the bottom <hr /> with the content.
    • I want to make the background on navbar main items turn into a black box with white text on user mouseover.
    • I want the background on navbar sub items (ul class="active") to be black with white text, then flip to white with black text when users mouse over them
    • I can't get the drop down menus to be smooth on mouseover and mouse out. They tend to stutter and it drives me crazy.


    Here is a demo of this abomination:

    http://harrisonownbey.com/lorem/demo.html


    Here is the HTML:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>Home</title>

    <link type="text/css" rel="stylesheet" href="style.css" media="screen" />

    <script type="text/javascript" src="jquery.js">
    </script>

    </head>
    <body>
    <div id="main">

    <ul id="navbar">
    <hr />
    <li>
    <a href="#">Home</a>
    </li>
    <li>
    <a href="#">navbar item 1</a>
    <ul class="active">
    <li><a href="#">navbar subitem 1.1</a></li>
    <li><a href="#">navbar subitem 1.2</a></li>
    <li><a href="#">navbar subitem 1.3</a></li>
    </ul>
    </li>
    <li>
    <a href="#">navbar item 2</a>
    <ul class="active">
    <li><a href="#">navbar subitem 2.1</a></li>
    <li><a href ="#">navbar subitem 2.2</a></li>
    <li><a href="#">navbar subitem 2.3</a></li>
    </ul>
    </li>
    <li>
    <a href="#">navbar item 3</a>
    </li>
    </ul>
    <script type="text/javascript" src="script.js">
    </script>
    <hr />
    </body>
    </html>

    Here is the JS:

    $('#navbar > li > ul')
    .hide()
    .click(function(e) {
    e.stopPropagation();
    });

    $('#navbar > li').toggle(function() {
    $(this).find('ul').slideDown();
    100}, function() {
    $(this).find('ul').slideUp();
    100});

    $('#navbar > li').hover(function() {
    $(this).addClass('waiting');
    setTimeout(function() {
    $('#navbar .waiting')
    .click()
    .removeClass('waiting');
    }, 600);
    }, function() {
    $('#navbar .waiting').removeClass('waiting');
    });

    $('#navbar li ul').css({
    display:"none",
    left:"auto"
    });
    $('#navbar li').hover(function() {
    $(this)
    .find('ul')
    .stop(true, true)
    .slideDown('fast');
    }, function() {
    $(this)
    .find('ul')
    .stop(true, true)
    .slideUp('fast');
    });


    And finally, here is the CSS:

    hr {
    width: 960px;
    height: 3px;
    background-color: black;
    }

    #main {
    width: 960px;
    margin: auto;
    }

    a:link {
    color: #000000;
    text-decoration: none;
    }

    a:link {
    color: #000000;
    text-decoration: none;
    }

    a:hover {
    color: #CC0000;
    text-decoration: underline;
    }

    a:active {
    color: #000000;
    }

    #navbar {
    font-size: large;
    font-family: helvetica, sans-serif;
    }

    #navbar, #navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }

    #navbar li {
    display: inline;
    list-style-type: none;
    cursor: pointer;
    background: #000000
    color: #FFFFFF
    border-bottom: 1px solid #FFFFFF;
    }

    #navbar li a {
    text-decoration: none;
    }

    #navbar > li > a {
    font-weight: bold;
    }

    #navbar li li {
    cursor: auto;
    border: 0;
    background-color: #FFFFFF
    }

    #navbar a {
    display: block;
    list-style-type:none;
    padding: 4px;
    width:10em;
    }

    #navbar li:hover ul, #navbar li ul:hover {
    left: auto;
    }

    Thanks again for all your help! This is an awesome forum.

  2. #2
    Join Date
    Jul 2011
    Posts
    9

    Nevermind

    Hey, it's all working. Thanks for your patience.

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