メニューバーのサイズを変更している間にメニューバーが表示される

Question

サイズ変更時にメニューが切り詰められるようにHTMLページをコード化しようとしています。このページのメニューのようなメニューを作成したい場合はどうすればいいですか?? http://www.templatemonster.com/demo/58695.html

Answer 1

私はウェブサイトでそのメニューのようなメニューを作成し、

HTML：

<div class="menu"> 
    <i class='theIcon'></i> 
    <ul> 
    <li> <a href="#"> Home </a> </li> 
    <li> <a href="#"> About </a> </li> 
    <li> <a href="#"> Services </a> </li> 
    <li> <a href="#"> Blog </a> </li> 
    <li> <a href="#"> Gallery </a> </li> 
    <li> <a href="#"> Contacts </a> </li> 
    </ul> 
</div> 

スタイル：

.menu{ 
    text-align:center; 
    overflow:hidden; 
} 
.menu .theIcon{ 
    display: inline-block; 
    width: 20px; 
    height: 8px; 
    position: relative; 
    cursor: pointer; 
    border-top: 2px solid #000; 
    border-bottom: 2px solid #000; 
} 
.menu .theIcon:before{ 
    content: ''; 
    width: 100%; 
    height: 2px; 
    background: black; 
    position: absolute; 
    top: 3px; 
    left: 0; 
} 
.menu ul{ 
    float:right; 
    margin:0; 
    padding:0; 
    display:none; 
    position: absolute; 
    top: 40px; 
    right: 5%; 
    left: 5%; 
    background: #CFD8DC; 
    text-align:left; 
} 
.menu ul li{ 
    list-style:none; 
} 
.menu ul li a{ 
    padding:10px; 
    display:block; 
} 

@media only screen and (min-width: 769px) { 
    .menu .theIcon{ 
     display:none; 
    } 
    .menu ul{ 
     position:static; 
    width:auto; 
     display:block !important; 
    background:none; 
    } 
    .menu ul li{ 
    float:left; 
    } 
    .menu ul li a{ 
    padding:0 10px; 
    } 
} 

とスクリプト：ここ

$('.menu .theIcon').click(function(){ 
    $(this).next('ul').fadeToggle(300); 
}); 

デモ： https://jsfiddle.net/IA7medd/o89pn61t/