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 off.
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
*{
margin: 0;
padding: 0;
}
body{
background: #2F2626;
font: 14px Georgia, serif;
}
.nav-wrap{
background-color: rgba(0,0,0,0.6);
/*
border-bottom: 2px solid white;
border-top: 2px solid white;
*/
margin: 50px auto;
}
.group:after{
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.group ul li ul li{
display: none;
}
#example-one{
list-style: none;
margin: 0 auto;
position: relative;
width: 960px;
}
#example-one li{
display: inline;
}
#example-one li a{
color: #bbb;
display: block;
float: left;
font-size: 14px;
padding: 6px 10px 4px 10px;
text-decoration: none;
text-transform: uppercase;
}
#example-one li a:hover{
color: white;
}
ul.subnav {
list-style: none;
position: relative;
top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid red;
z-index: 900;
}
ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
z-index: 900;
}
ul.subnav li a {
float: left;
width: 145px;
padding-left: 20px;
z-index: 900;
}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();
});
});