你如何編寫響應菜單？

Question

我正在嘗試做這個響應式菜單。

cuppcomputing

在桌面上的版本，它會顯示整個面板時，它滿足最大寬度：600像素（平板電腦和手機大小）。它只顯示標題，然後當你點擊它時，它會顯示菜單內部。如果你調整瀏覽器的大小，你可以回到桌面版和手機版。我不想使用插件。

我確實嘗試過桌面版本，它的工作原理。我不知道如何使它響應。當我的斷點是600px，然後點擊不同的.menuCol h2時，它將顯示並隱藏。當我的斷點大於600像素（當我調整瀏覽器的大小時），某些.menuList是隱藏的。

jsFiddle

function menuToggle() { 
 
    $('#menuBtn').click(function() { 
 
    var menuBtn = $('#menuBtn'); 
 
    var menuInner = $('.menuInner'); 
 

 
    if ($(menuInner).is(':hidden')) { 
 
     $(menuBtn).text('close'); 
 
    } else { 
 
     $(menuBtn).text('menu'); 
 
    } 
 

 
    $(menuInner).fadeToggle(200); 
 
    }); 
 
} 
 

 
menuToggle(); 
 

 

 
function menuMobile() { 
 
    $(".menuCol h2").click(function() { 
 

 
    $(".menuList").slideUp(); 
 

 
    if (!$(this).next().is(":visible")) { 
 
     $(this).next().slideDown(); 
 
    } 
 
    }); 
 

 
} 
 

 

 
menuMobile();

body { 
 
    font-size: 13px; 
 
    margin-top: 80px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #434141; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
#toggleMenu { 
 
    text-align: center; 
 
    max-width: 1000px; 
 
    margin: 0 auto; 
 
} 
 
#menuBtn { 
 
    background-color: #fa7361; 
 
    text-transform: uppercase; 
 
    font-size: 15px; 
 
    color: #434141; 
 
    padding: 2px 6px; 
 
    margin-bottom: 24px; 
 
    display: inline-block; 
 
} 
 
.menuInner { 
 
    text-align: left; 
 
    background-color: #cce9ec; 
 
    padding: 5%; 
 
    overflow: hidden; 
 
} 
 
.menuInner .menuCol { 
 
    margin-bottom: 0; 
 
    width: 22.5%; 
 
    float: left; 
 
} 
 
.menuInner .menuCol h2 { 
 
    font-size: 15px; 
 
    text-transform: uppercase; 
 
    margin-bottom: 20px; 
 
} 
 
.menuInner li { 
 
    margin-bottom: 8px; 
 
    margin-right: 3.3%; 
 
} 
 
.menuInner li:last-child { 
 
    margin-bottom: 0; 
 
    margin-right: 0; 
 
} 
 
.menuList { 
 
    display: block; 
 
} 
 
.menuList a:hover { 
 
    color: #fa7361; 
 
    border-bottom: 1px dotted #fa7361; 
 
} 
 
@media (max-width: 600px) { 
 
    .menuInner .menuCol { 
 
    float: none; 
 
    width: 100%; 
 
    text-align: center; 
 
    } 
 
    .menuInner .menuCol h2 { 
 
    cursor: pointer; 
 
    } 
 
    .menuInner .menuCol h2:hover { 
 
    display: inline-block; 
 
    color: #fa7361; 
 
    border-bottom: 1px dotted #fa7361; 
 
    } 
 
    .menuCol:last-child h2 { 
 
    margin-bottom: 0; 
 
    } 
 
    .menuList { 
 
    display: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="toggleMenu"> 
 
    <a id="menuBtn" href="#">menu</a> 
 
    <ul class="menuInner"> 
 
    <li class="menuCol"> 
 
     <h2>Living Room</h2> 
 
     <ul class="menuList"> 
 
     <li><a href="#">sofas & loveseats</a> 
 
     </li> 
 
     <li><a href="#">chairs</a> 
 
     </li> 
 
     <li><a href="#">benches</a> 
 
     </li> 
 
     <li><a href="#">bookcases & shelving</a> 
 
     </li> 
 
     <li><a href="#">all living room</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="menuCol"> 
 
     <h2>Bedroom</h2> 
 
     <ul class="menuList"> 
 
     <li><a href="#">beds</a> 
 
     </li> 
 
     <li><a href="#">mattresses</a> 
 
     </li> 
 
     <li><a href="#">daybeds & sleepers</a> 
 
     </li> 
 
     <li><a href="#">floor mirrors</a> 
 
     </li> 
 
     <li><a href="#">all bedroom</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="menuCol"> 
 
     <h2>Home Office</h2> 
 
     <ul class="menuList"> 
 
     <li><a href="#">desks</a> 
 
     </li> 
 
     <li><a href="#">desk chairs</a> 
 
     </li> 
 
     <li><a href="#">office storage</a> 
 
     </li> 
 
     <li><a href="#">display ledges</a> 
 
     </li> 
 
     <li><a href="#">all office</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="menuCol"> 
 
     <h2>Dining Room</h2> 
 
     <ul class="menuList"> 
 
     <li><a href="#">dining tables</a> 
 
     </li> 
 
     <li><a href="#">dining chairs</a> 
 
     </li> 
 
     <li><a href="#">bar & counter stools</a> 
 
     </li> 
 
     <li><a href="#">dining benches</a> 
 
     </li> 
 
     <li><a href="#">all dining</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

您需要使用媒體查詢和調整你的CSS，使其與手機或平板電腦使用。研究媒體查詢。

Answer 2

#toggleMenu { text-align: center; width: 1000px; margin: 0 auto; } 

#menuBtn { background-color: #fa7361; text-transform: uppercase; font-size: 15px; color: #434141; padding: 2px 6px; margin-bottom: 24px; display: inline-block; } 

.menuInner { text-align: left; background-color: #cce9ec; padding: 5%; overflow: hidden; } 
.menuInner .menuCol { margin-bottom: 0; width: 22.5%; float: left; } 
.menuInner .menuCol h2 { font-size: 15px; text-transform: uppercase; margin-bottom: 20px; } 
.menuInner li { margin-bottom: 8px; margin-right: 3.3%; } 
.menuInner li:last-child { margin-bottom: 0; margin-right: 0; } 

.menuList { display: block; } 
.menuList a:hover { color: #fa7361; border-bottom: 1px dotted #fa7361; } 

@media only screen and (max-width: 800px) { #toggleMenu { width: 100%; } 
    .menuInner .menuCol { float: none; width: 100%; text-align: center; } 
    .menuInner .menuCol h2 { cursor: pointer; } 
    .menuInner .menuCol h2:hover { display: inline-block; color: #fa7361; border-bottom: 1px dotted #fa7361; } 
    .menuCol:last-child h2 { margin-bottom: 0; } 
    .menuList { display: none; } }