本文实例讲述了js实现带圆角的两级导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款使用JS做的圆角菜单，支持两级菜单显示，本人比较喜欢的风格，修改使用方便，新手也能上手快。使用有几张圆角图片来修饰了菜单，喜欢的朋友可以下载代码留作收藏使用。真心不错的蓝色导航条代码。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-cicle-nav-menu-style-codes/ 具体代码如下： <!DOCTYPE html...
本文实例讲述了jQuery实现的背景动态变化导航菜单效果。分享给大家供大家参考。具体如下： 这里介绍一款使用jQuery插件制作完成的导航菜单，一大特点是，菜单的背景有动态效果，与使用的背景图片完全变换，动态效果是在鼠标悬停时出现，也就是把鼠标放在菜单上的时候，背景即开始滚动起来，看上去漂亮极了，而且兼容性也是相当不错的，推荐给网页设计者使用。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/...
本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款js实现的黑背景灰色二级导航菜单，兼容IE6、firefox的js+css横向二极导航菜单。挺简洁，不过很清新，二级菜单是水平显示在主菜单的下方，采用流行的微软雅黑字体，若不想用这种字体，可换成默认的宋体即可。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/ 具体代...
这是一款基于jquery实现动感漂浮导航菜单的特效代码，菜单可以上下浮动，动感十足，为自己的网站增加了活力，是一款非常实用的导航菜单特效源码。运行效果图：点击下载源码 为大家分享的jquery动感漂浮导航菜单代码如下 <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>jQuery Floating Menu</title><script type="text/javascript" src="js/jquery-1.3.1.min.js"></script><script type="text/...
这是一款基于jquery实现的垂直导航菜单特效代码，总共有三级，实现效果简单大方，最后一级还可以进行图片展示说明，是一款非常实用的导航菜单特效源码。 效果演示 源码下载 为大家分享的jQuery垂直多级导航菜单代码如下<head> <title>jQuery垂直多级导航菜单代码</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <u...
效果图：目前市场上越来越流行IOS风格的操作系统和导航方式，在今天的jQuery教程中，我们介绍如何生成一个iphone风格的菜单导航。 HTML代码 我们使用镶嵌的<li>来生成菜单内容，并且包含在<nav>标签中，如下： <nav> <h1>导航菜单</h1> <ul> <li> <h2>专题教程</h2> <ul> <li> <h3>HTML专题教程</h3> <ul> <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-introduction">GBin1专题之HTML5教程 - 第一篇：HTML5介...
本文实例讲述了javascript实现带下拉子菜单的导航菜单效果。分享给大家供大家参考。具体实现方法如下： <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>带下拉子菜单的导航菜单</title> <style type="text/css...
本文实例讲述了jQuery实现的动态伸缩导航菜单。分享给大家供大家参考。具体实现方法如下： <!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"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery select</title> <script type="text/javascript" src="jquery-1....
本文实例讲述了JavaScript实现简单的二级导航菜单的方法。分享给大家供大家参考。具体如下： <!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!-- ...
jQuery左右侧栏导航菜单插件PageSlide，目前比较流行的导航菜单展现形式，特别是在手机端或者触屏页面，效果还是不错的，支持自定义展现的方向，菜单内容可自行定义，支持加载页面，或者模态的窗格中显示此页的隐藏的内容，推荐使用。 使用方法：1.加载插件和jQuery<link rel="stylesheet" type="text/css" href="../jquery.pageslide.css" /> <script src="../lib/jquery-1.7.1.min.js"></script> <script src="../jquery.pages...
本文实例讲述了jQuery实现个性翻牌效果导航菜单的方法。分享给大家供大家参考。具体实现方法如下：代码如下: <!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"> <head> <title>jQuery个性翻牌效果的导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="...
本文实例讲述了jquery实现无限分级横向导航菜单的方法。分享给大家供大家参考。具体实现方法如下： 1. jquery插件版本代码如下：代码如下:(function($){ $.fn.extend({ droplinemenu: function(configs) { var configs = $.extend({ over: 200, out: 100, rightdown:css/down.gif },configs||{}); this.find("...
本文实例讲述了jQuery实现仿美橙互联两级导航菜单的方法。分享给大家供大家参考。具体实现方法如下：代码如下: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>仿美橙互联导航菜单</title> <style> body { ...
本文实例讲述了js实现多选项切换导航菜单的方法。分享给大家供大家参考。具体实现方法如下：代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>多选项切换导航菜单</title> </head> <style type="text/css"> #dNavBar{ background-color:#ffffff; } #dNavBar li{ list-style-type:none; float:left; width:84px; height:28px; line-height:28px; font-size:12px; color:#FFFF...
单页面网页内容较多，页面长度较大，需要方便快速的在页面的不同位置进行定位，所以浮动菜单逐渐流行了起来，如下图 男装、女装、美妆等。这种菜单功能分为两部分： 1、点击菜单项，网页滚动到对应位置，可简单通过锚点实现； 2、滚动页面的时候，菜单项的选中状态要跟着改变，这就需要监听网页的滚动事件并通过一点计算来实现了；计算 scrollTop 和 各个 div 的 offsetTop 的大小关系，判断现在网页显示的位置在什么地方，再根据计...