本文实例讲述了JS+CSS实现大气的黑色首页导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款JS+CSS实现的大气的重色+红色高强对比的菜单，可用作首页导航菜单，从设计的角度来讲，挺专业，从实用角度来讲，应用广泛，是款人见人爱的经典风格菜单，超不错的一个作品。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-black-style-nav-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-/...
本文实例讲述了jQuery超精致图片轮播幻灯片特效。分享给大家供大家参考。具体如下： 这是一款基于js实现图片卷帘门导航菜单特效代码，与以往的导航菜单相比，更具有创新性，不止是简单的向用户展示信息，而是更加丰富网站的整体内容。 运行效果图：-------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 在head区域引入CSS样式：<link href="css/style.css" rel="sty...
本文实例讲述了js实现的动画导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款简单的动画导航菜单效果，每个菜单项的下边有一个横线会随着鼠标的对应而自动滑动，指明当前菜单的位置。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-animate-nav-menu-style-codes/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional....
本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码。分享给大家供大家参考。具体如下： 这是一个奇妙的导航菜单鼠标提示特效，俗称“链接提示”，鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容，提示用户到达需要的页面。 先来看看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-nav-tips-nav-menu-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr...
效果图如下：查看演示 源码下载 html代码： <h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1> <p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p> <h2>深色样式（默认）</h2> <ul class="pgwMenu"> <li><a class="selected" href="//www.gxlcms.com/">首页</a></li> <li><a href="//www.gxlcms.com/">代码</a></li> <li><a href="//www.gxlcms.com/">素材</a></li> <li><a href="//www.gxlcms.com/">模板</a></li...
本文实例讲述了js实现改进的仿蓝色论坛导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款改进的仿蓝色论坛导航菜单，滑动门级的导航菜单，网址跟踪链接的JS导航菜单，可以支持二级的菜单。为改善用户体验，加了延时。其原理是将链接地址和网址比较，如果一致，则加强该链接和上级链接的显示。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-f-blue-color-style-bbs-menu-codes/ 具体代码如下...
本文实例讲述了基于dropdown.js实现的两款美观大气的二级导航菜单。分享给大家供大家参考。具体如下： 1. 蓝色风格导航菜单 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-dropdown-blue-style-nav-menu-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.w3.org/1999/xhtml"...
本文实例讲述了jquery实现红色竖向多级向右展开的导航菜单效果。分享给大家供大家参考。具体如下： 这里介绍的是一款红色竖向多级向右展开的导航菜单，多用于博客网站的导航菜单，红色风格，非常漂亮，向右伸展的菜单。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-red-style-show-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org...
本文实例讲述了jquery专业的下拉菜单特效。分享给大家供大家参考。具体如下： 这是一款基于jquery实现的专业下拉菜单特效，蓝色风格的下拉菜单非常经典，网站是否有一个具有吸引力的导航会影响到用户停留时间的长久，就像小编编辑的文章内容影响亲们的访问时间长久一样。大家要学会如何建立一个属于自己网站风格的导航菜单。 运行效果图：-------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行...
本文实例讲述了jQuery实现简单的列表式导航菜单效果代码。分享给大家供大家参考。具体如下： 这里使用jQuery实现简单的列表式导航菜单，是根据网上的一个教程，边看边写的，经过了修正，拷贝代码即可使用。主要实现包括三个部分，一是CSS、二是引入jQuery、三是编写JS代码进行jQuery控件。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/ 具体代码如下： <html> <h...
本文实例讲述了js实现仿爱微网两级导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款仿爱微网两级导航菜单，tab选项卡形式的导航菜单，原生js做的tab选项卡型的导航菜单，需要鼠标点击才切换出二级子菜单，可修改成鼠标移过去就更换内容的形式。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-fawei-web-nav-menu-style-codes/ 具体代码如下： <html> <head> <title>一个两级的网页菜单</tit...
本文实例讲述了js实现横向伸展开的二级导航菜单代码。分享给大家供大家参考。具体如下： 这是一款js实现的横向伸展开二级导航菜单，鼠标放在一级菜单的第四个菜单项上，就能展开二级的菜单，菜单没有过多美化，只是一般的修饰，使用的朋友可根据您自己的网站风格重新美化菜单风格。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-r-show-menu-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C...
本文实例讲述了jQuery ui实现动感的圆角渐变网站导航菜单效果代码。分享给大家供大家参考。具体如下： 今天给大家分享一款基于jQuery UI的网站渐变导航菜单，可作为主导航，带渐入渐出效果，鼠标移过菜单后，菜单项上显示圆角背景，本地测试时，请注意引入的几个JS脚本文件，最好是保存到你本地，菜单兼容性也不错。 先来看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-ui-cicle-button-style-web-nav-c...
项目需求： 实现原理：当选中当前元素时，给当前元素添加样式，同级元素移除样式。 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下：示例代码一： 具体示例代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln...
本文实例讲述了jQuery三级下拉列表导航菜单。分享给大家供大家参考。具体如下： jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js，可无限极分类，可智能判断是否有下级菜单，鼠标经过上次菜单显示下级菜单。 运行效果图： -------------------查看效果-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jQuery三级下拉列表导航菜单代码如下<head> <meta http-equiv="Con...