`
kevin-qingzhan
  • 浏览: 84806 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

jquery 导航 代码

阅读更多
html代码:

<html>
<head>
<link rel="stylesheet" type="text/css" href="jquerycssmenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jquerycssmenu{height: 1%;}
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jquerycssmenu.js"></script>

</head>


<body>
<div id="myjquerymenu" class="jquerycssmenu">
<ul>

<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Folder 1</a></li>
  </ul>

</div>

</body>
</html>



jquerycssmenu.js代码:



//Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'arrow-down.gif', 25], right:['rightarrowclass', 'arrow-right.gif']}

var jquerycssmenu={

fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
  var $mainmenu=$("#"+menuid+">ul")
  var $headers=$mainmenu.find("ul").parent()
  $headers.each(function(i){
   var $curobj=$(this)
   var $subul=$(this).find('ul:eq(0)')
   this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
   this.istopheader=$curobj.parents("ul").length==1? true : false
   $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
   $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
    '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
    +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
    + '" style="border:0;" />'
   )
   $curobj.hover(
    function(e){
     var $targetul=$(this).children("ul:eq(0)")
     this._offsets={left:$(this).offset().left, top:$(this).offset().top}
     var menuleft=this.istopheader? 0 : this._dimensions.w
     menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
     $targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)
    },
    function(e){
     $(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
    }
   ) //end hover
  }) //end $headers.each()
  $mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myjquerymenu" on page:
jquerycssmenu.buildmenu("myjquerymenu", arrowimages)







jquerycssmenu.css代码:

.jquerycssmenu{
font: bold 12px Verdana;
border-bottom: 1px solid black;
padding-left: 15px;
}

.jquerycssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}


.jquerycssmenu ul li{
position: relative;
display: inline;
float: left;
}


.jquerycssmenu ul li a{
display: block;
background: white url(tintblue.gif) top center repeat-x;;
padding: 5px 7px 4px 7px;
margin-right: 3px;
border: 1px solid #778;
border-bottom-width: 0;
color: #2d2b2b;
text-decoration: none;
}

.jquerycssmenu ul li a:hover{
background-image: url(tintbluedark.gif)
}
 

.jquerycssmenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
border-top: 1px solid black;
}


.jquerycssmenu ul li ul li{
display: list-item;
float: none;
}


.jquerycssmenu ul li ul li ul{
top: 0;
}


.jquerycssmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
background: white;
color: black;
padding: 4px 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid black;
}

.jquerycssmenu ul li ul li a:hover{
background: #eff9ff;
color: black;
}



.downarrowclass{
position: absolute;
top: 7px;
right: 5px;
}

.rightarrowclass{
position: absolute;
top: 5px;
right: 5px;
}
分享到:
评论

相关推荐

    横向滚动jQuery导航代码.zip

    【横向滚动jQuery导航代码】是一种常见的网页交互设计技术,它为用户提供了一种创新且直观的浏览方式,尤其适用于展示大量菜单选项或者长列表内容。在网页设计中,使用jQuery实现的横向滚动导航能够提高用户体验,...

    中英文对照滑动显现jquery导航代码

    【标题】:“中英文对照滑动显现jquery导航代码”是一个基于jQuery实现的前端导航菜单解决方案,旨在提供一种在用户交互时动态展示中英文对照内容的导航效果。这种导航设计能够增强用户体验,使得网站的导航更加直观...

    2款导航,中英文对照滑动显现jquery导航代码

    本文将深入探讨“2款导航,中英文对照滑动显现jquery导航代码”这一主题,旨在帮助开发者更好地理解和应用jQuery创建动态、交互性强的网页导航。 首先,jQuery导航通常指的是使用jQuery技术来实现的网页菜单或导航...

    中英文对照滑动显示jquery导航代码.zip

    【标题】"中英文对照滑动显示jquery导航代码.zip"是一个专门为网站开发者设计的资源包,其中包含了使用jQuery实现的中英文对照滑动导航菜单的代码。jQuery是一种广泛使用的JavaScript库,它简化了HTML文档遍历、事件...

    横向滚动(筋斗云特效)jQuery导航代码

    【横向滚动(筋斗云特效)jQuery导航代码】是一种网页设计技术,主要用于创建具有动态视觉效果的导航菜单。这种特效通常使用户在浏览网站时有一种流畅的体验,如同孙悟空翻筋斗云般的轻盈感。在网页设计中,良好的导航...

    横向滚动jQuery导航代码

    【横向滚动jQuery导航代码】是一种常见的网页设计技术,主要用于创建具有动态效果的网站导航菜单。在网页设计中,良好的导航是用户体验的关键因素之一,因为它帮助用户轻松地在网站的各个部分之间进行切换。jQuery,...

    jQuery导航图片全屏滚动代码.zip

    《jQuery导航图片全屏滚动代码实现详解》 在网页设计中,吸引用户的注意力并提供良好的用户体验至关重要。jQuery作为一款强大的JavaScript库,为开发者提供了丰富的功能和便利性,尤其是在实现动态效果方面。本篇...

    Jquery手机导航代码

    "Jquery手机导航代码"这个项目旨在提供一个简洁且高效的解决方案,以满足移动设备用户友好的交互需求。以下是对相关知识点的详细说明: **jQuery基础** jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历...

    黑色简洁常用二级导航菜单jquery特效代码

    "黑色简洁常用二级导航菜单jquery特效代码"是一个专门用于创建二级导航菜单的资源,结合了HTML、CSS和JavaScript技术,提供了直观且易于使用的交互效果。下面我们将详细探讨这个主题中的关键知识点。 首先,HTML...

    jQuery自适应横排下拉菜单导航代码

    "jQuery自适应横排下拉菜单导航代码"提供了一个高效且美观的解决方案,尤其适合那些希望提升用户体验的开发者。这个代码利用jQuery库实现,能够根据屏幕尺寸自动调整布局,确保在各种设备上都能良好地展示。 首先,...

    红色的jQuery商城导航菜单代码

    【jQuery 商城导航菜单代码详解】 在Web开发中,创建一个引人注目的商城导航菜单是至关重要的,因为它直接影响到用户的浏览体验和交互性。"红色的jQuery商城导航菜单代码"是一个专门针对电商平台设计的、具有视觉...

    jQuery仿flash导航代码

    **jQuery仿Flash导航代码详解** 在网页设计中,导航栏是不可或缺的一部分,它为用户提供页面间的跳转途径,良好的导航设计能提升用户体验。随着Flash技术的逐渐淘汰,jQuery以其轻量级、易用性以及良好的浏览器兼容...

    jquery下拉竖导航菜单代码

    本项目名为 "jquery下拉竖导航菜单代码",旨在提供一个易于定制的下拉竖向导航菜单模板。 该代码的核心是利用 jQuery JavaScript 库来实现动态效果,如鼠标悬停时的显示和隐藏下拉菜单。jQuery 是一款广泛使用的 ...

    jQuery 苹果官网导航栏效果代码

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了...通过学习和分析这些代码,你可以更好地理解如何运用jQuery来创建类似苹果官网的导航栏。记得实践并根据自己的需求进行调整,以适应不同的项目和设计要求。

    jquery右侧导航菜单悬浮代码,带返回顶部功能

    本文将详细介绍使用jQuery实现的右侧悬浮导航菜单以及返回顶部的功能。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互,使得开发者能够更高效地创建动态网页。 首先,我们...

    两款jquery下拉导航菜单支持多级的下拉导航菜单代码

    本资源包含两款支持多级下拉的jQuery导航菜单代码,非常适合需要构建层级结构清晰、响应式的网站。 首先,我们来看第一款jQuery下拉导航菜单。这款菜单利用了jQuery的事件监听和DOM操作功能,实现了鼠标悬停时展开...

    jQuery侧边栏滑动导航菜单代码.rar

    jQuery侧边栏滑动导航菜单代码.rar jQuery侧边栏滑动导航菜单代码.rar jQuery侧边栏滑动导航菜单代码.rar jQuery侧边栏滑动导航菜单代码.rar jQuery侧边栏滑动导航菜单代码.rar jQuery侧边栏滑动导航菜单代码.rar ...

    CSS3左侧边栏3D酷炫导航展开效果jquery特效代码.zip

    该资源是一个基于CSS3和jQuery实现的左侧边栏3D酷炫导航展开效果的代码库,适用于企业网站或商城网站的界面设计。这个特效能够为用户带来动态且富有视觉冲击力的浏览体验,提升网站的专业性和吸引力。 首先,我们要...

    jQuery导航条三级下拉菜单代码.zip

    在本主题中,我们关注的是使用jQuery实现的三级下拉菜单代码。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及动画效果,使得创建交互式网页变得更加容易。 一、jQuery简介 jQuery是由John Resig于...

Global site tag (gtag.js) - Google Analytics