来自 系统操作 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

CSS完毕的水准布局多级网页菜单成效,jQuery达成

正文实例汇报了jquery+CSS达成的水准布局多级网页菜单作用。分享给我们供大家参谋。具体如下:

本文实例陈说了jQuery完结的网页竖向菜单功用代码。分享给大家供大家参谋。具体如下:

此间演示的Jquery和CSS共同完结的网页常见的领航菜单,援救两级方式,浅豆沙色风格,最多帮忙二级,三级只怕要对代码实行改建了。本菜单属于中规中矩型,实用性相比较强,适合的网址连串也是过多的,希望大家会喜欢。

那是一款基于jQuery达成竖向的网页菜单代码,可折叠张开的二级网页菜单,修改一下可用在后台管理中,展现在左边手的那种管理菜单。jquery参加后便于完结了菜单实行和合併的功能,还进入了少于卡通效果,包容性好。

运行作效果果截图如下:

运维效果截图如下:

图片 1

图片 2

在线演示地址如下:

在线演示地址如下:

实际代码如下:

切实代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>蓝色带阴影超酷的css+js导航菜单代码</title>
<style>
body {margin:0px;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
#nav_wrap {width:960px;}
#nav{background:url(images/nav_bg1.gif) repeat-x bottom; height:49px; position:relative; width:950px; margin:20px auto;}
#nav .l{background:url(images/nav_l1.gif) no-repeat bottom; height:49px; width:28px; float:left}
#nav li {float:left; list-style:none;text-align:center;font-size:14px; }
#nav li .v a{width:108px;height:49px; line-height:49px; display:block; color:#FFF;float:left; font-family:Arial,Verdana,Tahoma,"宋体"; }
#nav li .v a:hover,#nav li .v .sele{background:url(images/nav_hover1.gif) no-repeat bottom;color:#fff;height:49px;line-height:49px; font-size:14px;}
#nav .kind_menu {height:30px;*height:29px;line-height:30px;vertical-align:middle; position:absolute;top:46px;*top:48px;left:70px;width:880px; text-align:left; display:none;color:#000;font-size:12px;}
#nav .kind_menu a {color:#000; float:left; text-align:center; width:90px; font-family:Arial,Verdana,Tahoma,"宋体";font-size:12px;}
#nav .kind_menu a:hover {color:#000;border-bottom:2px #222b8e solid;}
#nav .kind_menu span {font-size:10px; color:#000; line-height:30px; *line-height:26px; float:left }
</style>
<SCRIPT src="jquery-1.6.2.min.js" type=text/javascript></SCRIPT>
</head>
<body style="text-align:center">
<DIV id=nav_wrap>
<DIV id=nav>
<DIV class=l></DIV>
<UL class=c>
 <LI><SPAN class=v><A href="#" target="_blank">首页</A></SPAN>
 <DIV class=kind_menu style="LEFT:50px">欢迎您访问脚本之家,我们为您提供最优质的网络营销服务! </DIV></LI>
 <LI><SPAN class=v><A href="#">特惠套餐</A></SPAN>
 <DIV class=kind_menu style="LEFT: 40px">
 <A href="#">电信特惠套餐</A> <SPAN>|</SPAN>
 <A href="#">智能双线套餐</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">域名频道</A></SPAN>
 <DIV class=kind_menu>
 <A href="#">英文域名</A><SPAN>|</SPAN>
 <A href="#">中文域名</A><SPAN>|</SPAN>
 <A href="#">通用网址</A><SPAN>|</SPAN>
 <A href="#">域名交易</A><SPAN>|</SPAN>
 <A href="#">域名帮助</A><SPAN>|</SPAN>
 <A href="#">智能加速</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">脚本下载</A></SPAN>
 <DIV class=kind_menu style="LEFT: 40px">
 <A href="#">网络营销外包</A> <SPAN>|</SPAN>
 <A href="#">网页特效代码</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">网页特效</A></SPAN>
 <DIV class=kind_menu style="LEFT: 40px">
 <A href="#">网络外包</A> <SPAN>|</SPAN>
 <A href="#">网络营销</A> <SPAN>|</SPAN>
 <A href="#">特效代码</A> </DIV></LI>
 <LI><SPAN class=v><A href="http://www.baidu.com">百度一下</A></SPAN>
 <DIV class=kind_menu style="LEFT: 40px">
 <A href="#">网络外包</A> <SPAN>|</SPAN>
 <A href="#">营销外包</A> <SPAN>|</SPAN>
 <A href="#">网页特效</A> </DIV></LI>
 </UL>
</DIV><!--nav-->
</DIV><!--nav_wrap-->
<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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 function initMenu() {
 $('#menu ul').hide();
 $('#menu ul:first').show();
 $('#menu li a').click(
 function() {
 var checkElement = $(this).next();
 if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
 return false;
 }
 if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
 $('#menu ul:visible').slideUp('normal');
 checkElement.slideDown('normal');
 return false;
 }
 }
 );
 }
