时间:2021-05-26
本文实例讲述了jQuery实现的网页竖向菜单效果代码。分享给大家供大家参考。具体如下:
这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,修改一下可用在后台管理中,显示在左侧的那种管理菜单。jquery加入后方便实现了菜单展开和合拢的功能,还加入了少许动画效果,兼容性好。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jQuery实现折叠、展开的菜单组效果代码。分享给大家供大家参考。具体如下:这是一款jQuery实现的漂亮的竖向折叠菜单组,初次运行的时候请刷新一
本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果。分享给大家供大家参考。具体如下:这里演示了两个下拉导航菜单的效果,用jquery.easing
本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果。分享给大家供大家参考。具体如下:这里演示垂直的树形菜单,应用CSS和jquery技术来
本文实例讲述了jquery实现红色竖向多级向右展开的导航菜单效果。分享给大家供大家参考。具体如下:这里介绍的是一款红色竖向多级向右展开的导航菜单,多用于博客网站
本文实例讲述了jQuery实现响应鼠标滚动的动感菜单效果。分享给大家供大家参考。具体如下:这是响应鼠标滚动的一款jQuery动感菜单,横向竖向这个大家怎么改吧,