这篇文章主要知识点是关于jQuery、下拉导航、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书
本文实例讲述了jQuery实现简单下拉导航效果。分享给大家供大家参考。具体如下:
这里粗略做一款基于jquery的下拉导航菜单效果,我觉得挺不错,虽然没有怎么美化,但是代码易懂,另外修补的空间也比较大,相信对学习CSS以及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的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。
Copyright 2018-2020 www.xz577.com 码农之家
版权投诉 / 书籍推广 / 赞助:520161757@qq.com
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……
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……
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……