折りたたみ可能なサイドバー/ナビゲーションメニュー

Question

私はウェブサイトをコーディングしており、その上にナビゲーションバーがあり、左側にサイドバーがあります。私はこのにこれをFiddleにしたいと思います。 CSS、JQuery、JavaScript、Bootstrapを使用できます。アイコンをクリックすると、サイドバーが右にドラッグされます。もう一度クリックすると、左に倒れます。

<ul id="navbar"> 
    <li class="title" id="sidebar_switch"><i class="fa fa-bars" aria-  hidden="true"></i></li> 
    <li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li> 
    <li class="title">Title</li> 
</ul> 

Answer 1

CSS3 translateを使用してコードに基づいて、以下のソリューションを見てください。

HTML：

<div class="sidebar"> 
    <p> 
    This sidebar goes all screen down, and if you scroll the webpage, the sidebar stays at the same place everytime, the scro 
    </p> 
</div> 
<div class="content"> 
    <ul id="navbar"> 
    <li class="title" id="sidebar_switch"><i class="fa fa-bars" aria-hidden="true"></i></li> 
    <li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li> 
    <li class="title">Title</li> 
</ul> 
    <div class="main"> 
    aaaaaaaaaa 
    </div> 
</div> 

はCSS：

body { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    font-family: sans-serif; 
    overflow: hidden; 
} 

a { 
    text-decoration: none; 
} 

.title { 
    float: left; 
    display: block; 
    padding: 14px 16px; 
} 

#navbar { 
    font-weight: bold; 
    text-align: center; 
    float: left; 
    background-color: #333; 
    color: white; 
    list-style-type: none; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

.sidebar{ 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:100%; 
    color:red; 

} 

.slide{ 
    -webkit-transform: translate3d(25%,0,0); 
} 

.content{ 
    width:100%; 
    height: 30em; 
    position:absolute; 
    left:0px; 
    top:0px; 
    background: white; 
    -webkit-transition:all .2s linear; 
} 

.content .slide{ 
    -webkit-transform: translate3d(25%,0,0); 
} 

i{ 
    cursor: pointer; 
} 

JS：

$('i').click(function(){ 
    $('.content').toggleClass('slide'); 
}); 

JS Fiddle Demo