Magic Line Menu sub Menu

williamrouse · 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();
   });
});

virtual · 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.com/examples/MagicLine/

Edited March 1, 2011 by virtual

williamrouse · 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

williamrouse · 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.

tinard27 · 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

williamrouse · 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

williamrouse · April 12, 2011

Here is a link to where I left off.

www.rouse.ws/jQueryMagicLineMultiLevelWork

WBR

tinard27 · 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

Sign In

Magic Line Menu sub Menu

Recommended Posts

williamrouse

virtual

williamrouse

williamrouse

tinard27

williamrouse

williamrouse

tinard27

Join the conversation

Browse

Activity

Store

Support