如何在页面左侧放置切换导航

Question

我在 wordpress 中开发了一个自定义页面。为了使该页面具有响应性，我为 page.But 的导航栏创建了一个切换导航，切换导航栏位于页面右侧，我希望它出现在页面左侧。

我的第二个查询：-

我想知道我们如何决定在浏览器的哪个宽度时，切换导航栏应该出现。

请帮助我实现以上两个目标

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

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


li.Menu
{
    display: inline-block;

 
}

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

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

.searchform
{
 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
{
     background-color: white;
    background-image: none;
    /*border: 1px solid black; */
}

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

.form1
{
 float:right;
 margin-top: -75px;
    margin-right: 326px;
}
.navMenu
{
 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 for toggle "float:right" css 属性将在那里，您可以将其更改为 float:left 然后菜单将出现在左侧， 2.to 找到切换菜单的宽度 firefox 浏览器按 ctrl+shift+m 然后调整大小直到得到切换菜单

Answer 2

我认为下面的代码对您有帮助：

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

Demo

如何在页面左侧放置切换导航

How to Put Toggle Navigation in Left Side of the page

css

wordpress

responsive