使用Jquery的響應式下拉導航

Question

我是Jquery的新手。 我試圖建立自適應網站，所以從導航部分開始。 我寫了一些導航代碼，它的效果很好，導航嵌套items.But問題是，每當窗口的大小，導航被摺疊爲'菜單'的導航按鈕，當我點擊導航項目它重疊其他導航項目。 此外，所選的導航項目沒有關閉，只要我選擇不同的導航項目。

小提琴 - https://jsfiddle.net/8h8q7y8z/

這裏是我的代碼

HTML

<div class="navbar"> 
    <span class="nav-btn"></span> 
    <div class="container"> 

     <div id="brand"> 
      <img src="Img/logo1.png" class="visible" /> 
      <img src="Img/smallLogo.png" class="hidden" /> 
     </div> 
     <nav> 
      <ul> 
       <li> 
        <a href="#"> 
         <img src="Img/home2.png" height="20" /></a> 
       </li> 
       <li><a href="#">HOTEL</a></li> 
       <li><a href="#">TOURS</a></li> 
       <li class="dropdown"><a href="#">EUROPE MAIL</a><img src="Img/arrowDown.png" /> 
        <ul class="dditems"> 
         <li><a href="EuropeRail.html">Europe Rail</a></li> 
         <li><a href="EuropeRailWorld.html">Europe Rail World</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"><a href="#">VACATIONS</a><img src="Img/arrowDown.png" /> 
        <ul class="dditems"> 
         <li><a href="Vocation.html">Cheap Caribbean</a></li> 
         <li><a href="Hurtigruten.html">Hurtigruten</a></li> 
         <li><a href="Contiki.html">Contiki</a></li> 
         <li><a href="Sandals.html">Sandals</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"><a href="#">HOME RENTALS</a><img src="Img/arrowDown.png" /> 
        <ul class="dditems"> 
         <li><a href="HomeRental.html">Vacation Home Rentals</a></li> 
         <li><a href="HomeExchange.html">Home For Exchange</a></li> 
         <li><a href="HomeAway.html">Home Away Europe</a></li> 
        </ul> 
       </li> 
       <li><a href="#">CRUISE</a></li> 
       <li><a href="#">INSURANCE</a></li> 
       <li class="dropdown"><a href="#">ATTRACTION</a><img src="Img/arrowDown.png" /> 
        <ul class="dditems"> 
         <li><a href="CityPass.html">City Pass</a></li> 
         <li><a href="StarlineTours.html">Starline Tours</a></li> 
         <li><a href="DublinPass.html">Dublin Pass</a></li> 
         <li><a href="NewyorkPass.html">New york Pass</a></li> 
         <li><a href="TrustedTours.html">Trusted Tours</a></li> 
         <li><a href="PariscityVision.html">Paris city Vision</a></li> 
         <li><a href="LondonPass.html">London Pass</a></li> 
         <li><a href="GrayLine.html">Gray Line</a></li> 
         <li><a href="SmartDestinations.html">Smart Destinations</a></li> 
         <li><a href="CityExperts.html">City Experts NY</a></li> 
         <li><a href="Conciergerie.html">Conciergerie</a></li> 
         <li><a href="Isango.html">isango</a></li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 
    </div> 
</div> 

CSS

html { 
     font-family: sans-serif; 
     -webkit-text-size-adjust: 100%; 
     -ms-text-size-adjust: 100%; 
    } 

    * { 
     margin: 0px; 
     padding: 0px; 
    } 

    .container { 
     padding-right: 25px; 
     padding-left: 100px; 
     margin-right: auto; 
     margin-left: auto; 
     text-align: center; 
    } 


    .navbar { 
     background: #333333; 
     height: 50px; 
     position: fixed; 
     width: 100%; 
     margin: 0 auto; 
    } 

    #brand { 
     float: left; 
     padding-right: 30px; 
     padding-top: 10px; 
    } 

    .hidden { 
     display: none; 
    } 

    .visible { 
     display: block; 
    } 

    nav { 
     width: 100%; 
     text-align: center; 
    } 

     nav ul { 
      float: left; 
      line-height: 50px; 
      padding: 0px; 
      margin: 0px; 
      position: relative; 
     } 

      nav ul li { 
       display: inline-block; 
       list-style-type: none; 
      } 

       nav ul li a { 
        text-decoration: none; 
        padding: 10px; 
        color: #9d9d9d; 
        font-size: 14px; 
       } 

       nav ul li:hover { 
        background-color: #333; 
       } 

       nav ul li a:hover { 
        color: #fff; 
       } 

       nav ul li:hover ul { 
        display: block; 
       } 

      nav ul ul { 
       display: none; 
       position: absolute; 
       background-color: #333; 
       min-width: 150px; 
      } 

       nav ul ul li { 
        display: block; 
        line-height: 25px; 
        text-align: left; 
       } 

    .dropdown img { 
     display: none; 
    } 

    @media only screen and (max-width: 985px) { 

     .container { 
      padding-left: 10px; 
     } 

     .nav-btn { 
      position: relative; 
      float: right; 
      padding: 4px 5px; 
      margin-top: 12px; 
      margin-right: 15px; 
      margin-bottom: 8px; 
      background-color: #fff; 
      border: 1px solid #fff; 
      border-radius: 4px; 
      cursor: pointer; 
     } 

      .nav-btn:hover { 
       color: #9d9d9d; 
       background-color: #fff; 
      } 

      .nav-btn:before { 
       content: "Menu"; 
      } 

     .hidden { 
      display: block; 
     } 

     .visible { 
      display: none; 
     } 

     nav { 
      float: right; 
      display: none; 
      background-color: #fff; 
     } 


      nav ul { 
       text-align: left; 
       float: right; 
       line-height: 25px; 
       padding: 5px; 
      } 

       nav ul li { 
        display: block; 
        border-bottom: 1px solid #968a8a; 
        cursor: pointer; 
       } 

        nav ul li:hover { 
         background-color: #968a8a; 
        } 

        nav ul li a { 
         color: rgb(0,0,0); 
        } 

        nav ul li:hover ul { 
         display: none; 
        } 


     .dropdown img { 
      display: block; 
      float: right; 
      margin-top: 4px; 
      margin-right: 4px; 
     } 

     ul .dditems { 
      width: 100%; 
      background-color: #968a8a; 
     } 
    } 

    @media only screen and (max-width: 1094px) { 
     .container { 
      padding-left: 10px; 
     } 

     #brand { 
      padding-right: 10px; 
     } 


     /*.hidden { 
      display: block; 
     } 

     .visible { 
      display: none; 
     }*/ 
    } 

