当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery实现简单下拉导航效果

jQuery实现下拉导航的代码整理

  • 发布时间:
  • 作者:码农之家
  • 点击:171

这篇文章主要知识点是关于jQuery、下拉导航、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

锋利的jQuery
锋利的jQuery全书第2版
  • 类型:jQuery大小:194.9 MB格式:PDF作者:单东林 张晓菲 魏
立即下载

jQuery实现简单下拉导航效果

本文实例讲述了jQuery实现简单下拉导航效果。分享给大家供大家参考。具体如下:

这里粗略做一款基于jquery的下拉导航菜单效果,我觉得挺不错,虽然没有怎么美化,但是代码易懂,另外修补的空间也比较大,相信对学习CSS以及jquery的朋友有不小的帮助。

运行效果截图如下:

jQuery实现简单下拉导航效果

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-xl-down-show-nav-codes/

具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery下拉导航</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $('.nav').children("li:has(ul)").hover(
function(){
 $(this).children("ul").slideDown();
 },
 function(){
  $(this).children("ul").hide();
 }
 );
 });
 </script>
 <style type="text/css">
  *{margin:0;padding:0;}
  .nav {margin:200px;list-style-type:none;}
  .nav li {position:relative;float:left;margin-right:10px;}
  .nav li ul {display:none;position:absolute;top:20px;left:0;list-style-type:none;}
  .nav li ul li {padding:2px 0;}
 </style>
</head>
<body>
 <ul class="nav">
 <li><a href="#">首页</a>
 </li>
 <li>
 <a href="#">链接</a>
 <ul>
  <li><a href="#">aaa</a></li>
  <li><a href="#">bbb</a></li>
  <li><a href="#">ccc</a></li>
  <li><a href="#">ddd</a></li>
 </ul>
 </li>
 <li>
 <a href="#">相册</a>
 <ul>
  <li><a href="#">11</a></li>
  <li><a href="#">22</a></li>
  <li><a href="#">33</a></li>
  <li><a href="#">44</a></li>
 </ul>
 </li>
 <li>
 <a href="#">博客</a>
 <ul>
  <li><a href="#">AA</a></li>
  <li><a href="#">BB</a></li>
  <li><a href="#">CC</a></li>
  <li><a href="#">DD</a></li>
 </ul>
 </li>
 <li>
 <a href="#">关于</a>
 </li>
 <div ></div>
</ul>
</body>
</html>

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 简介jquery 实现滚动条下拉时无限加载
  • jQuery实现可输入搜索文字的下拉框实例代码
  • 如何解决jQuery下拉框select设宽度时IE 6/7/8下option超出显示不全
  • jQuery 相关电子书
    学习笔记
    网友NO.488134

    jquery实现的蓝色二级导航条效果代码

    本文实例讲述了jquery实现的蓝色二级导航条效果代码。分享给大家供大家参考。具体如下: 这是一款网站导航条效果代码,菜单最多可支持两级,适合较多类型的网站使用,不喜欢蓝色的可自己修改成其它颜色,整体效果不错,挺简单的网站导航。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blue-2level-nav-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.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312"titlecss+jquery打造二级横向菜单/titlestyle type="text/css" /#droplinebar {overflow: hidden;}.droplinebar ul{margin: 0;padding: 0;float: left;width: 100%;font: bold 14px Arial, Helvetica, sans-serif,微软雅黑;text-align:center;background: #006b96 url(images/blueactive.gif) center center r……

    网友NO.589091

    jquery实现导航菜单伸缩效果

    本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果。分享给大家供大家参考。具体如下: 这里演示基于jquery打造的向下展开的多级导航条效果,纵向垂直排列,风格非常的简洁,鼠标点击时候展开菜单的二级项,再次点击的时候又向上合拢,平时只显示一级菜单,二级菜单是隐藏不显示的,代码简洁,包括了完整的JS、css和jquery部分。 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-hidden-style-menu-codes/ 具体代码如下: htmlheadtitle可折叠展开的导航条/titlestylebody{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:\5b8b\4f53,Arial Narrow;background:#fff;}form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}input,select{font-size:12px;line-height:16px;}img{border:0;}ul,li{list-style-type:none;}a {color:#00007F;text-decoration:none;}a:hover {color:#bd0a01;text-decoration:underlin……

    网友NO.509474

    jQuery实现简单的列表式导航菜单效果代码

    本文实例讲述了jQuery实现简单的列表式导航菜单效果代码。分享给大家供大家参考。具体如下: 这里使用jQuery实现简单的列表式导航菜单,是根据网上的一个教程,边看边写的,经过了修正,拷贝代码即可使用。主要实现包括三个部分,一是CSS、二是引入jQuery、三是编写JS代码进行jQuery控件。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/ 具体代码如下: htmlheadtitlejQuery实现简单的列表导航菜单/titlescript type='text/javascript' src='jquery-1.6.2.min.js'/scriptstyle type="text/css"body{font-size:13px}ul,li{list-style-type:none;padding:0px;margin:0px}.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2} .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc} .content{padding-top:10px;clear:left} a{text-decoration:none;color:#666;padding:10px}.optnFocus{background-color:#fff;fon……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com