jquery nav

by ashleycam3ron

HTML

<div class="menu">
    <ul>
        <li class="page_item page-item-16 current_page_item"><a href="http://74.220.207.200/~platteva/?page_id=16" title="Patient Information">Patient Information</a>
            <ul class='children'><li class="page_item page-item-18"><a href="http://74.220.207.200/~platteva/?page_id=18" title="Initial Consultation">Initial Consultation</a></li><li class="page_item page-item-20"><a href="http://74.220.207.200/~platteva/?page_id=20" title="Financial &amp; Insurance Info">Financial &#038; Insurance Info</a></li><li class="page_item page-item-22"><a href="http://74.220.207.200/~platteva/?page_id=22" title="Preliminary Paperwork">Preliminary Paperwork</a></li><li class="page_item page-item-24"><a href="http://74.220.207.200/~platteva/?page_id=24" title="Privacy Policy &amp; HIPPA">Privacy Policy &#038; HIPPA</a></li><li class="page_item page-item-26"><a href="http://74.220.207.200/~platteva/?page_id=26" title="Post-Treatment Care">Post-Treatment Care</a></li></ul></li><li class="page_item page-item-28"><a href="http://74.220.207.200/~platteva/?page_id=28" title="Procedures">Procedures</a><ul class='children'><li class="page_item page-item-30"><a href="http://74.220.207.200/~platteva/?page_id=30" title="Non-Surgical Root Canal Therapy">Non-Surgical Root Canal Therapy</a></li><li class="page_item page-item-32"><a href="http://74.220.207.200/~platteva/?page_id=32" title="Endodontic Retreatment &amp; Revisional Therapy">Endodontic Retreatment &#038; Revisional Therapy</a></li><li class="page_item page-item-34"><a href="http://74.220.207.200/~platteva/?page_id=34" title="Endodontic Surgery">Endodontic Surgery</a></li><li class="page_item page-item-36"><a href="http://74.220.207.200/~platteva/?page_id=36" title="Traumatic Injuries">Traumatic Injuries</a></li><li class="page_item page-item-38"><a href="http://74.220.207.200/~platteva/?page_id=38" title="Cracked Teeth">Cracked Teeth</a></li></ul></li><li class="page_item page-item-42"><a...

CSS

/* ----------------------------
NAVIGATION SPRITES 
---------------------------- */
html {background:black;}
.menu    {margin-top:160px; color:white;position:fixed; margin-left:275px; z-index:20;}
.menu ul {background:none;}
.menu ul li {list-style:none; text-transform:uppercase;padding-top:6px;}
.menu > ul > li    {height:25px;margin: 6px 5px 5px 0; color:white; text-align:center; line-height:22px;text-transform:uppercase; font-family:Arial, Helvetica, sans-serif;list-style-type:none;background: #F15A29 url(images/nav.png) top right no-repeat; width:auto; float:left; clear:left;width:7px; }
.menu ul li a {color:white; text-decoration:none;font-size: 15px;text-shadow:0px 0px 3px #000;padding-right:10px;font-family: 'HelveticaNeueLTStd67MediumCon';margin-right:10px;display: none; text-align:left;position:absolute;left:10px;width:170px;}
.menu ul li ul.children {display:none; width:150px;margin-left: -150px;margin-top:-27px;background:url(images/b40.png) repeat; line-height:12px; padding: 3px 0px 5px;
    -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; 
    -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; 
    border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.menu ul li ul li:hover {background:#F15A29;-moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; 
    -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; 
    border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.menu ul li ul li {}
.menu ul li ul li a{ position:relative;display:block;text-shadow:0px 0px 3px #000;font-size:12px; text-transform:capitalize; text-align:right;padding: 0px 0px 5px; margin-top:-12px; margin-left:-20px; margin-bottom:3px;width:150px;}

.menu ul li.page-item-16.current_page_item {display:block; width:170px;}
.menu ul li.page-item-16.current_page_item > a {display:block; margin-top:-22px;}

.menu ul li.page-item-28.current_page_item {display:block;...

JavaScript

$('.menu ul li.page-item-16').not('.menu ul li.current_page_item, .menu ul li.current_page_ancestor').hover(
        function() {
            $(this).children().fadeIn("slow").css({color: 'white',position: 'absolute'});
            $(this).dequeue().stop().animate({
                width: '170px'
            })
            $('.menu ul li.current_page_item ul, .menu ul li.current_page_ancestor ul').fadeTo('fast', 0.2);
        }, function() {
            $(this).children().fadeOut();
            $(this).dequeue().stop().animate({
                width: '7px'
            })
            $('.menu ul li.current_page_item ul, .menu ul li.current_page_ancestor ul').fadeTo('fast', 1);
        });
        $(".menu ul li.page-item-28").not('.menu ul li.current_page_item, .menu ul li.current_page_ancestor').hover(
        
        function() {
            $(this).dequeue().stop().animate({
                width: '108px'
            })
            $(this).children().fadeIn().css({color: 'white',position: 'absolute'})
            $('.menu ul li.current_page_item ul, .menu ul li.current_page_ancestor ul').fadeTo('fast', 0.2);
        }, function() {
            $(this).children().fadeOut();
            $(this).dequeue().stop().animate({
                width: '7px'
            })
            $('.menu ul li.current_page_item ul, .menu ul li.current_page_ancestor ul').fadeTo('fast', 1);
        });
        $(".menu ul li.page-item-42").not('.menu ul li.current_page_item, .menu ul li.current_page_ancestor').hover(
        
        function() {
            $(this).dequeue().stop().animate({
                width: '122px'
            })
            $(this).children().fadeIn().css({color: 'white',position: 'absolute'})
            $('.menu ul li.current_page_item ul, .menu ul li.current_page_ancestor ul').fadeTo('fast', 0.2);
        }, function() {
            $(this).children().fadeOut();
            $(this).dequeue().stop().animate({
                width: '7px'
            })
  ...