jQuery实现的网页竖向菜单效果代码

前端技术 2023/09/02 JavaScript

本文实例讲述了jQuery实现的网页竖向菜单效果代码。分享给大家供大家参考。具体如下：

这是一款基于jQuery实现竖向的网页菜单代码，可折叠展开的二级网页菜单，修改一下可用在后台管理中，显示在左侧的那种管理菜单。jquery加入后方便实现了菜单展开和合拢的功能，还加入了少许动画效果，兼容性好。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/jquery-v-web-menu-style-codes/

具体代码如下：

<!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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/3213

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案