day10—jQuery初步实践，关于菜单

转行学开发，代码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样式里，结果是在水平菜单中始终无法实现横排浮动。

此外，由于未设计菜单背景及图片，导致上述的菜单过于简陋（不美观）。

写完今天的记录，抓紧时间学习今天的课程，明天一大早又要出差了。。。

心未老，即奋不顾身！