トグルナビゲーションをページの左側に配置する方法

Question

私はこのページを反応させるために、ページのナビゲーションバーのトグルナビゲーションを作成しました。しかし、ナビゲーションバーは、ページ、私はそれがページの左側に表示されたい。

私の2番目のクエリ： -

私たちは、ブラウザのどの幅でそれを決めることができますどのように、トグルナビゲーションバーが来る必要があることを知ってほしいです。

「フロート：右」私は両方のターゲット上にトグルの

body 
 
{ 
 
\t margin:0; 
 
\t padding:0; 
 
\t width:100%; 
 
} 
 
.navMenu 
 
{ 
 
\t width:100%; 
 
\t background-color:#440000; 
 
} 
 

 
ul.Menu 
 
{ 
 
    list-style-type:none; 
 
\t text-decoration:none; 
 
\t font-size:18px; 
 
\t width:100%; 
 
\t position:relative; \t 
 
\t display:inline-block; 
 
\t margin-top:0px; 
 
\t padding:10px; 
 
\t text-align:center; 
 
\t padding-left:28%; 
 
\t 
 
} 
 

 

 
li.Menu 
 
{ 
 
    display: inline-block; 
 

 
\t 
 
} 
 

 
.list{ 
 
    float:left; 
 
\t margin-left:2%; 
 
} 
 

 
.Listclass 
 
{ 
 
\t color:#942218; 
 
\t text-decoration:none; 
 
} 
 

 
.searchform 
 
{ 
 
\t margin-top: -4px; 
 
} 
 

 
.navbar .brand { 
 
max-height: 50px; 
 
overflow: visible; 
 
padding-top: 0; 
 
padding-bottom: 0; 
 
background-color:white; 
 
} 
 
.navbar a.navbar-brand {padding: 0px 8px 0px;} 
 

 
.navbar-default { 
 
    background-color:white; 
 
    border: none; 
 
} 
 
.navbar-default .navbar-nav > li > a { 
 
    color: blue; 
 
} 
 

 
.navbar-toggle 
 
{ 
 
\t  background-color: white; 
 
    background-image: none; 
 
    /*border: 1px solid black; */ 
 
} 
 

 
.navbar-toggle .icon-bar 
 
{ 
 
\t background-color: black; 
 
} 
 
.Listclass 
 
{ 
 
\t color:#942218; 
 
\t text-decoration:none; 
 
} 
 
.MenuDIV 
 
{ 
 
\t width:70%; 
 
} 
 

 
.form1 
 
{ 
 
\t float:right; 
 
\t margin-top: -75px; 
 
    margin-right: 326px; 
 
} 
 
.navMenu 
 
{ 
 
\t width:100%; 
 
}

<div class="navMenu"> 
 
<nav class="navbar" role="banner"> 
 

 
<div class="navbar-header"> 
 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
<span class="sr-only">Toggle navigation</span> 
 
<span class="icon-bar"></span> 
 
<span class="icon-bar"></span> 
 
<span class="icon-bar"></span> 
 
</button> 
 
</div> 
 
<div class="collapse navbar-collapse navbar-left MenuDIV" style="width:70%"> 
 
<ul class="nav navbar-nav navbar-right Menu"> 
 
    <li class="list"><a class="active" href="#HOME"><img src="http://10.37.4.179/wordpress/wp-content/uploads/2016/07/home-active.png"></a></li> 
 
    <li class="list"><a class="Listclass" href="#Community">COMMUNITY</a></li> 
 
    <li class="list"><a class="Listclass" href="#Board">BOARD</a></li> 
 
    <li class="list"><a class="Listclass" href="#FAQ">FAQ</a></li> 
 
    <li class="list"><a class="Listclass" href="#RESOURES">RESOURES</a></li> 
 
    <li class="list"><a class="Listclass" href="#Contact">CONTACT US</a></li> 
 
</ul> 
 
</div> 
 

 
</nav> 
 
<form class="navbar-form form1" role="search"> 
 
    <div class="input-group add-on"> 
 
     <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> 
 
     <div class="input-group-btn"> 
 
     <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
 
     </div> 
 
    </div> 
 
    </form> 
 

 
</div>

Answer 1

1.in genaralを達成するために助けてくださいCSSプロパティは、あなたが浮かぶようにそれを変更することができますが存在します。その後、左メニューが左側に表示されます 2.トグルメニューの幅を見つけるfirefoxブラウザを押してctrl + shift + mを押すとトグルメニューになるまでサイズが変更されます

Answer 2

私は以下のコードが役に立ちます：

$(function() { 
    $("#openmenu").click(function() { 
     $('#menuleftcontent').animate({ 
     width: "toggle" 
     }); 
    }); 
}); 

Demo