jquery实现无限分级横向导航菜单的方法

本文实例讲述了jquery实现无限分级横向导航菜单的方法。分享给大家供大家参考。具体实现方法如下:

1. jquery插件版本代码如下:

代码如下:

(function($){
    $.fn.extend({
        droplinemenu: function(configs) {
            var configs = $.extend({               
                over: 200,
                out: 100,
                rightdown:'css/down.gif'
            },configs||{});
            this.find(">ul").addClass("dropmenu");
            this.find("ul li:has(ul)").addClass('hasmenu').find(">a").append("<img class='downarrowclass' src='"+configs.rightdown+"'>");
            var currentobj;
            return $('li.hasmenu').hover(function(){                
                if ($.browser.msie) {//清除ie下生成的overflow:hidden
                    $(this).parent("ul").css({'overflow': 'visible'});
                }
                $(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs.over);
            },function(){  
                $(this).find(">ul").stop(true, true).slideUp(configs.out);
            });
        }
    });
})(jQuery);

2. 样式代码

代码如下:

* {margin:0;padding:0}
.droplinebar{
     position: absolute;
    z-index: 20;
    width: 700px;
}
.droplinebar ul.dropmenu {
position: relative;
}
.droplinebar ul{
width: 100%;
float: left;
font: bold 13px Arial;
background: #242c54 url(bluedefault.gif) center center repeat-x; /*default background of menu bar*/
}
.droplinebar ul li{
    float:left;
}
.droplinebar ul ul {
    width: 700px;
    display:none;
    z-index: 100;
    position:absolute;
    left:0;
    background: #303c76;
    zoom: 1;
}
.droplinebar ul li a{
    float: left;
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    display:block;
}
.droplinebar ul li.hasmenu a img {border:none;margin-left:5px;}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(blueactive.gif) center center repeat-x;

/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}
.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #242c54;
}

3. HTML代码如下

代码如下:

<link rel="stylesheet" type="text/css" href="css/droplinebar.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/droplinemenu.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#mydroplinemenu").droplinemenu();
});
</script>
<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
  <ul>
  <li><a href="#">Activities 1</a></li>
  <li><a href="#">Activities 2</a></li>
  <li><a href="#">Activities 3</a>
      <ul>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      </ul>
    </li>
  <li><a href="#">Activities 4</a></li>
  </ul>
</li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a>
  <ul>
  <li><a href="#">Traveling 1</a></li>
  <li><a href="#">Traveling 2</a></li>
  <li><a href="#">Traveling 3</a></li>
  <li><a href="#">Traveling 4</a>
      <ul>
      <li><a href="#">Africa 1</a></li>
      <li><a href="#">Africa 2</a></li>
      <li><a href="#">Africa 3</a></li>
      <li><a href="#">Africa 4</a>
          <ul>
          <li><a href="#">Kenya 1</a></li>
          <li><a href="#">Kenya 2</a></li>
          <li><a href="#">Kenya 3</a></li>
          <li><a href="#">Kenya 4</a></li>
          <li><a href="#">Kenya 5</a></li>
          </ul>
        </li>
      </ul>
    </li>
  <li><a href="#">Traveling 5</a></li>
  </ul>
</li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>

4. 无插件版本代码:

代码如下:

$(document).ready(function(){
    var configs_over = 200,configs_out = 100;
    $("#mydroplinemenu").find(">ul").addClass("dropmenu").find("li:has(ul)").addClass('hasmenu').find(">a").append("<img class='downarrowclass' src='css/down.gif'>");
    $('.dropmenu li.hasmenu').hover(function(){             
        if ($.browser.msie) {//清除ie下生成的overflow:hidden
            $(this).parent("ul").css({'overflow': 'visible'});
        }
        $(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs_over);
    },function(){  
        $(this).find(">ul").stop(true, true).slideUp(configs_out);
    });
});

希望本文所述对大家的jQuery程序设计有所帮助。

时间: 2015-03-10

jQuery ui实现动感的圆角渐变网站导航菜单效果代码

本文实例讲述了jQuery ui实现动感的圆角渐变网站导航菜单效果代码.分享给大家供大家参考.具体如下: 今天给大家分享一款基于jQuery UI的网站渐变导航菜单,可作为主导航,带渐入渐出效果,鼠标移过菜单后,菜单项上显示圆角背景,本地测试时,请注意引入的几个JS脚本文件,最好是保存到你本地,菜单兼容性也不错. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ui-cicle-button-style-web-nav-codes

jQuery实现的背景动态变化导航菜单效果

本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code

