这是昨天的导航菜单的继续,改了改样式表,HTML里的DIV布局没有动,只对导航文字有一点点的修改,就能竖排了:)
就只贴HTML吧,JS和原来一样,不贴了。
<html>
<head>
<title> 仿chinaz导航 </title>
<script type="text/javascript" src="myjs.js"></script>
<style type="text/css">
.global_nav{
margin:0;
border:1px solid #ccc;
width:750px;
height:240px;
/*overflow:hidden;*/
}
.nav_main{
float:left;
width:80px;
height:240px;
margin:0px;
/*overflow:hidden;*/
}
.nav_main ul{
margin:0px;
}
.nav_main li{
float:left;
text-align:center;
list-style:none;
}
.nav_current{
border-top:1px solid black;
border-left:1px solid black;
border-bottom:1px solid black;
display:block;
font-size:14px;
font-weight:bold;
color:green;
width:80px;
height:30px;
margin:0px 0px 0px 0px;
padding:7px 0px 0px 0px;
text-decoration:none;
background-color:#e6e6e6;
overflow:hidden;
}
.nav_link{
display:block; /*目前不能理解其内涵:(*/
border-right:1px solid black;
font-size:14px;
width:80px;
height:30px;
padding:7px 0px 0px 0px;
margin:0px 0px 0px 0px;
text-decoration:none;
}
.nav_sub{
float:left;
width:80px;
height:260px;
text-align:left;
font-size:12px;
}
.sub_box{
float:left;
width:80px;
height:240px;
margin:0px;
border-top:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
background-color:#E6E6E6;
}
.nav_sub li{
float:left;
height:20px;
width:74px;
margin:3px 0px 3px 0px;
padding:0px 5px 0px 5px;
text-align:center;
list-style:none;
}
.nav_sub ul{
margin:5px 0px 0px 0px;
}
.dis{
display:block;
}
.undis{
display:none;
}
.nav_current a:link,.nav_current a:visited{
color:green;
text-decoration:none;
}
.nav_current a:hover{
color:red;
text-decoration:none;
}
.nav_link a:link,.nav_link a:visited,.nav_link a:hover{
color:blue;
text-decoration:none;
}
.nav_sub li a:link,.nav_sub li a:visited,{
color:blue;
text-decoration:none;
}
.nav_sub li a:hover{
color:blue;
text-decoration:none;
/*background-color:red;*/
}
</style>
</head>
<body>
<a href="#">link</a>
<div class="global_nav">
<div class="nav_main">
<ul>
<li><span id="nav1" class="nav_current" onmouseover="doClick(this);"><a href="#">首 页</a></span></li>
<li><span id="nav2" class="nav_link" onmouseover="doClick(this);"><a href="#">站长在线</a></span></li>
<li><span id="nav3" class="nav_link" onmouseover="doClick(this);"><a href="#">网站运营</a></span></li>
<li><span id="nav4" class="nav_link" onmouseover="doClick(this);"><a href="#">联盟资讯</a></span></li>
<li><span id="nav5" class="nav_link" onmouseover="doClick(this);"><a href="#">新闻资讯</a></span></li>
<li><span id="nav6" class="nav_link" onmouseover="doClick(this);"><a href="#">设计在线</a></span></li>
<li><span id="nav7" class="nav_link" onmouseover="doClick(this);"><a href="#">网络编程</a></span></li>
<li><span id="nav8" class="nav_link" onmouseover="doClick(this);"><a href="#">服 务 器</a></span></li>
</ul>
</div>
<div class="nav_sub">
<div class="sub_box dis" id="sub1">
<ul>
<li><strong>热点通告</strong></li>
</ul>
</div>
<div class="sub_box undis" id="sub2">
<ul>
<li><a href="#">好站推荐</a></li>
<li><a href="#">站长聚会</a></li>
<li><a href="#">站长访谈</a></li>
<li><a href="#">站长茶馆</a></li>
<li><a href="#">网站排行</a></li>
</ul>
</div>
<div class="sub_box undis" id="sub3">
<ul>
<li><a href="#">建站经验</a></li>
<li><a href="#">策划盈利</a></li>
<li><a href="#">搜索优化</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">免费资源</a></li>
</ul>
</div>
<div class="sub_box undis" id="sub4">
<ul>
<li><a href="#">联盟新闻</a></li>
<li><a href="#">联盟介绍</a></li>
<li><a href="#">联盟点评</a></li>
<li><a href="#">网赚技巧</a></li>
</ul>
</div>
<div class="sub_box undis" id="sub5">
<ul>
<li><a href="#">业界动态</a></li>
<li><a href="#">收购融资</a></li>
<li><a href="#">门户动态</a></li>
<li><a href="#">搜索引擎</a></li>
<li><a href="#">网络游戏</a></li>
<li><a href="#">电子商务</a></li>
<li><a href="#">广告传媒</a></li>
<li><a href="#">厂商开发</a> </li>
</ul>
</div>
<div class="sub_box undis" id="sub6">
<ul>
<li><a href="#">酷站推荐</a> </li>
<li><a href="#">网页设计</a></li>
<li><a href="#">WEB标准</a></li>
<li><a href="#">视频处理</a></li>
<li><a href="#">设计活动</a></li>
</ul>
</div>
<div class="sub_box undis" id="sub7">
<ul>
<li><a href="#">Asp编程</a></li>
<li><a href="#">Php编程</a></li>
<li><a href="#">.Net编程</a></li>
<li><a href="#">Xml编程</a></li>
<li><a href="#">Access</a></li>
<li><a href="#">Mssql</a></li>
<li><a href="#">Mysql</a></li>
</ul>
</div>
<div class="sub_box undis" id="sub8">
<ul>
<li><a href="#">Web服务器</a></li>
<li><a href="#">Ftp服务器</a></li>
<li><a href="#">Mail服务器</a></li>
<li><a href="#">Dns服务器</a></li>
<li><a href="#">Win服务器</a></li>
<li><a href="#">Linux服务器</a></li>
<li><a href="#">安全防护</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
分享到:
相关推荐
竖排着的导航菜单,向古书写在竹子上的一样,菜单多的时候可以向一边卷。
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
树形导航菜单插件制作一个类似树形展示的slider滑动多级二级下拉菜单目录,支持无限嵌套。
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
HTML5实现图标会旋转的竖向导航菜单,竖直排列的网站导航,当鼠标悬停于图标时,图标会旋转,称之为旋转菜单也不为过。
多款不同风格的二级下拉
一个美观实用的jquery弹性竖向导航菜单特效插件
用CSS+DIV实现的模排以及竖排菜单,包括源代码,可以参照,与成自己想要的!
代码演示了Bootstrap基本导航栏及更加美观导航栏的实现方法,为导航栏增加字体图标,并用yamm实现大型导航菜单。效果图如下:
本文实例讲述了jquery实现红色竖向多级向右展开的导航菜单效果。分享给大家供大家参考。具体如下: 这里介绍的是一款红色竖向多级向右展开的导航菜单,多用于博客网站的导航菜单,红色风格,非常漂亮,向右伸展的...
Jquery,横排下拉菜单,竖排下拉菜单,可直接套用.
Jquery,横排下拉菜单,竖排下拉菜单,可直接套用.
Jquery,横排下拉菜单,竖排下拉菜单,可直接套用.
这是一款JS+CSS实现的Flash效果的导航菜单,竖向排列,兼容性好,由JavaScript妙味课堂的朋友编写,欢迎测试. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-flash-style-v-nav-codes/ 具体...
Jquery1.6.3,横排下拉菜单,竖排下拉菜单,可直接套用.
js竖向下拉菜单,效果不错,可用作导航登录登录!