如何將切換導航在頁面的左側

我已經在wordpress中開發了一個自定義頁面。爲了使這個頁面響應，我創建了一個頁面導航欄的切換導航。但切換導航欄來到右側該頁面，我希望它出現在頁面的左側。如何將切換導航在頁面的左側

我的第二個查詢： -

我想知道我們如何決定在其瀏覽器的寬度，撥動導航欄應該來。

請幫我實現上述兩個目標

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>

來源

2016-07-13 Arpit Gupta

我們可以看一下你的代碼？ – Yaron

我們需要知道您爲第一個查詢所做的工作，您的頁面的外觀以及頁面的外觀。代碼會幫助很多 – Relisora

我已經添加了我的代碼。請看看這個。 –

1.in genaral用於切換「浮動：權利」 CSS屬性將在那裏你可以改變它浮動：左，那麼菜單將左側， 2.找到切換菜單的寬度firefox瀏覽器按ctrl + shift + m然後調整直到獲取切換菜單

來源

2016-07-13 06:50:45

您好，先生，我已經添加了我的代碼。請好好看看這個，並建議我做了什麼改變 –

http://jsfiddle.net/YogeshDV/5dGA8/317/看到這個，並告訴我是否正確 –

https://jsfiddle.net/adminsunil/t6gq52cm/嘗試這一個也 –

我覺得下面的代碼可以幫助你：

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

Demo

來源

2016-07-13 06:58:05

如何將切換導航在頁面的左側

回答

相關問題