Forums

magichew

Hello everyone

This is my first post, so far I've manage to get by through just reading what everyone else has to say but I'm afraid I need some specific help and hopefully I'll understand a little bit better.

I am creating a sidebar jQuery drop down navigation for a site. It's a simple drop down I'm after that when the user mouses over they will see more sub-links should there be any. Here's the XHTML I've written for it.

<div id=\"sidebar\">
            <img src=\"images/sidebar_top.png\" alt=\"\" />
                <div class=\"inside\">
                    <ul id=\"navigation\">
                        <li><a href=\"#\">Home</a></li>
                        <li><a href=\"#\">About Us</a></li>
                        <li><a href=\"#\">Our Projects</a>
                            <ul class=\"subnav\">
                                <li><a href=\"#\">Maths @ The RS</a></li>
                                <li><a href=\"#\">Read @ The RS</a></li>
                                <li><a href=\"#\">Write @ The RS</a></li>
                                <li><a href=\"#\">Playing for Success</a></li>
                            </ul>
                        </li>
                        <li><a href=\"#\">Contact Us</a></li>
                    </ul>
                </div>
            <img src=\"images/sidebar_bottom.png\" alt=\"\" />
        </div>

I need the list items underneath "Our Projects" to drop down when hovered over and disappear when the mouse moves away. The jQuery code I've come up with either hides everything or hides nothing when I mouse over.

All help will be gratefully received.

Regards

Adam

cybershot

you need to post your jquery code also.

magichew

I was hoping I wouldn't have to embarrass myself by doing that. I was hoping someone would just be able to look at the XHTML and give me the jQuery code. Better yet would be someone who could talk me through what each bit of the code was doing.

adhoc01

a quick google brings up http://ayozone.org/2008/02/06/drop-down-menu-with-jquery/.

Have a look what the code is doing and go from there -



<script type=\"text/javascript\" src=\"http://ayozone.org/wp-content/scripts/jquery-1.2.2.pack.js\"></script><br />
<script type=\"text/javascript\">
$(function() { 
$(\"a#menu-call\").mouseover( function() {
    $(\"ul#menu\").animate({height:\"show\",opacity:\"show\"},\"medium\"); return false;
  });
$(\"ul#menu\").hover( function() {},
  function() { $(\"ul#menu\").animate({opacity:1.0},1125).slideUp(268); return false; 
  });
$(\"a.mlnk\").hover( 
  function() { $(this).css({ backgroundColor:\"#ececec\", border:\"1px solid #1042de\"  }) },
  function() { $(this).css({ border:\"none\",backgroundColor:\"#ffffff\"  }) }
  );
})
</script><br />
<a href=\"#\" id=\"menu-call\" style=\"float:right;margin:0 72px 0 0; border: 1px solid #dfdfdf;padding: 0 2px 0 2px;\">Roll over this text to show the menu</a></p>
<div id=\"menu-container\" style=\"margin-top: 0;\">
<ul id=\"menu\" style=\"position:absolute;display:inline;z-index:99;width:164px;background:#fff;border:1px solid black;margin-left:364px;margin-top:8px;padding:3px;display:none;list-style-type:none;\">
<li style=\"background:none;padding:0 4px 0 0;margin:3px;\">
	<a href=\"#\" class=\"mlnk\" style=\"display:block;width:100%;text-decoration:none;\"><span style=\"padding-left:12px\">entry one</span></a></li>
<li style=\"background:none;padding:0 4px 0 0;margin:3px;\">
	<a href=\"#\" class=\"mlnk\" style=\"display:block;width:100%;text-decoration:none;\"><span style=\"padding-left:12px\">entry two</span></a></li>
<li style=\"background:none;padding:0 4px 0 0;margin:3px;\">
	<a href=\"#\" class=\"mlnk\" style=\"display:block;width:100%;text-decoration:none;\"><span style=\"padding-left:12px\">entry three</span></a></li>
<li style=\"background:none;padding:0 4px 0 0;margin:3px;\">
	<a href=\"#\" class=\"mlnk\" style=\"display:block;width:100%;text-decoration:none;\"><span style=\"padding-left:12px\">entry four</span></a></li>
<li style=\"background:none;padding:0 4px 0 0;margin:3px;\">
	<a href=\"#\" class=\"mlnk\" style=\"display:block;width:100%;text-decoration:none;\"><span style=\"padding-left:12px\">entry five</span></a></li>
<li style=\"background:none;padding:0 4px 0 0;margin:3px;\">
	<a href=\"#\" class=\"mlnk\" style=\"display:block;width:100%;text-decoration:none;\"><span style=\"padding-left:12px\">entry six</span></a></li>
</ul>
</div>

magichew

Thanks for your reply, I have Googled it already and looked at a similar effect to the one Jeffrey @ detatcheddesigns.com demonstrated in a jQuery tutorial on there but I couldn't get it to work.
I suppose I'll keep trying.

magichew

Alright, I've got it doing what I want it to do and it's okay for now.

XHTML

<div id=\"sidebar\">
            <img src=\"images/sidebar_top.png\" alt=\"\" />
                <div class=\"inside\">
                    <ul id=\"navigation\">
                        <li><a href=\"index.html\">Home</a></li>
                        <li><a href=\"about.html\">About Us</a></li>
                        <li class=\"topnav\"><a href=\"projects.html\">Our Projects</a>
                            <ul>
                                <li class=\"subnav\"><a href=\"maths.html\">Maths @ The RS</a></li>
                                <li class=\"subnav\"><a href=\"read.html\">Read @ The RS</a></li>
                                <li class=\"subnav\"><a href=\"write.html\">Write @ The RS</a></li>
                                <li class=\"subnav\"><a href=\"pfs\">Playing for Success</a></li>
                            </ul>
                        </li>
                        <li><a href=\"youtube.html\">YouTube</a></li>
                        <li><a href=\"contact.html\">Contact Us</a></li>
                    </ul>
                </div>
            <img src=\"images/sidebar_bottom.png\" alt=\"\" />
        </div>

jQuery

$(document).ready(function()

		{
			$(\"li.subnav\").hide();
				$(\"li.topnav\").hover(
					function()
					{
						$(\"li.subnav\").slideDown();
					},
					function()
					{
						$(\"li.subnav\").slideUp();
					});
		});

But I've tested this with more than one subnav and of course, when you mouse over one topnav list item it slides down all subnav list items, not just set you want when you hover over the topnav one that you want.

Any help will be gratefully received.

treehouse : what would you like to learn today?

Forums

jQuery DropDown Sidebar Navigation Help