0

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();
    });
});
1
Contributor
1
Reply
6
Views
6 Years
Discussion Span
Last Post by rouse
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.