jQuery仿京东商城楼梯式导航定位菜单

实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项! 涉及知识点:find().parent().offset().scroll()等jQ函数,请自觉复习各种函数! html代码: <!-- 导航菜单 --> <div id="menu"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></

jQuery实现的简洁下拉菜单导航效果代码

本文实例讲述了jQuery实现的简洁下拉菜单导航效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现简洁下拉菜单导航效果,代码规范,兼容性方面:支持 IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+.简洁明快的jquery网站菜单,请参阅代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-down-show-menu-nav-codes/ 具体代码

jQuery实现的导航下拉菜单效果

本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <div id="navigation"> <ul> <li><a href="#">首 页</a></li> <li><a href="#">衬 衫</a> <ul> <li><a hr

基于jquery实现导航菜单高亮显示(两种方法)

项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式. 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下: 示例代码一: 具体示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

Jquery实现带动画效果的经典二级导航菜单

导航菜单比较实用,当然还是选择经典的,代码最少的,效果最好的喽,各位童鞋请围观哦,废话不说, 效果图如下,欢迎评价: 看代码: 复制代码 代码如下: <!DOCTYPE html > <html> <head> <title>一款带动画效果的经典二级导航菜单Jquery特效</title> <meta name="author" content="Jquery" /> <meta name

jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div

jquery实现点击向下展开菜单项(伸缩导航)效果

本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果.分享给大家供大家参考.具体如下: 这里演示基于jquery打造的向下展开的多级导航条效果,纵向垂直排列,风格非常的简洁,鼠标点击时候展开菜单的二级项,再次点击的时候又向上合拢,平时只显示一级菜单,二级菜单是隐藏不显示的,代码简洁,包括了完整的JS.css和jquery部分. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-hidden-style-menu

jQuery渐变发光导航菜单的实例代码

下面和大家分享一下具体的实现过程. HTML标签结构: 复制代码 代码如下: <ul class="animation_menu">     <li class="current">         <a href="#">菜单一<span>菜单一</span></a>     </li>     <li>         <a href=&qu

jQuery实现导航栏头部菜单项点击后变换颜色的方法

本文实例讲述了jQuery实现导航栏头部菜单项点击后变换颜色的方法.分享给大家供大家参考,具体如下: 实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ text-decoration: none; color

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=&q

jQuery实现鼠标滑过Div层背景变颜色的方法

本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="text/css"> .divbox{   height:300px;   width:200px;   background:#ffffff;   border

jQuery Mobile 导航栏代码

导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内. 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button"). 使用 data-role="navbar" 属性来定义导航栏: 复制代码 代码如下: <div data-role="header"><div data-role="navbar"><ul><li><a href="

简单的jquery左侧导航栏和页面选中效果

这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

在Bootstrap的官网上,提供了一种导航栏的组件: 只要在站点文件夹放好JQ与Bootstrap输入如下代码: <!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

iOS开发之导航栏各种右滑返回失效的解决方法汇总

前言 众所周知iOS 的几乎全部页面都是需要右滑返回的,否则用户体验会大打折扣,但是在开发过程中经常会碰到某些页面右滑返回失效的情况,下面记录一下各种情况下右滑返回失效的解决方法. 下面话不多说了,来随着小编一起学习学习吧 自定义返回按钮时失效 当你重写 self.navigationItem.leftBarButtonItem 之后,自带的返回按钮就会被覆盖,右滑返回就会失效,解决办法只要加入下面这句代码即可. - (void)viewDidLoad { [super viewDidLoad]

jquery实现二级导航下拉菜单效果实例

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: 1)使用$(function(){...})获取到想要作用的HTML元素. 2)通过使用children()方法寻找子元素. 3)通过使用show()方法来显示HTML元素. 4)通过使用hide()方法来隐藏HTML元素. 5)jQuery库引用方法: 第一种方法:将jQuery库下载到电脑上,

android实现底部导航栏

底部导航栏我选择用FragmentTabHost+Fragment来实现,这个方法比较好用,代码量也不多 首先是开始的activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_

iOS轻松实现导航栏透明渐变

首先我们来看下效果 一开始当我们什么只设置了一张图片作为它的头部视图的时候,它是这样的 1.首当其冲的,我们先得把导航栏弄透明 那么我们首先得知道,设置navigationBar的BackgroundColor为Clear是没用的,你可以试着设置它的clear,但是没用,原因一会儿我们就知道了. 而对于把导航栏设置为透明,网上大多数的方法是: [self.navigationController.navigationBar setBackgroundImage:[UIImage new] for