$(document).ready(function() {initMenu();});
</script>
<style>
body{font-family: Helvetica, Arial, sans-serif; font-size: 0.9em;}
p{line-height: 1.5em;}
ul#menu, ul#menu ul{list-style-type:none; margin: 0; padding: 0; width: 15em;}
ul#menu a{display: block; text-decoration: none;}
ul#menu li{margin-top: 1px;}
ul#menu li a{background: #333; color: #fff; padding: 0.5em;}
ul#menu li a:hover{background: #000;}
ul#menu li ul li a{background: #ccc; color: #000; padding-left: 20px;}
ul#menu li ul li a:hover{background: #aaa; border-left: 5px #000 solid; padding-left: 15px;}
.code{border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0;}
.code code{display: block; padding: 3px; margin-bottom: 0;}
.code li{background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em;}
.indent1{padding-left: 1em;}
.indent2{padding-left: 2em;}
</style>
<title>网页竖排菜单jQuery版</title>
<!--[if lt IE 8]>
 <style type="text/css">
 li a {display:inline-block;}
 li a {display:block;}
 </style>
 <![endif]-->
</head>
<body>
<ul id="menu">
<li>
   <a href="#">Weblog工具</a>
   <ul>
    <li><a href="#">PivotX</a></li>
    <li><a href="#">WordPress</a></li>
   </ul>
  </li>
  <li>
   <a href="#">程序语言</a>
   <ul>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Ruby</a></li>
    <li><a href="#">Python</a></li>
    <li><a href="#">PERL</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">C#</a></li>
   </ul>
  </li>
  <li>
   <a href="#">Cool Stuff</a>
   <ul>
    <li><a href="#">Apple</a></li>
    <li><a href="#">Maitianquan</a></li>
    <li><a href="#">XBOX360</a></li>
    <li><a href="#">Nifengla</a></li>
    <li><a href="#">Nintendo</a></li>
   </ul>
  </li>
 </ul>
</body>
</html>

可望本文所述对大家的jquery程序设计有着支持。

企望本文所述对我们的jquery程序设计有着扶助。

您只怕感兴趣的稿子:

  • jQuery完成的网页竖向菜单作用代码
  • jquery实现在网页钦定区域显示自定义右键菜单功用
  • jQuery+CSS完成的网页二级下滑菜单成效
  • jquery完毕很酷的网页最上端Logo下拉菜单效果
  • jQuery达成网页抖动的菜单抖动效果
  • 长远切磋JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选取复制
  • jquery完成净化实用的网页菜单功效

您可能感兴趣的稿子:

  • jquery达成在网页钦赐区域展现自定义右键菜单成效
  • jQuery+CSS实现的网页二级下滑菜单作用
  • jquery+CSS落成的品位布局多级网页菜单功效
  • jquery完结很酷的网页最上端图标下拉菜单效果
  • jQuery达成网页抖动的菜系抖动作效果果
  • 深刻钻探JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选用复制
  • jquery达成净化实用的网页菜单功效

本文由六合联盟网发布于系统操作,转载请注明出处:CSS完毕的水准布局多级网页菜单成效,jQuery达成

关键词: