jquery+css实现的红色线条横向二级菜单效果


Posted in Javascript onAugust 22, 2015

本文实例讲述了jquery+css实现的红色线条横向二级菜单效果。分享给大家供大家参考。具体如下:

这是一款带导航的菜单,当前是哪一项菜单,会很个性的显示出来,鼠标放上后会显示菜单缺口,挺有意思的吧,希望大家喜欢。

运行效果截图如下:

jquery+css实现的红色线条横向二级菜单效果

在线演示地址如下:

具体代码如下:

<!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>
<title>css+js红色线条横向二级菜单</title>
<style>
body {font-family:\5B8B\4F53,Arial Narrow,arial,serif;background:#ffffff;font-size:12px;}
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,emBED{padding:0; margin:0;}
li{list-style-type:none;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:underline;}
#nav{ background:url('images/nav_li_bg.gif') repeat-x top; height:37px; position:relative;width:988px; margin:20px auto;}
#nav .l{ background:url('images/nav_li_left.gif') no-repeat top; height:37px;width:78px; float:left}
#nav .r{width:82px;background:url('images/nav_li_rights.gif') no-repeat right top;height:37px;float:left;}
#nav li { float:left;}
#nav li .v a{ width:138px;height:37px; line-height:32px; display:block; color:#FFF;float:left;font-weight:bold;text-decoration:none;text-align:center;}
#nav li .v a:hover,#nav li .v .sele{width:138px;background:url('images/nav_li_hover.gif') no-repeat top;color:#fff;height:37px;line-height:37px;color:#d11515;}
.kind_menu { height:30px;line-height:30px;vertical-align:middle; position:absolute;top:37px;left:0;text-align:left; display:none;color:#333;font-size:12px;}
.kind_menu a {color:#333; background:url('images/sub_dot.gif') no-repeat left 14px;float:left; text-align:center;padding:0 10px;font-size:12px;text-decoration:none;}
.kind_menu a:hover {color:#000;text-decoration:none;}
#Layer1{width:400px;left:60px;}
#Layer2{width:400px;left:200px;}
#Layer3{width:500px;left:300px;}
#Layer4{width:400px;left:400px;}
#Layer5{width:400px;left:auto;right:120px;}
#Layer6{width:560px;left:auto;right:60px;}
</style>
<SCRIPT src="jquery-1.6.2.min.js" type="text/javascript"></SCRIPT>
</head>
<body>
<DIV id=nav>
<DIV class=l></DIV>
<UL class=c>
 <LI><SPAN class=v><A href="#" target="_blank">网站首页</A></SPAN>
 <DIV class=kind_menu id="Layer1">欢迎访问,我们为您提供最优质的网络营销服务! </DIV></LI>
 <LI><SPAN class=v><A href="#">三水点靠木</A></SPAN>
 <DIV class=kind_menu id="Layer2">
 <A href="#">脚本下载</A>
 <A href="#">脚本教程</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">导航条</A></SPAN>
 <DIV class=kind_menu id="Layer3">
 <A href="#">英文域名</A>
 <A href="#">中文域名</A>
 <A href="#">通用网址</A>
 <A href="#">源码下载</A>
 <A href="#">域名交易</A>
 <A href="#">域名帮助</A>
 <A href="#">智能加速</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">电子商务</A></SPAN>
 <DIV class=kind_menu id="Layer4">
 <A href="#">网络营销</A>
 <A href="#">源码下载</A>
 <A href="#">网络营销</A>
 <A href="#">网页特效</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">网络营销</A></SPAN>
 <DIV class=kind_menu id="Layer5">
 <A href="#">网络营销</A>
 <A href="#">网络营销</A>
 <A href="#">网络营销</A>
 <A href="#">网页特效代码</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">关于我们</A></SPAN>
 <DIV class=kind_menu id="Layer6">
 <A href="#">网络营销</A>
 <A href="#">源码下载</A>
 <A href="#">网络营销</A>
 <A href="#">网页特效</A> </DIV></LI>
 </UL>
 <DIV class=r></DIV>
</DIV><!--nav-->
<SCRIPT type="text/javascript">
var site_url = window.location.href.toLowerCase();
switch (true) {
 default :
  $("#nav li").attr("class","");
  $("#nav li").eq(0).attr("class","nav_lishw");
  $(".nav_lishw .v a").attr("class","sele");
  $(".nav_lishw .kind_menu").show();
}
$("#nav li").hover(
function(){
  clearTimeout(setTimeout("0")-1);
  $("#nav .kind_menu").hide();
  $("#nav li .v .sele").attr("class","shutAhover");
  $(this).attr("id","nav_hover")
  $("#nav_hover .v a").attr("class","sele");
  $("#nav_hover .kind_menu").show();
 },
function(){
 if($(this).attr("class") != "nav_lishw"){
   $("#nav_hover .v .sele").attr("class","");
   $("#nav_hover .kind_menu").hide();
  }
  $(this).attr("id","")
  $("#nav li .v .shutAhover").attr("class","sele");
  setTimeout(function(){
   $(".nav_lishw .kind_menu").show();
   $(".nav_lishw .v a").attr("class","sele");
  },50);
 }
);
</SCRIPT>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
js实现的二级横向菜单条实例
Aug 22 #Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 #Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 #Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 #Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 #Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 #Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 #Javascript
You might like
PHP 编写的 25个游戏脚本
2009/05/11 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
asp批量修改记录的代码
2008/06/25 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
Node.js实现数据推送
2016/04/14 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
python实现的登录和操作开心网脚本分享
2014/07/09 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
商务日语专业的自荐信
2014/05/23 职场文书
高考升学宴答谢词
2015/01/20 职场文书
教师党员个人总结
2015/02/10 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python