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


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

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

运行效果截图如下:

在线演示地址如下:

http://demo.phpstudy.net/js/2015/jquery-css-red-color-2row-nav-style-codes/

具体代码如下:

<!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="#">phpstudy</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程序设计有所帮助。



相关阅读:
Fedora 9.0 Apache+PHP+MYSQL 环境安装
Mac OS上安装PostgreSQL的教程
JavaScript正则表达式的分组匹配详解
小议Java中final关键字使用时的注意点
点评js异步加载的4种方式
ubuntu系统怎么把网页版QQ添加到程序列表?
HTML5 File API改善网页上传功能
详解Sql基础语法
Android五子棋游戏程序完整实例分析
Linux 下 (RedHat 9.0) JDK,Tomcat,MySQL的安装
ASP.net WebAPI 上传图片实例
Java实现屏幕截图及剪裁
ASP.NET MVC3手把手教你构建Web
HTML多表头表格代码
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 生活便是美好 秋之田野作文300字 我的年度汉字作文 向雷锋叔叔学习作文600字 《特别的女生萨哈拉》读后感作文400字 关于做好学习实践科学发展观活动整改落实后续工作的报告 我爱过,所以我活过 夏日杂诗 经典感悟:人生应该懂得的五种心态 关于依法行政中存在的问题及对策 冬天唯美句子 2015小学英语骨干教师培训总结 小学四年级作文450字:爱,无处不在 金鱼和玫瑰读后感250字 纪念九一八升旗仪式主持词:铭记历史 开创未来 寻访余杭的前世今生 小学二年级作文600字:养狗 县烟草公司科技兴烟的实施意见 园林专业自荐信范文 处暑节气清热安神的食品 潇湘有情,风月无边 我是村庄永生的孩子 初中初一作文750字:美在坚强 拥一帘幽梦,安暖相伴 习总书记系列讲话精神学习重点 春夕寓兴 八年级地理上册复习提纲:中国的自然环境(人教版) 遇到是缘 那一次,我是好样的! 我当小干部400字 小学三年级作文300字:奇怪的“新鲜”猪肉 2014关于旅游的活动方案 花台山寺随想 盛秋,无人懂作文800字 卿落盛衣,我自相忆 梦幻之旅3(改进版)作文1000字 桂林山水读后感300字 校长资格班培训心得体会 青岛两怪 四年级建党节手抄报 顶岗实习报告自我鉴定 14年试用期转正总结 好姐妹(微散文) 我爱你整整一分钟 高中高二作文1000字:阳光灿烂的冬天 携手报读后感 赶时髦的奶奶 梦不停 2009年小学生中秋节作文 未来的汽车

Copyright © 2016 phpStudy |