jquery+css实现响应式菜单效果

移动端：

一、HTML

• 首页
• 前端开发
                      
  • HTML-CSS
  • JQuery
  • JavaScript
• 后端开发
                      
  • PHP
  • Python
  • Ruby
• 移动开发
                      
  • Android
  • IOS
• 编程语言
                      
  • C-C++
  • Java
• 业界分享
• 开发平台
                      
  • Linux-Vim
  • Git

二、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;
      }
  })