JS

$(document).ready(function() { 
     $("span.nav-btn").click(function() { 
      $("nav").slideToggle(); 
     }); 
    }); 
    $(document).ready(function() { 
     var mainmenu = $(this).next('ul'); 
     $(".dropdown").click(function() { 
      $(this).children(".dditems").slideToggle(); 
     }); 
    }); 

Answer 1

改變你的CSS本 - 所有我做的是改變absolute位置relative和給出的菜單固定寬度，你當然可以改變的：

html { 
    font-family: sans-serif; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
} 

* { 
    margin: 0px; 
    padding: 0px; 
} 

.container { 
    padding-right: 25px; 
    padding-left: 100px; 
    margin-right: auto; 
    margin-left: auto; 
    text-align: center; 
} 

.navbar { 
    background: #333333; 
    height: 50px; 
    position: fixed; 
    width: 100%; 
    margin: 0 auto; 
} 

#brand { 
    float: left; 
    padding-right: 30px; 
    padding-top: 10px; 
} 

.hidden { 
    display: none; 
} 

.visible { 
    display: block; 
} 

nav { 
    width: 100%; 
    text-align: center; 
} 

nav ul { 
    float: left; 
    line-height: 50px; 
    padding: 0px; 
    margin: 0px; 
    position: relative; 
} 

nav ul li { 
    display: inline-block; 
    list-style-type: none; 
} 

nav ul li a { 
    text-decoration: none; 
    padding: 10px; 
    color: #9d9d9d; 
    font-size: 14px; 
} 

nav ul li:hover { 
    background-color: #333; 
} 

nav ul li a:hover { 
    color: #fff; 
} 

nav ul li:hover ul { 
    display: block; 
} 

nav ul ul { 
    display: none; 
    position: relative; 
    background-color: #333; 
        /*min-width: 150px;*/; 
} 

nav ul ul li { 
    display: block; 
    line-height: 25px; 
    text-align: left; 
} 

.dropdown img { 
    display: none; 
} 

@media only screen and (max-width: 985px) { 

    .container { 
    padding-left: 10px; 
    } 

    .nav-btn { 
    position: relative; 
    float: right; 
    padding: 4px 5px; 
    margin-top: 12px; 
    margin-right: 15px; 
    margin-bottom: 8px; 
    background-color: #fff; 
    border: 1px solid #fff; 
    border-radius: 4px; 
    cursor: pointer; 
    } 

    .nav-btn:hover { 
    color: #9d9d9d; 
    background-color: #fff; 
    } 

    .nav-btn:before { 
    content: "Menu"; 
    } 

    .hidden { 
    display: block; 
    } 

    .visible { 
    display: none; 
    } 

    nav { 
    float: right; 
    display: none; 
    background-color: #fff; 
    } 

    nav ul { 
    text-align: left; 
    float: right; 
    line-height: 25px; 
    padding: 5px; 
    width: 150px; 
    } 

    nav ul li { 
    display: block; 
    border-bottom: 1px solid #968a8a; 
    cursor: pointer; 
    } 

    nav ul li:hover { 
    background-color: #968a8a; 
    } 

    nav ul li a { 
    color: rgb(0,0,0); 
    } 

    nav ul li:hover ul { 
    display: none; 
    } 

    .dropdown img { 
    display: block; 
    float: right; 
    margin-top: 4px; 
    margin-right: 4px; 
    } 

    ul .dditems { 
    width: 100%; 
    background-color: #968a8a; 
    } 
} 

@media only screen and (max-width: 1094px) { 
    .container { 
    padding-left: 10px; 
    } 

    #brand { 
    padding-right: 10px; 
    } 
}