Jump to content
Stef's Coding Community
williamrouse

Magic Line Menu sub Menu

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...