HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果。分享给大家供大家参考。具体如下:
这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
蓝色水平二级导航菜单
*{
font-size:12px; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
body{
margin:0; padding:0; background:white;
}
img{
border:0;
}
a:link,a:visited,a:active{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
/********** header **********/
.header{
width:100%; background:url(images/header_bg.gif) #ffffff repeat-x 0 0; text-align:center;
}
.header .padder{
width:910px; margin:0 auto; background:url(images/header_bg.gif) #ffffff repeat-x 0 0; padding-bottom:4px; text-align:left;
}
.header .padder .nav{
background:url(images/vertical.gif) repeat-x 0 -36px; height:36px;
}
.header .padder .navLeftBg{
background:urlvertical.gif) no-repeat 0 0; height:36px;
}
.header .padder .navRightBg{
background:url(images/icons.gif) no-repeat right -146px; height:36px;
}
.header .padder .nav .mainNav{
padding-left:24px; position:absolute;
}
.header .padder .nav .mainNav a:link,.header .padder .nav .mainNav a:visited,.header .padder .nav .mainNav a:active{
width:90px; height:36px; display:inline-block; text-align:center; color:#ffffff; font-weight:bold; font-size:14px; line-height:36px; margin-left:11px;
}
.header .padder .nav .mainNav a:hover{
text-decoration:none;
}
.header .padder .nav .mainNav a.actived:link,.header .padder .nav .mainNav a.actived:visited,.header .padder .nav .mainNav a.actived:hover,.header .padder .nav .mainNav a.actived:active{
background:url(images/icons.gif) no-repeat 0 -27px; color:#000000;
}
.header .padder .secondNav{
line-height:21px; text-align:left;
}
.header .padder .secondNav a{
color:#266392; display:inline-block; padding:0 8px; margin-right:19px;
}
.header .padder .secondNav a.actived{
font-weight:bold;
}
.header .padder .secondNav .subNav1{
display:none;
}
.header .padder .secondNav .subNav2{
padding-left:150px;display:none;
}
.header .padder .secondNav .subNav3{
padding-left:250px;display:none;
}
.header .padder .secondNav .subNav4{
padding-left:350px;display:none;
}
.header .padder .secondNav .subNav5{
padding-left:450px;display:none;
}
.header .padder .secondNav .subNav6{
padding-left:550px;display:none;
}
.header .padder .secondNav .subNav7{
padding-left:650px;display:none;
}
$(document).ready(function(){
$(".mainNav a").mouseover(function(){
$(".mainNav a").attr("class","");
$("#"+this.id).attr("class","actived");
var currentMenuNo = parseInt(this.id.substring(1));
$(".secondNav div").each(function(){
$(this).hide();
$("#subNav"+currentMenuNo).show();
});
});
});
首页
ASP源码
PHP源码
.NET源码
HTML源码
工具软件
脚本源码
社区论坛
全站CMS
企业网站
社区论坛
全站CMS
企业网站
社区论坛
全站CMS
企业网站
社区论坛
全站CMS
企业网站
社区论坛
全站CMS
企业网站
社区论坛
全站CMS
企业网站
希望本文所述对大家的jquery程序设计有所帮助。
HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码相关推荐
- html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- bootstrap4 左侧导航栏 优秀 大气_制作动态效果的后台导航栏——左侧导航
怎么制作动态效果的后台导航栏呢,一起来文中看看~ 先上完成效果: 整体的制作过程 1. 制作菜单元件 分别制作导航菜单中的每个元件,制作好一个以后,就可以复用了,制作步骤如下: 使用矩形,制作单个导航 ...
- layui导航栏页面滚动固定_网站建设页面导航如何降低用户寻找的时间
做为正确引导客户体验网站的莱单导航栏,从检索视角上而言,也起着关键的功效,莱单导航栏不但联系网站的外界,也联系着网站主页面及其别的网页,是全部网站的"管理中心",因此网站建设中莱单 ...
- IOS 滑动tableview,导航栏渐渐显示,搜索框显示在导航栏上
先看下效果图 这样的效果图我们在很多app上也看到过,正好我们的项目中有需要,就来实现下. 该效果有两种解决方案: 一.自定义导航栏,在scrollViewDidScroll方法中,改变导航栏的颜色和 ...
- 阴阳师官网导航栏 html+css
阴阳师官网导航栏 通过css html实现阴阳师官网的顶部导航栏 具体样式 下拉列表 下拉列表的实现 下面一起看看代码 <div class="header">< ...
- uniapp导航栏自定义图标按钮/搜索|uni-app自定导航条
uni-app自定义导航栏|仿微信顶部导航uni_headerBar,支持标题居左.居中.搜索条,按钮可传入文字/字体图标/图片 uniApp原生导航栏 uni-app原生导航栏也能实现一些顶部自定义 ...
- html二级页面内容滑动,jQuery+CSS实现的网页二级下滑菜单效果
本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果 ...
- android 苹果电脑底部图标滚动效果,JS实现仿苹果底部任务栏菜单效果代码
本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码.分享给大家供大家参考.具体如下: 这款仿苹果电脑的底部任务栏菜单,是纯JavaScript实现的菜单特效,鼠标放上有响应效果,菜单图标会变大,而且动 ...
最新文章
- 使用mybatis一次性添加多条数据 在oracle 数据库上
- 18岁智商低的表现_吃手是宝宝聪明的信号?婴儿智商高的5个讯号,吃手只是其中一个...
- React之渲染元素
- git或者ssh出错 fatal:open /dev/null or dup failed: No such file or directory、弹出mitty.dump文件
- Android开发--传感器介绍
- 什么是python-马哥教育官网-专业Linux培训班,Python培训机构
- 计算机与计算科学是属什么专业,被录取到信息与计算科学专业,这个专业什么性质,发展前景如何?...
- Flink keyby 数据倾斜问题处理
- mybatis对java自定义注解的使用——入门篇
- 【Python爬虫】Request库入门
- 阿里云成国内云业务业内资质最全厂商
- transform 动画效果
- vue启动项目报错 Couldn‘t find preset “es2015“ relative to directory
- 一文读懂全球CTRM市场的前世今生
- 【图像边缘检测】基于matlab GUI Sobel+Prewitt+Robert算子图像边缘检测【含Matlab源码 203期】
- c语言冒险游戏代码大全,C语言简易文字冒险游戏源代码.doc
- GeoServer发布Shapefile矢量数据
- 12个你值得拥有的虚拟科学实验APP、工具和资源
- 信息收集-CDN绕过
- 【附源码】计算机毕业设计java在线教学系统设计与实现
热门文章
- 阿里OSS 渗透案例
- 港人首次置业项目逾80%申请者属“80后、90后”
- 用 Pyinstaller 模块将 Python 程序打包成 exe 文件(全网最全面最详细)
- qmenu基本用法_剖析QMenu Qt完全定制化菜单
- Day21||● 77. 组合
- 0.0.0_ESP8266-12F 拓展板背面的降压稳压模块
- RGB 转换为 XYZ 和 LAB空间:convert between sRGB and CIEXYZ, 色域色彩相关
- 云服务器(一):anaconda安装记录以及R、Rstudio安装
- 学习成长之路(3)面向对象(一)
- 初级人工智能训练师题库