Jump to content
Uncle Stef's Forums are now in the Clubs - July 2025.

Magic Line Menu sub Menu

williamrouse

By williamrouse
in Javascript

 Share

Recommended Posts

williamrouse Newbie

williamrouse

Posted
Posted

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

williamrouse Newbie

williamrouse

Posted
  • Author
Posted

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

  • 1 month later...
tinard27 Newbie

tinard27

Posted
Posted

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...