Question

我已经在wordpress中开发了一个自定义页面。为了使这个页面响应，我已经为页面的导航栏创建了一个切换导航。但是切换导航栏正好在页面的右侧，我希望它出现在左侧页面的一侧。

我的第二个查询： -

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

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

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

1.in genaral for toggle“float：right”css属性将在那里你可以将它改为float：left然后菜单会在左边， 2.找到切换菜单的宽度firefox浏览器按ctrl + shift + m然后调整大小直到获取切换菜单

Answer 2

我认为以下代码可以帮助您：

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

Demo

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

2 个答案: