使用jQuery写了个简易的导航菜单


今天闲来无事，用所学的知识、使用jQuery写了个简易的导航条，可用于你的网站做菜单用，在菜单的下侧，带有一个指示性质的小条，如果你的鼠标移到不同菜单上的话，这个小条就会出现，以向用户表明菜单所处的当前位置。

答案：<!DOCTYPE html>
<html>
<head>
    <title>使用jQuery写了个简易的导航菜单</title>
    <style type="text/css">
        .navWrapper {
            border-bottom:1px solid #36A3EA;
            border-top:1px solid #36A3EA;
        }
        
        .nav {
            width:980px;
            margin:0 auto;
            padding-top:20px;
            text-align:center;
        }
        
        .nav a.selected {
            border-bottom:4px solid #36A3EA;
            text-decoration:none;
            color:#36a3ea;
            
        }
        
        .nav a {
            //font-size:14px;
            display:inline-block;
            height:34px;
            padding:0 10px;
            margin:0 10px;
        }
        
        .nav a:hover {
            color:#36a3ea;
            border-bottom:4px solid #36A3EA;
        }
        a:link, a:visited {
            color: #7F7F7F;
            text-decoration: none;
        }
    
    </style>
</head>
<body>
 <div class="navWrapper">
    <div class="nav">
        <a href="#" class="selected">站长资源库</a>
        <a href="#">网站介绍</a>
        <a href="#">大赛说明</a>
        <a href="#">代码纠错</a>
        <a href="#">上传作品</a>
        <a href="#">全部作品</a>
        <a href="#">意见建议</a>
    </div>
 </div>
</body>
</html>

上一个：每个TAB颜色不同的网页TAB代码
下一个：网页上的合拢、伸展面板代码，使用了jQuery

更多图片编程知识: