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 相关文章推荐
Javascript 刷新全集常用代码
Nov 22 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 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
PDO防注入原理分析以及注意事项
2015/02/25 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
python如何导入依赖包
2020/07/13 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
写给女生的道歉信
2014/01/08 职场文书
事业单位接收函
2014/01/10 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
售后服务承诺书模板
2014/05/21 职场文书
机械系毕业生求职信
2014/05/28 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
在redisCluster中模糊获取key方式
2021/07/09 Redis
世界十大狙击步枪排行榜
2022/03/20 杂记
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js