本章节分享一段代码实例，它实现了手风琴方式展开和折叠导航菜单效果。代码实例如下:代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="//www.gxlcms.com/" /> <title>脚本之家</title> <style> dl{width:150px;} dl,dd{margin:0;} dt{background:gray;font-size:14px;padding:2px;margin:2px; } dt{color:#FFF;} dd a{color:#000;font-size:12px; } ul{list-style:none;padding...
基于jQuery鼠标点击水波动画竖直导航代码。这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效。效果图如下：效果展示 源码下载 html代码：<div class="nav"><ul><li><a>网站首页</a></li><li><a>关于我们</a></li><li><a>产品中心</a></li><li><a>成功案例</a></li><li><a>联系我们</a></li><li><a>在线留言</a></li></ul></div><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/ja...
导航菜单 导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加.WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单. 可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单....
本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下： 运行效果截图如下：鼠标悬浮时菜单项向上移动成蓝底白字，点击之后底部会有蓝条表示当前选中项。 页面代码，菜单的每一项都是一个 div ，其中包括一个 ul 用来放置显示文字等，另一个 div 则是底部的蓝条，需要给第一项和最后一项设置不同的 class ，样式需要用到： <div id="nav"><div class="navItem indexNavItem"><ul class="navUl"><li>...
本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码。分享给大家供大家参考。具体如下： 这是一款效果个性的JS+CSS导航菜单，鼠标经过时出现有趣弧形背景，实际上，这里用CSS调用了背景，用JavaScript控制了背景的移动，用jQuery实现过类似的功能，整体感觉很不错。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-cicle-cha-nav-menu-demo/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD X...
本文实例讲述了JS实现的简洁二级导航菜单雏形效果。分享给大家供大家参考。具体如下： 这是一个二级导航菜单雏形，风格简洁，圆角形，也是当前比较流行的菜单效果，支持二级，演示内容是随便搞的，希望大家喜欢。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-simple-2l-nav-menu-demo/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D...
本文实例讲述了JS+CSS实现另类带提示效果的竖向导航菜单。分享给大家供大家参考。具体如下： 这是一款JS+CSS打造另类带提示的竖向导航菜单，觉得挺不错，只是美工水平有限，有兴趣的朋友就请继续完善吧。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-alert-txt-nav-menu-demo/ 具体代码如下： <html> <head> <title>带提示的竖向导航菜单</title> <style type="text/css"> #coolmenu{ border: 1px ...
本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下： 这是一款CSS配合JavaScript实现二级下拉导航菜单，好像CSS要配合JS才能写出好效果来，本款菜单同样用到了JS，菜单目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/...
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果。分享给大家供大家参考。具体如下： 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单，预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-alt-dlg-left-nav-menu-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-/...
本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下： 这里介绍两个有动画功能的jQuery导航菜单，每个具备移动背景的效果，第二则是渐变背景效果，两个都不错，根据你的喜好选择了，菜单的风格和颜色自己修改一下就能用了。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-2-animate-style-nav-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD X...
本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果。分享给大家供大家参考。具体如下： 这是一款基于jQuery实现的仿美橙互联两级导航菜单，效果不错吧，更像是一个滑动门，不会让你失望的。 先来看看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-f-mchl-2l-nav-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1...
本文实例讲述了JS实现黑色大气的二级导航菜单效果。分享给大家供大家参考。具体如下： 这是一款自己做的不错的二级导航菜单，黑色风格，是根据仿淘宝支付宝菜单而做的，自我感觉还算行吧。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-black-style-2l-nav-menu-codes/ 具体代码如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...
本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果。分享给大家供大家参考。具体如下： 偶尔看到魅族官方网站，发现网站的导航菜单的效果很不错就扣下来，俩字：给力。鼠标放到菜单上，菜单的下边会有一条横线在滑动。一直想找类似的效果学一下。结果，不是忘记有类似效果的网站的网址，就是压根儿找不到。。又不知道怎么描述，今天总算碰到了，真给力。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/20...
本文实例讲述了JS实现自动变化的导航菜单效果代码。分享给大家供大家参考。具体如下： 自动变化的JS导航菜单，按照时间自动切换，有需要的参考一下。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-auto-cha-nav-menu-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www...
本文实例讲述了JS实现带有抽屉效果的产品类网站多级导航菜单代码。分享给大家供大家参考。具体如下： 这是一款像抽屉一样的菜单，多用在产品网站，比如IT产品网站的分类导航上，菜单结构清淅，样式新颖，设计美观，主要是运用JavaScript技术实现，用CSS配合实现菜单背景的构建，总体来说，是学习Js多级分类菜单的好范例。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-ct-style-product-web-nav-menu-co...