本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果。代码实例如下:代码实例如下: <!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...