响应式菜单制作

看看效果：

PC端：

移动端：

一、HTML

<div id="demo">
          <span class="icon-menu" id="icon"></span>
         <ul class="nav">
             <li>首页</li>
             <li>前端开发
                     <ul class="submenu">
                         <li>HTML-CSS</li>
                         <li>JQuery</li>
                         <li>JavaScript</li>
                     </ul>
             </li>
             <li>后端开发
                     <ul class="submenu">
                         <li>PHP</li>
                         <li>Python</li>
                         <li>Ruby</li>
                     </ul>
             </li>
             <li>移动开发
                     <ul class="submenu">
                         <li>Android</li>
                         <li>IOS</li>
                     </ul>
             </li>
             <li>编程语言
                     <ul class="submenu">
                         <li>C-C++</li>
                         <li>Java</li>
                     </ul>
             </li>
             <li>业界分享</li>
             <li>开发平台
                     <ul class="submenu">
                         <li>Linux-Vim</li>
                         <li>Git</li>
                     </ul>
             </li>
         </ul>
 </div>

二、CSS

#demo{
      margin: 0 auto;
      padding: 0;
    }
    ul{
        list-style: none;
    }
    ul.nav{
      list-style: none;
      font-family: "Microsoft Yahei"
    }
    ul.nav li{
        height: 20px;
        color: #ffffff;
        cursor: pointer;
        line-height: 20px;
          background-color: #67544D;
          padding: 15px;
    }
    @media screen and (min-width: 844px){
        #demo{
             width: 845px;
        }
        #icon{
            display: none;
        }
        ul.nav>li{
              display: inline-block;
              margin-left: 15px;
              position: relative;
        }
        ul.submenu{
            position: absolute;
            z-index: 99;
            top: 50px;
            left: -20px;
            width: 64px;
            display: none;
            margin-left: 15px
        }
        ul.submenu li{
            width: 100%;
            margin-left: -35px;
            line-height: 100%;
            text-align: center;
        }
    }
    @media screen and (max-width:843px){
        #demo{
            position: relative;
        }
        #icon{
            display: inline-block;
            font-size: 20px;
            position: relative;
        }
        ul.nav{
            width: 100%;
            position: relative;
            top: -18px;
            left: 0;
            display: none;
        }
        ul.nav>li{
              margin-left: -40px;
              position: relative;
            height: auto;
        }
        ul.submenu{
            display:none;
            color: white
        }
        .shownav{
            display: block;
        }
    }

三、js

$(function(){
  $(‘.nav>li‘).each(function()
  {
      $(this).on({
          mouseover:function(){
              $(this).css({backgroundColor:"#48403D",color:"#ACE360"})

.find("ul").slideDown(500).
               find("li").each(function(){
                  $(this).hover(
                      function()
                      {
                          $(this).css({backgroundColor:"#48403D",

color:"#ACE360"});
                      },
                      function(){
                          $(this).css({backgroundColor:"#67544D",

color:"#FFFFFF"});
                      });
              });
          },
          mouseleave:function(){
              $(this).find("ul").css("display","none").stop(true);
          },
          mouseout:function(){
              $(this).css({backgroundColor:"#67544D",

color:"#FFFFFF"});
          }
      });
  });
 /*toggleClass不起作用？？？？？*/
  var count = 1;
  $("#icon").on("click",function(){
      if(count == 1){
          $("ul.nav").css("display","block");
          count++;
      }
      else{
          $("ul.nav").css("display","none");
          count=1;
      }
  })

測试地址：http://test92.sinaapp.com/test/test.html

原文：http://www.ido321.com/1486.html