转行学开发，代码100天——2018-03-26
今天是本人写开发记录方面博客的第10天了，不知不觉已经涉及到jQuery框架的学习了。
第一次熬夜写前端代码还是两年前，不过中途放弃了，学的东西也日渐生疏，但今日持续敲代码的过程中，还是能找回一些当年的感觉了，有一些不同的是，如今需要更强的克制和执行，也多了些功利心理。
不多说，今天记录一下通过jQuery实现垂直和水平菜单功能，缺少配图，重点提供实现的思路。
菜单实现一般都是通过ul,li列表实现的，每个菜单项关联一个链接，即a标签。个人觉得垂直布局和水平布局的实现主要有两个方面的工作，一是菜单内容的布局调整，如位置，字体，背景等，即CSS设计部分；二是菜单操作的交互，即通过jQuery实现对菜单内容的HTML和样式CSS部分的操作（修改，动画等）。
本文的功能实现还相对简单，仅作为记录，若能有益于他人，则不甚欣慰。
垂直菜单&水平菜单
HTML
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="mycss.css"> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript" src="myjs.js"></script> </head> <body> <!--垂直菜单--> <ul> <li class="main"> <a href="#">菜单1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> </ul> </li> <li class="main"> <a href="#">菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> </ul> </li> <li class="main"> <a href="#">菜单3</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> </ul> </li> </ul> <!--水平菜单--> <br/><br/><br/><br/> <p>水平菜单</p> <ul> <li class="hmain"> <a href="#">菜单1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> </ul> </li> <li class="hmain"> <a href="#">菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> </ul> </li> <li class="hmain"> <a href="#">菜单3</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> </ul> </li> </ul> </body> </html>
CSS部分：
*{ margin:0; padding: 0; } ul,li { text-decoration: none; } ul { } .main,.hmain { /*可添加背景图片 */ /*background-image: url(); background-repeat: repeat-x;*/ width: 100px; } li { background-color: #eee; } a{ text-decoration: none; padding-left: 20px; width: 80px; padding-top: 3px; padding-bottom: 3px; display: block; } .main a,.hmain a { /*color: white;*/ /*background-image: url(images/collapsed.gif);*/ background-repeat: none; background-position: 3px center; } .main li a,.hmain li a { color: black; background-image: none; } .main ul,.hmain ul { display: none; } .hmain { float: left; margin-right: 3px; }
jQuery实现菜单动作：
$(document).ready(function() { $(".main>a").click(function() { // alert("点击了"); var ulNode = $(this).next("ul"); //方法1 // if (ulNode.css("display")=="none") { // ulNode.css("display","block"); // }else // { // ulNode.css("display","none"); // } //方法2 // if (ulNode.css("display")=="none") { // ulNode.show(); // }else // { // ulNode.hide(); // } //方法3 // ulNode.toggle(1000); //方法4 // if (ulNode.css("display")=="none") { // ulNode.slideDown(500); // }else // { // ulNode.slideUp(); // } //方法5 ulNode.slideToggle(1000); }); $(".hmain").hover(function() { var ulNode =$(this).children("ul"); ulNode.slideDown(); },function() { var ulNode =$(this).children("ul"); ulNode.slideUp(); }); });
至此，就实现了一个简单的菜单效果。可作为日后正式网页设计时的参考或者部分重用。
另：
*本人在写这段CSS样式时，误把.main,.hmain的 100px;属性写到ul样式里，结果是在水平菜单中始终无法实现横排浮动。
此外，由于未设计菜单背景及图片，导致上述的菜单过于简陋（不美观）。
写完今天的记录，抓紧时间学习今天的课程，明天一大早又要出差了。。。