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

2024-10-20 13:27:00

本文实例讲述了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程序设计有所帮助。

jQuery+CSS实现的网页二级下滑菜单效果

本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果和菜单下滑效果和渐变效果已经做出来了,在IE下表现不错,在火狐下发现菜单有闪烁现象,有空会继续修正,感谢大家捧场哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-web-2level-menu-style-codes/ 具体
jquery实现在网页指定区域显示自定义右键菜单效果

本文实例讲述了jquery实现在网页指定区域显示自定义右键菜单效果.分享给大家供大家参考.具体如下: 这是一个jquery实现的网页右键菜单效果,与其它自定义的右键菜单不同之处在于,本菜单只在指定区域内才有效,若超出指定区域的话,点击右键后显示的仍是浏览器的右键菜单.运行效果后,请在橘色区域内点击鼠标右键,会弹出一个带图标的自定义右键菜单,和浏览器的右键菜单完全不一样哦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-ar
jquery实现很酷的网页顶部图标下拉菜单效果

本文实例讲述了jquery实现很酷的网页顶部图标下拉菜单效果.分享给大家供大家参考.具体如下: 兼容IE和火狐的顶部菜单栏,带图标的图文菜单,还有右上角的下拉导航效果,一个演示包括了两种菜单,都是很实用的效果,只使用了jquery就实现了.如果你的网站上此前用有jquery插件,那么整合起来就更方便了,点击运行可预览菜单效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-top-ico-show-menu-style-c
jQuery实现网页抖动的菜单抖动效果

本文实例讲述了jQuery实现网页抖动的菜单抖动效果.分享给大家供大家参考.具体如下: 这里的jQuery抖动导航菜单效果,兼容IE7/8/9及其它主流浏览器,使用方法:先引入jQuery脚本库和jquery.shake.js文件,然后在需要的元素上调用shake( )方法,例如想使整个页面抖动,则这么写:$('body').shake( ),调用上述方法后,将鼠标移至指定的元素,该元素就会抖动. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScri
jquery+CSS实现的水平布局多级网页菜单效果

本文实例讲述了jquery+CSS实现的水平布局多级网页菜单效果.分享给大家供大家参考.具体如下: 这里演示的Jquery和CSS共同实现的网页常见的导航菜单,支持两级形式,蓝色风格,最多支持二级,三级可能要对代码进行改造了.本菜单属于中规中矩型,实用性比较强,适合的网站种类也是很多的,希望大家会喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-scroll-nav-menu-style-codes/ 具体代码如下:
jquery实现清新实用的网页菜单效果

本文实例讲述了jquery实现清新实用的网页菜单效果.分享给大家供大家参考.具体如下: 这是一款应用了jQuery插件来实现的网页菜单,看上去十分清新实用,来自美国Flickr网站,不知道Flickr网站的朋友自己去查.这款菜单在用户点击了主菜单项的时候,会滑出二级的子菜单,菜单前边带有小图标,增加了人性化体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-plug-web-menu-codes/ 具体代码如下: <!DOCTY
jQuery实现的网页竖向菜单效果代码

本文实例讲述了jQuery实现的网页竖向菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,修改一下可用在后台管理中,显示在左侧的那种管理菜单.jquery加入后方便实现了菜单展开和合拢的功能,还加入了少许动画效果,兼容性好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-v-web-menu-style-codes/ 具体代码如下: <!DOCTYPE htm
JS实现仿Windows7风格的网页右键菜单效果代码

本文实例讲述了JS实现仿Windows7风格的网页右键菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS仿Windows7风格的网页右键菜单,可以多级展开的右键菜单,原生JS.可参考性强,学习JavaScript的朋友不可错过.本菜单用户体验极佳,兼容性良好,无jQuery. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win7-style-web-right-menu-codes/ 具体代码如下: <!DOCTYPE htm
json+jQuery实现的无限级树形菜单效果代码

本文实例讲述了json+jQuery实现的无限级树形菜单效果代码.分享给大家供大家参考.具体如下: 这里演示json树形菜单,JS无级树树形菜单,引入了jQuery插件,使用递归实现获取无级树数据并生成DOM结构,可以在JSON数据里扩展无限级看结构就明白. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-json-tree-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
jquery实现的简单二级菜单效果代码

本文实例讲述了jquery实现的简单二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的二级菜单,研究了这么多天,才学会用jquery写一个菜单,也算是对自己的鼓励吧,自我感觉这个菜单很不错,欢迎朋友们指点江山. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-2l-menu-style-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
jQuery实现的类flash菜单效果代码

先来看看效果:http://demo.jb51.net/js/jquery_flash/demo.htm 因为下面的menu和上面的logo的实现原理一样,为了简化起见,我们这里只拿logo部分的代码来说明一下原理: HTML代码: 复制代码代码如下: <a id="logotype" href=""><span>Logo Type</span></a> CSS代码: 复制代码代码如下: a#logotype{ b
基于jQuery实现简单的折叠菜单效果

本文实例讲述了JQuery实现简单的折叠菜单效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: Html代码如下: <div class="box"> <p>菜单一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a>
jQuery实现的经典竖向伸缩菜单效果代码

本文实例讲述了jQuery实现的经典竖向伸缩菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jquery1.3.2制作的竖向伸缩菜单,每点击一次主菜单,会拉开出对应的二级菜单,再次点击会合拢,效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-v-show-menu-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
jQuery实现固定在网页顶部的菜单效果代码

本文实例讲述了jQuery实现固定在网页顶部的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的固定在页面顶部的菜单,获取要定位元素距离浏览器顶部的距离,滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-top-fixed-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W
jquery实现最简单的滑动菜单效果代码

本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/
jquery实现适用于门户站的导航下拉菜单效果代码

本文实例讲述了jquery实现适用于门户站的导航下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款应用了jQuery+CSS共同编写实现的网页导航菜单,采用浅蓝色的布局方式,整体格调淡雅清新,简洁大方,不失为一款好菜单.本特点的特点是兼容好,在火狐/IE下都有良好表现,而且在有二级子菜单的地方,主菜单上都会有一个小三角标识,很好的提升了用户体验,相信你也会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-i

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

相关推荐

随机推荐