用jquery与CSS制作导航Menu

jquery-css-nav

jquery-css-nav

1、填写html代码

 

index.html

<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="templates/css/main.css" type="text/css" />

<div>

    <div id="menu">
        <ul>
            <li><a href="#url">Home</a></li>
            <li><a href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                    <li><a href="#url">Email</a></li>
                    <li><a href="#url">Telephone</a></li>
                    <li><a href="#url">Online Form</a></li>
                    <li><a href="#url">Snail Mail Address</a><b></b></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                    <li><a href="#url">Ski Hire Facilities</a></li>
                    <li><a href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#url">Beginners Slopes</a></li>
                            <li><a href="#url">Intermediate Slopes</a></li>
                            <li><a href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
                            <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#url">Local</a></li>

                                    <li><a href="#url">Nearby</a></li>
                                    <li><a href="#url">With instructor</a></li>
                                    <li><a href="#url">Snow boarding</a><b></b></li>
                                </ul>
                            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#url">Expert</a></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a href="#url">Night Life</a></li>
                    <li><a href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#url">Snow Hotel</a></li>

                            <li><a href="#url">The Snowman</a></li>
                            <li><a href="#url">Ice Cavern</a></li>
                            <li><a href="#url">Ski Inn</a><b></b></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#url">From Airport</a></li>
                            <li><a href="#url">In Resort</a></li>
                            <li><a href="#url">Multiple Resorts</a><b></b></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                    <li><a href="#url">Where to go</a></li>

                    <li><a href="#url">What to do</a></li>
                    <li><a href="#url">Places of interest</a></li>
                    <li><a href="#url">National parks & Museums</a><b></b></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                    <li><a href="#url">Money Exchange</a></li>
                    <li><a href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#url">Lift Passes</a></li>
                            <li><a href="#url">Insurance</a></li>
                            <li><a href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
                            <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#url">Boots</a></li>
                                    <li><a href="#url">Skis</a></li>
                                    <li><a href="#url">Ski Wear</a></li>
                                    <li><a href="#url">Goggles</a><b></b></li>
                                </ul>
                            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#url">Ski Schools</a></li>
                            <li><a href="#url">Snow Report</a></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#url">Austrian</a></li>
                            <li><a href="#url">German</a></li>
                            <li><a href="#url">French</a></li>
                            <li><a href="#url">English</a><b></b></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a href="#url">Short Breaks</a></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="#url">Privacy</a></li>
        </ul>
    </div>

    <div style="clear:both"></div>
</div>
2、写css代码
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.examples{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}

/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/iframe-shim.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#menu {width:750px; height:531px; background:url(../images/snowboard.jpg); text-align:center; margin:0 auto;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:#ccccd0; border:1px solid #333; border-color:#eee #555 #222 #fff;}
#menu ul {display:inline-block;} 

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul ul {position:absolute; left:-9999px;}

#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}

#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/

#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 20px;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}

#menu ul li:hover > ul {visibility:visible; left:0; top:21px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px; margin-left:-4px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px; margin-right:-4px;}

#menu a:hover ul {left:0; top:23px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}

#menu li.left ul a {text-align:right;}

#menu a:hover a:hover ul, 
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul, 
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}

#menu a:hover ul ul, 
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul, 
#menu li.left a:hover a:hover ul ul {left:-9999px;}

#menu li a.drop {background:transparent url(../images/white-down.gif) no-repeat right center;}
#menu li a.fly {background:transparent url(../images/white-right.gif) no-repeat right center;}
#menu li.left ul a.fly {background:transparent url(../images/white-left.gif) no-repeat left center;}

#menu li a:hover,
#menu li a.fly:hover {color:#c60; background-color:#c0c0c8;} 
#menu li:hover > a,
#menu ul li:hover > a.fly {color:#c60; background-color:#c0c0c8;}

#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-6px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-left:-4px;}

#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-right:-4px;}

3、写jquery的js代码

s/main.js

$(document).ready(function(){
    $('#menu li').hover(function(){
            $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(400); // effect 1
            // $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); // effect 2
        },function(){
            $(this).find('ul:first').css({visibility: "hidden"});
        });
});

最后

 » 本站地址:http://www.gomoth.com

标签: , ,