Jump to content
Killersites Forums

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

Link to comment
Share on other sites
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

Link to comment
Share on other sites
  • 1 month later...
tinard27 Newbie

tinard27

Posted
Posted

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

Link to comment
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...
×
 Share
Go to topic listing
×
×
  • Create New...