williamrouse Posted February 28, 2011 Report Share Posted February 28, 2011 I am trying to add a secondary level to Chris Coyer Magic Line menu. I have made some progress but it is not complete. Right now I am stuck on 3 spots to make it complete. The placement of the secondary menu, the overlay of the secondary menu and the hover on and off of the submenu. Here is a link to what I have done so far: http://www.rouse.ws/...cLineSecondary/ The HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- http://css-tricks.com/jquery-magicline-navigation/ --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Magic Line Navigation</title> <link rel='stylesheet' type='text/css' href='css/style.css' /> <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.color-RGBa-patch.js'></script> <script type='text/javascript' src='js/menu_2.js'></script> </head> <body> <div class="nav-wrap"> <ul class="group" id="example-one"> <li class="current_page_item"><a href="#">Home</a></li> <li><a href="#">Buy Tickets</a></li> <li><a href="#">Group Sales</a></li> <li> <a href="#">Reviews</a> <ul class="subnav"> <li><a href="#">3 . One</a></li> <li><a href="#">3 . Two</a></li> <li><a href="#">3 . Three</a></li> </ul> </li> <li><a href="#">The Show</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Photos</a> <ul class="subnav"> <li><a href="#">6 . One</a></li> <li><a href="#">6 . Two</a></li> <li><a href="#">6 . Three</a></li> </ul> </li> <li><a href="#">Magic Shop</a></li> </ul> </div> <div class="nav-wrap"> <ul class="group" id="example-two"> <li class="current_page_item_two"><a rel="#fe4902" href="#">Home</a></li> <li><a rel="rgba(50,69,12,0.9)" href="#">Buy Tickets</a></li> <li><a rel="rgba(113,116,0,0.9)" href="#">Group Sales</a></li> <li><a rel="rgba(220,133,5,0.9)" href="#">Reviews</a></li> <li><a rel="rgba(236,85,25,0.9)" href="#">The Show</a></li> <li><a rel="rgba(190,40,5,0.9)" href="#">Videos</a></li> <li><a rel="rgba(123,91,230,0.9)" href="#">Photos</a></li> <li><a rel="rgba(255,255,255,0.4)" href="#">Magic Shop</a></li> </ul> </div> </body> </html> The CSS /* * http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html * place to look at to build code for css and js */ $(function() { var $el, leftPos, newWidth, $mainNav = $("#example-one"); $mainNav.append("<li id='magic-line'></li>"); var $magicLine = $("#magic-line"); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); var marker = ( $('a').index($el) ); console.log( "Found anchor number " + marker ); if ($( $el.next('.subnav').length != 0)){ var secondaryMenu = $($el.next('ul .subnav')); secondaryMenu.position.left = $el.position().left; console.log('SecondaryMenu = ' + secondaryMenu ); $(secondaryMenu).slideDown(1000).show(); $(secondaryMenu).each(function(idx, el) { console.log( 'Element ' + idx + ' has the following html: ' + $(el).html() ); }); } }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); var secondaryMenu = $($el.next('ul .subnav')); secondaryMenu.position.left = $el.position().left; $(secondaryMenu).slideUp('fast').hide(); }); }); The js $(function() { var $el, leftPos, newWidth, $mainNav = $("#example-one"); $mainNav.append("<li id='magic-line'></li>"); var $magicLine = $("#magic-line"); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); var marker = ( $('a').index($el) ); console.log( "Found anchor number " + marker ); if ($( $el.next('.subnav').length != 0)) { var secondaryMenu = $($el.next('ul .subnav')); secondaryMenu.position.left = $el.position().left; console.log('SecondaryMenu = ' + secondaryMenu ); $(secondaryMenu).slideDown(1000).show(); $(secondaryMenu).each(function(idx, el) { console.log( 'Element ' + idx + ' has the following html: ' + $(el).html() ); }); } }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); var secondaryMenu = $($el.next('ul .subnav')); secondaryMenu.position.left = $el.position().left; $(secondaryMenu).slideUp('fast').hide(); }); }); Quote Link to comment Share on other sites More sharing options...
virtual Posted March 1, 2011 Report Share Posted March 1, 2011 (edited) You are missing all the js to make <ul class="group" id="example-two"> work. Go to Chris's demo and download the complete files http://css-tricks.com/examples/MagicLine/ Edited March 1, 2011 by virtual Quote Link to comment Share on other sites More sharing options...
williamrouse Posted March 1, 2011 Author Report Share Posted March 1, 2011 You are missing all the js to make <ul class="group" id="example-two"> work. Go to Chris's demo and download the complete files http://css-tricks.co...ples/MagicLine/ My problem was more profound than that. I was able to work several more hours on this issue today and have a functional, but crude version working now. The aesthesis are poor at the moment. I appreciate you taking a look at my note.WBR Quote Link to comment Share on other sites More sharing options...
williamrouse Posted March 1, 2011 Author Report Share Posted March 1, 2011 This is what I have working as I shut down for the night: http://www.rouse.ws/jQueryMagicLineMultiLevelWork/ Works in Chrome, Firefox and Safari, but not IE yet. Quote Link to comment Share on other sites More sharing options...
tinard27 Posted April 11, 2011 Report Share Posted April 11, 2011 This is what I have working as I shut down for the night: http://www.rouse.ws/jQueryMagicLineMultiLevelWork/ Works in Chrome, Firefox and Safari, but not IE yet. Hey William, I am working with magic line and want to have a drop down menu as well. So far my magic line works just fine, but am having trouble adding a drop down feature. Would you be so kind to share your final Solution, thanks in advance Quote Link to comment Share on other sites More sharing options...
williamrouse Posted April 12, 2011 Author Report Share Posted April 12, 2011 I'll put up what I have on my website and show you what I have so far and the limitation. I'll past the link later tonight. WBR Quote Link to comment Share on other sites More sharing options...
williamrouse Posted April 12, 2011 Author Report Share Posted April 12, 2011 Here is a link to where I left off. www.rouse.ws/jQueryMagicLineMultiLevelWork WBR Quote Link to comment Share on other sites More sharing options...
tinard27 Posted April 12, 2011 Report Share Posted April 12, 2011 Here is a link to where I left off. www.rouse.ws/jQueryMagicLineMultiLevelWork WBR Thanks a lot William this should give me a head start. Will keep you posted on my progress Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.