水平メニュー

Question

私がthenextwebを閲覧し、トグルボタン

を持って右側に社会的なアイコン横のメニューは、誰がどのように行うのを知っていたことを見たでしたか？

Answer 1

私はあなたがそこから始めることができるように、あなたの参照のためのテキストバージョン（グラフィックスなし）を作成しました。

$('#menu').click(function(){ 
 
\t $('.nav-wrapper').toggleClass('active'); 
 
});

.nav-wrapper { 
 
    list-style: none; 
 
    float: right; 
 
} 
 

 
.nav-wrapper > li { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 
.nav { 
 
    list-style: none; 
 
    margin-right: -115px; 
 
    transition: 0.3s; 
 
} 
 

 
.nav-wrapper.active .nav { 
 
    margin-right: 0; 
 
    transition: 0.3s; 
 
} 
 

 
.nav > li { 
 
    float: left; 
 
    width: 18px; 
 
    margin: 0 5px; 
 
    border: 1px solid red; 
 
} 
 

 
#menu::after { 
 
    display: block; 
 
    content: "OPEN"; 
 
    width: 60px; 
 
    height: 20px; 
 
    cursor: pointer; 
 
} 
 

 
.nav-wrapper.active > #menu::after { 
 
    content: "CLOS" 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<ul class="nav-wrapper"> 
 
    <li> 
 
    <ul id="nav-bar" class="nav"> 
 
     <li>L1</li> 
 
     <li>L2</li> 
 
     <li>L3</li> 
 
     <li>L4</li> 
 
     <li>L5</li> 
 
     <li>L6</li> 
 
    </ul>  
 
    </li> 
 
    <li id="menu"><li> 
 
</ul>

https://jsfiddle.net/zayzw6es/