响应式菜单制作

绝地灬酷狼 2022-08-07 10:42 195阅读 0赞

看看效果：

PC端：

[![QQ截图20150327215831][QQ_20150327215831]][QQ_20150327215831_QQ_20150327215831]

移动端：

[![QQ截图20150327215915][QQ_20150327215915]][QQ_20150327215915_QQ_20150327215915]

一、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_test92.sinaapp.com_test_test.html]

原文：[http://www.ido321.com/1486.html][http_www.ido321.com_1486.html]

[QQ_20150327215831]: http://www.ido321.com/wp-content/uploads/2015/03/QQ20150327215831_thumb.jpg
[QQ_20150327215831_QQ_20150327215831]: http://www.ido321.com/wp-content/uploads/2015/03/QQ20150327215831.jpg
[QQ_20150327215915]: http://www.ido321.com/wp-content/uploads/2015/03/QQ20150327215915_thumb.jpg
[QQ_20150327215915_QQ_20150327215915]: http://www.ido321.com/wp-content/uploads/2015/03/QQ20150327215915.jpg
[http_test92.sinaapp.com_test_test.html]: http://test92.sinaapp.com/test/test.html
[http_www.ido321.com_1486.html]: http://www.ido321.com/1486.html