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 form textfield的隐藏方法
Dec 29 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
js数组常用最重要的方法
Feb 04 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
JavaScript如何操作css
Oct 24 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
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
JS的反射问题
2010/04/07 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Fabric 应用案例
2016/08/28 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python实现石头剪刀布程序
2021/01/20 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Python如何输出警告信息
2020/07/30 Python
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
二年级数学教学反思
2014/01/21 职场文书
幼儿园家长评语
2014/02/10 职场文书
经典英文广告词
2014/03/18 职场文书
星级党支部申报材料
2014/05/31 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis