HTML导航栏
先看效果(两种,1:自己写样式,写交互,2.用jQueryUI 的menu),如下图
第一种: 第二种:
第一种样式:
然后就开始准备了,单村用js和css也可以写出来,不过既然有jquery我就偷个懒吧
1.去http://jquery.com/download/下载jquery
2.开始写html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 设置编码--> <link rel="stylesheet" type="text/css" href="css/style.css"><!-- 引用css样式--> <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script><!-- 引入jquery--> <script type="text/javascript" src="js/js.js"></script><!--引入自己的js --> <title>菜单测试</title> </head> <body> <ul><!-- 菜单栏基本样式--> <li class="hmain"> <a href="#">菜单1</a> <ul> <li> <a href="#">子菜单1</a> </li> <li> <a href="#">子菜单2</a> </li> </ul> </li> <li class="hmain"> <a href="#">菜单2</a> <ul> <li> <a href="#">子菜单1</a> </li> <li> <a href="#">子菜单2</a> </li> </ul> </li> <li class="hmain"> <a href="#">菜单3</a> <ul> <li> <a href="#">子菜单1</a> </li> <li> <a href="#">子菜单2</a> </li> </ul> </li> </ul> </body> </html>
3.写css样式
ul,li{ list-style: none; /*取消ul,li前面的小点 */ } ul{ padding: 0; /*取消ul的缩进(默认会有一个缩进)*/ margin: 0; } li{ background-color: #eeeeee; } a{ text-decoration: none; /* 取消超链接的下划线*/ padding-left: 20px; display: block; width: 80px; padding-top:3px; padding-bottom: 3px; } .hmain{ background-image: url(../images/title.jpg); /* 设置导航背景*/ background-repeat: repeat-x; /* 设置背景图片的排列方式*/ width: 100px; } .hmain a{ color: red; } .hmain li a{ color: black; } .hmain ul{ display: none; /* 默认隐藏二级菜单栏*/ } .hmain{ float: left; /* 导航定位(水平)*/ margin-right: 2px; }
4到了交互的时候了自己的js,一句话搞定,先找到ul下的a,绑定鼠标滑过事件
$(document).ready(function(){ var mean = $(".hmain>a"); mean.on("mouseenter mouseleave", function(){ var ulNode = $(this).next("ul"); ulNode.toggle("normal"); }); });
初学者,有什么不对的地方请指出,谢谢
第二种样式:
然后就开始准备了,单村用js和css也可以写出来,不过既然有jquery我就偷个懒吧
1.去http://jquery.com/download/下载jquery(需要一个文件jquery-3.1.0.min.js)
去http://jqueryui.com/download/下载jqueryUI(需要两个文件jquery-ui.min.js,jquery-ui.min.css)
2.开始写html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 设置编码--> <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script><!-- 引入jquery--> <script type="text/javascript" src="js/jquery-ui.min.js"></script><!-- 引入jqueryui--> <script type="text/javascript" src="js/js.js"></script><!--引入自己的js --> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"><!-- 引用jqueryUIcss样式--> <link rel="stylesheet" type="text/css" href="css/style.css"><!-- 引用css样式--> <title>菜单测试</title> </head> <body> <ul class="menu"><!-- 菜单栏基本样式--> <li class="hmain"> <a href="#">菜单1</a> <ul> <li> <a href="#">子菜单1</a> </li> <li> <a href="#">子菜单2</a> </li> </ul> </li> <li class="hmain"> <a href="#">菜单2</a> <ul> <li> <a href="#">子菜单1</a> </li> <li> <a href="#">子菜单2< ;/a> </li> </ul> </li> <li class="hmain"> <a href="#">菜单3</a> <ul> <li> <a href="#">子菜单1</a> </li> <li> <a href="#">子菜单2</a> </li> </ul> </li> </ul> </body> </html>
3.写css样式
ul,li{ list-style: none; /*取消ul,li前面的小点 */ } ul{ padding: 0; /*取消ul的缩进(默认会有一个缩进)*/ margin: 0; } li{ background-color: #eeeeee; } a{ text-decoration: none; /* 取消超链接的下划线*/ padding-left: 20px; display: block; width: 80px; padding-top:3px; padding-bottom: 3px; } .hmain{ width: 100px; } .hmain a{ color: red; } .hmain li a{ color: black; } .hmain ul{ display: none; /* 默认隐藏二级菜单栏*/ } .hmain{ float: left; /* 导航定位(水平)*/ margin-right: 2px; }
4.交互
$(document).ready(function(){ var menu = $(".menu"); menu.menu({position:{at: "left bottom"}}); });
很简单啦
WEBGL学习网(WebGLStudy.COM)专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息:
1. 本站部分资源来源于用户上传和网络,如有侵权请邮件联系站长:1218436398@qq.com!我们将尽快处理。
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源打赏售价用于赞助本站提供的服务支出(包括不限服务器、网络带宽等费用支出)!
7.欢迎加QQ群学习交流:549297468 ,或者搜索微信公众号:WebGL学习网
WEBGL学习网 » HTML导航栏
WEBGL学习网 » HTML导航栏