当前位置：首页 > 网页特效 > 导航菜单 >

jquery横向导航菜单蓝色圆角代码

时间：2013-08-27 09:28 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery蓝色圆角横向导航菜单代码</title>
<style>
body{margin:0;color:#333;font-family:\5B8B\4F53,Arial Narrow,arial,serif;background:#f7f7f0;min-width:1001px;font-size:12px;}
img{border-style:none;}
a{text-decoration:none;color:#1a7ec2;}
a:hover{text-decoration:underline;color:#ee7d36;}
ul,li{padding:0;margin:0;}
#wrapper{width:999px;margin:0 auto 1px;background:#fff;border:1px solid #dbdbdb;}
#header{color: #039;background:url('http://www.codefans.net/jscss/demoimg/201308/header-sprite.png') repeat-x 0 2px;}
.header-holder{overflow:hidden;height:1%;padding: 11px 5px 5px;}
#header .panel{ overflow:hidden;height:1%;padding: 0 3px 0 75px; font-weight:bold;margin-bottom:-1px;position:relative;}
.tabset{margin: 0 10px 0 0; padding:0;list-style:none;float:left;position:relative;z-index: 3;}
.tabset li{float:left;margin-right:3px;}
#header .tabset a{ float: left;padding: 9px 23px 7px;color:#fff;line-height:12px;cursor:pointer;background: url('http://www.codefans.net/jscss/demoimg/201308/header-sprite.png') no-repeat -13px -163px;width: 85px;font-weight: bold; text-align:center;}
#header .tabset a:hover{text-decoration:none;}
#header .tabset .active a{ background-position: -12px -200px;color: #1A7EC2;border-color:#fc0; padding-bottom: 10px;}
/* 右侧菜单 */
.sub-nav{float:left;margin:6px 0 0 0;padding:0;list-style:none; font-size:12px;line-height:22px;overflow:hidden;width:330px;height: 22px;}
.sub-nav li{float:left;padding:4px 2px 0 5px;margin:0 1px 0 -1px;display:inline;background: url('http://www.codefans.net/jscss/demoimg/201308/header-sprite.png') no-repeat -5px -240px;}
.sub-nav li.deal{width: 130px;}
.sub-nav li.registry{width: 109px;background-position:-145px -240px;}
.sub-nav li.deal, .sub-nav li.registry{padding-top: 3px;}
.sub-nav a {float:left;padding-left:30px;}
.sub-nav a, .sub-nav a:hover{color: #444; text-decoration:none;}
/* 子菜单 */
.sub-menu{height: 27px;background: url('http://www.codefans.net/jscss/demoimg/201308/header-sprite.png') repeat-x 0 -125px;border-top: 3px solid #197EC2;padding: 0 0 6px 0;margin-top: -3px;border-bottom: 1px #AAA solid;text-align: left;}
.sub-menu ul {list-style-type: none; padding-left: 0; margin-left: 0;margin-top:0; padding-top:7px;}
.sub-menu li { float: left;margin:0;padding: 0 20px 0 20px;color:#777;font-size:12px;line-height:22px;}
.sub-menu li.inline{float: left;background: url('http://www.codefans.net/jscss/demoimg/201308/line.png') no-repeat right;}
.sub-menu li.inline .clink{ color:#444;font-size: 12px;}
#tab-2,#tab-3 {display: none;}
.clear {clear:both;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.codefans.net/jscss/demoimg/201308/jquery.main.js"></script>
</head>
<body>
<div id="wrapper">
   
        <div id="header">
                <div class="header-holder"> </div>
                <div class="panel">
                        
                        <ul class="tabset" id="tab-list">
                                <li ><a href="#tab-1" class="tab" onClick="return false;">网站首页</a></li>
                                <li ><a href="#tab-2" class="tab" onClick="return false;">电子商务</a></li>
                                <li class=active><a href="#tab-3" class="tab" onClick="return false;">网络营销</a></li>
                                <li ><a href="/" class="tab">搜索引擎</a></li>
                        </ul>
                        <ul class="sub-nav">
                                <li class="deal"><a href="/">本站公告</a></li>
                                <li class="registry"><a href="/">会员注册</a></li>                               
                        </ul>
                </div>
                 
                <div class="sub-menu" id="tab-1" style=display:none>
                        <ul>
                            <li class="inline"><a href="#" class="clink">网络营销实务</a></li>
	<li class="inline"><a href="#" class="clink">电子商务教学</a></li>
	<li class="inline"><a href="#" class="clink">搜索引擎营销</a></li>
	<li class="inline"><a href="#" class="clink">网页导航条</a></li>
                        </ul>
                </div>
                <div class="sub-menu" id="tab-2" style=display:none>
                        <ul>
                            <li class="inline"><a href="#" class="clink">网页特效代码</a></li>
	<li class="inline"><a href="#" class="clink">网络营销实务</a></li>
	<li class="inline"><a href="#" class="clink">电子邮件营销</a></li>
	<li class="inline"><a href="#" class="clink">苏州网站建设</a></li>
	<li class="inline"><a href="#" class="clink">苏州网站推广</a></li>
                        </ul>
                </div>
                <div class="sub-menu" id="tab-3" style=display:block>
                        <ul>
	<li class="inline"><a href="#" class="clink">苏州网站推广</a></li>
	<li class="inline"><a href="#" class="clink">苏州网页制作</a></li>
	<li class="inline"><a href="#" class="clink">苏州网站建设</a></li>
                        </ul>
                </div>
        </div>   
  </div>
 </div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

jquery横向导航菜单蓝色圆角代码，引入了jQuery库，蓝色菜单适合很多类型的网站使用，比如企业站、新闻站等,另外还有一个实现菜单的封装库，菜单功能整体简洁，没有太多花俏的修饰，给人的感觉很大气，，从操作方式上来说，像是TAB选项卡菜单。由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-daohang/5489.html

网页特效

jquery横向导航菜单蓝色圆角代码

导航菜单下载排行

最新文章