来自 计算机网络 2019-09-04 19:46 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

jQuery达成的网页竖向菜单成效代码,CSS达成的网

本文实例呈报了jQuery+CSS达成的网页二级下滑菜单效用。分享给大家供我们仿效。具体如下:

正文实例陈说了jQuery实现的网页竖向菜单成效代码。共享给大家供我们参谋。具体如下:

那是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有亟待的友善拿去美化吧,基本的动画片效果和菜单下滑效果和潜濡默化效果已经做出来了,在IE下显现不错,在火狐下发掘菜单有闪光现象,有空会继续更正,谢谢我们捧场哦。

这是一款基于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>
<title>CSS jQuery HTML二级下滑菜单</title>
<style type="text/css">
body,ul,li,a{margin: 0;padding: 0;font:16px "微软雅黑";}
ul,li{list-style-type: none}
.menu{width: 270px;height: 30px;line-height: 30px;background: #0f67a1}
.menu li{width: 120px;float: left;display: inline;position: relative;z-index: 10;text-align: center;}
.menu li: hover{background: #426d9c;}
.menu .menuUl{width: 120px;height: auto;display: none;background: #426d9c;position: absolute;z-index: 20;left: 25px;top: 30px;padding:3px;}
.menuUl li{width: 100%;float: left;text-align: left;}
a{color: #eee;text-decoration: none}
a: hover{color: #000;text-decoration: none}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">  
$(document).ready(function() {
 $(".menu li").hover(function() {
 $(this).find(".menuUl").show('50');
 },
 function() {
 $(this).find(".menuUl").hide('50');
 });
})   
</script>
</head>
<body>
<ul class="menu">
<li><a href="">源码类</a>
 <ul class="menuUl">
  <li><a href="#" >论坛源码</a></li>
  <li><a href="#" >博客源码</a></li>
  <li><a href="#" >Ajax源码</a></li>
 </ul>
</li>
<li><a href="">特效类</a>
 <ul class="menuUl">
  <li><a href="#" >导航菜单</a></li>
  <li><a href="#" >表单效果</a></li>
  <li><a href="#" >HTML5特效</a></li>
  <li><a href="#" >jQuery特效</a></li>
 </ul>
</li>
</ul>
</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实现很酷的网页顶端图标下拉菜单效果
  • jQuery达成网页抖动的美食做法抖动作效果果
  • 深入探究JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选用复制
  • jquery完结卫生实用的网页菜单功用

您或许感兴趣的篇章:

  • jquery达成在网页内定区域展现自定义右键菜单成效
  • jQuery+CSS完结的网页二级下滑菜单功用
  • jquery+CSS完结的水准布局多级网页菜单成效
  • jquery落成很酷的网页顶端Logo下拉菜单效果
  • jQuery完成网页抖动的菜单抖动作效果果
  • 深刻商讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选拔复制
  • jquery完成卫生实用的网页菜单功用

本文由六合联盟网发布于计算机网络,转载请注明出处:jQuery达成的网页竖向菜单成效代码,CSS达成的网

关键词: