Geeks With Blogs
ken spencer

l will show you what I am doing lately with jquery. I started out using the suckerfish menu for a customer app. All went fine for awhile but suddenly the menu started acting weird with problems indenting and such.   I finally figured it must be interacting with other css stuff.  So, I thought how the heck do I fix this?  What if I could just use jquery and keep all of the action in  jquery and put the style in in the menu class and just spit it out. Most of the properties would get put into attributes on the menu lists and such so they would override any style. Good idea so far.

So, I started playing around with a test app. The final result looks like so with no menu showing:


The idea is to move the mouse over test link and then have the menu display like so:


And of course the menu must go away after you select an item or otherwise move off of the menu. The anchor tag contains what would be the top menu item and the UL below it is the drop down menu. you can ignore the textbox its just for testing the mouseenter event.

Note that the UL has  its Left property set to –999em to hide the menu.  Just search for the suckerfish menu if you want to see how this works.

And the <div tag after the UL is where the other content would go.

First, heres the HTML:

<a id="testlink">test link</a>
    <input id="resultsout" />
    <hr />
<ul id="menulist"
    style="left: -999em; position: absolute; width: 10em; background-color: #000000; color: #FFFFFF;">
    <li> one</li>
<hr />
<div  style="clear: left">
<p>test of menu</p>
<p>2nd line</p>
<p>last line</p>

Next,the jquery is really simple. the first bit of jqury defines the mouseenter event for the testlink anchor tag.  The first line in the function just puts text in our test input control. The next line actually moves the menu by setting its Left property to auto.  The mouseleave event follows and resets the Left property to way out left. Note that the mouseleave event is set on the menulist and not the anchor tag like the mouseenter event.


    $("#testlink").mouseenter(function () {
        $("#resultsout").val("Anchor enter");
    $("#menulist").mouseleave(function() {

The final result of this testing will roll into a custommenu class that I am using the allows you to populate it the menus from both the database and a controller to replace the current code.  And of course I have a bit of work to do on formatting and such but that will just come from the current css.

Posted on Sunday, July 31, 2011 6:39 PM | Back to top

Comments on this post: Jquery Menu: Starting out

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © xamlnotes | Powered by: