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

jquery完毕向下滑出的二级导航下滑菜单功效,j

本文实例陈说了jquery实现向下滑出的二级导航下滑菜单作用。分享给大家供大家参照他事他说加以考察。具体如下:

正文实例汇报了jQuery达成减弱菜单导航成效代码。分享给我们供大家仿效。具体如下:

那是一款由jQuery协作JavaScript来共同促成的网页上的猛跌菜单特效,带颜色的是一流主菜单,点击后会议及展览开向上海滑稽剧团出二级的子菜单,再一次点击主菜单,会晤拢子菜单,就菜单所能展现的功用来讲,适用于公司网址产品分类、音信类作品栏目导航等,近期本款菜单帮衬两级,有野趣的可自身强大更加的多级的菜谱。

此地演示jquery向下滑的领航菜单代码,青白风格减弱菜单,可看做网址的基本航菜单,二级菜单向下滑出,包容性也是很不错的,本菜单来源自互连网,遗失最早的著笔者具名新闻,请最先的著作者看到后与大家联系具名。

运营作效果果截图如下:

运作效果截图如下:

图片 1

图片 2

在线演示地址如下:

在线演示地址如下:

具体代码如下:

实际代码如下:

<!DOCTYPE html>
<html>
<head>
<title>向下滑动展开的JS下滑菜单</title>
<style type="text/css">
ul#sidemenu, ul#sidemenu ul{list-style-type: none;margin: 0;padding: 0;width: 185px;}
ul#sidemenu a{display: block;text-decoration: none;}
ul#sidemenu li{margin: 5px auto;}
ul#sidemenu li a{background: #333;font-size: 12px;color: #fff;height: 28px;line-height: 28px;padding-left: 5px;}
ul#sidemenu li a: hover{background: #000;}
ul#sidemenu li ul li a{background: #ccc;color: #000;padding-left: 20px;}
ul#sidemenu li ul li a: hover{background: #aaa;border-left: 5px #000 solid;padding-left: 15px;}
</style>
</head>
<body>
<div class="leftbar">
 <ul id="sidemenu">
  <li><a href="#" >+ 网页菜单类素材一</a>       
   <ul>
     <li><a href="#">下滑菜单</a></li>
     <li><a href="#">折叠菜单</a></li>
     <li><a href="#">垂直菜单</a></li>
    </ul>
  </li>
  <li><a href="#" >+ 编程源码类资源</a>
   <ul>
    <li><a href="#">ASP源码</a></li>
    <li><a href="#">Delphi源码</a></li>
    <li><a href="#">vc++源码</a></li>
    <li><a href="#">VB源码</a></li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function initMenu() {
 $('#sidemenu ul').hide();
 $('#sidemenu ul:first').hide();
 $('#sidemenu li a').click(
 function() {
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
  return false;
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
  $('#sidemenu ul:visible').slideUp('normal');
  checkElement.slideDown('normal');
  return false;
  }
  }
 );
 }
$(document).ready(function() {initMenu();});
</script>
</body>
</html>
<!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" />
<style>
html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;}
body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;}
ul,li {list-style-type:none; text-transform:capitalize;}
.clear {clear:both; *display:inline;/*IE only*/}
#nav {margin:0 auto 60px; width:1080px; display:block;}
#nav .jquery_out {float:left;line-height:32px;display:block; border-right:1px solid #fff; text-align:center; color:#fff;font:18px/32px; background:#062723 url(images/slide-panel_03.png) 0 0 repeat-x;}
#nav .jquery_out .smile {padding-left:1em;}
#nav .jquery_inner {margin-left:16px;}
#nav .jquery {margin-right:1px;padding:0 2em;}
#nav .mainlevel {background:#ffe60c; float:left; border-right:1px solid #fff; width:140px;/*IE6 only*/}
#nav .mainlevel a {color:#000; text-decoration:none; line-height:32px; display:block; padding:0 20px; width:100px;}
#nav .mainlevel a:hover {color:#fff; text-decoration:none; background:#062723 url(images/slide-panel_03.png) 0 0 repeat-x;}
#nav .mainlevel ul {display:none; position:absolute;}
#nav .mainlevel li {border-top:1px solid #fff; background:#ffe60c; width:140px;/*IE6 only*/}
.log {text-align:center; color:skyblue; line-height:24px; text-transform:capitalize; margin:50px auto;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('li.mainlevel').mousemove(function(){
 $(this).find('ul').slideDown();//you can give it a speed
 });
 $('li.mainlevel').mouseleave(function(){
 $(this).find('ul').slideUp("fast");
 });
});
</script>
<title>jquery下拉竖导航菜单代码</title>
</head>
<body>
<br /><br /><br /><br /><br /><br />
<div id="menu">
<ul id="nav">
  <li class="jquery_out">
  <div class="jquery_inner">
  <div class="jquery">
  let'jquery^_^
  </div>
  </div>
  </li>
  <li class="mainlevel" id="mainlevel_01"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_01">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_02"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_02">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">up and down</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_03"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_03">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_04"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_04">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_05"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_05">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">up and down</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_06"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_06">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">up and down</a></li>
  </ul>
  </li>
  <div class="clear"></div>
</ul>
</div>
<p align="center"></p>
<p align="center"><p align="center">jquery下拉竖导航菜单代码,来源网络,请原作者联系我们署名。</p></p>
<p align="center"></p>
</body>
</html>

指望本文所述对我们的jquery程序设计有所补助。

期待本文所述对大家的jquery程序设计有所扶助。

您大概感兴趣的篇章:

  • jquery达成简单的二级导航下拉菜单效果
  • jquery达成美貌的导航菜单鼠标提醒特效代码
  • jQuery完结轻松的列表式导航菜单作用代码
  • jquery完毕革命竖向多级向右展开的导航菜单功效
  • jQuery达成淡入淡出二级下拉领航菜单的点子
  • jQuery ui完结精神的圆角渐变网站导航菜单成效代码
  • jQuery完成的背景动态变化导航菜单效能
  • jQuery+css实现的紫蓝水平二级导航菜单功用代码

您只怕感兴趣的篇章:

  • 基于jQuery达成以手风琴方式实行和折叠导航菜单
  • jQuery完成折叠、张开的美食指南组效果代码
  • jquery完结点击查阅越多内容调节段落文字实行折叠效率
  • jquery完成点击TreeView文本父节点张开/折叠子节点
  • 凭仗jQuery完毕下拉减弱(张开与折叠)特效
  • 原生Js与jquery的多组管理, 仅张开一个区块的折叠功用
  • jQuery落成网页顶端固定导航效能代码
  • jQuery达成的凝练下拉菜单导航功能代码
  • jQuery实现仿百度帖吧底部固定导航作用
  • jquery达成稳固顶上部分导航功效(仿香菇街)
  • jQuery实战之仿天猫百货店右边导航功用
  • jQuery达成可举办折叠的领航成效示例

本文由六合联盟网发布于计算机网络,转载请注明出处:jquery完毕向下滑出的二级导航下滑菜单功效,j

关键词: