使用搜索按鈕製作響應式導航欄

我正在嘗試使用bootstrap製作響應式導航欄。我想建立像http://wordpress.org/support/topic/want-to-move-search-option-from-header-to-navigation-bar。。使用搜索按鈕製作響應式導航欄

但是，搜索按鈕不會向右移動，摺疊時，選項卡會分裂並移動到下面一行。在下載Wordpress按鈕的地方，我需要LogIn和SignUp按鈕。在摺疊品牌名稱時，搜索按鈕和用於打開菜單的欄應顯示在同一行中。

有人可以告訴如何去做嗎？ See my code

  <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <a class="navbar-brand" href="#">Brand Name</a> 

       <form class="navbar-form navbar-right" style="float: right;" role="search"> 
        <input type="text" class="form-control" placeholder="Search"> 
       </form> 
      </div> 

      <div style="clear:both"></div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Highlights</a></li> 
        <li><a href="#">Test Yourself</a></li> 
        <li><a href="#">Interesting Questions</a></li> 
        <li><a href="#">Ask Queries</a></li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">SignUp</a></li> 
        <li><a href="#">LogIn</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

.navbar { 
    min-height: 120px; 
} 

.navbar .container { 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

.navbar-nav>li>a { 
    text-transform: uppercase; 
    font-family: "jokerman"; 
    font-size: 16px; 
} 

@media (min-width: 768px) { 
    .navbar-nav { 
     margin: 0 auto; 
     display: table; 
     table-layout: fixed; 
     float: none; 
    } 
}

來源

2014-09-10 Aman

是否有人在回答問題？ – Aman 2014-09-10 15:09:05

你能展示它在全景中的樣子嗎 – Aman 2014-09-10 15:12:22

我真的不明白，如果你search-input應該是可見的XS查看，但這裏是一些工作：

的js Fidlle：http://jsfiddle.net/8hrnkbaL/1/

你的小提琴的第一個問題是靴子陷阱的jQuery之前加載，但jQuery的必須在第一負載...

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 

     <div class="container"> 

      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <a class="navbar-brand" href="#">Brand Name</a> 
      </div> 

      </div> 

      <div style="clear:both"></div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Highlights</a></li> 
        <li><a href="#">Test Yourself</a></li> 
        <li><a href="#">Interesting Questions</a></li> 
        <li><a href="#">Ask Queries</a></li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">SignUp</a></li> 
        <li><a href="#">LogIn</a></li> 
       </ul> 
       <form class="navbar-form navbar-right" role="search"> 
          <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"/> 
    </div> 

       </form> 
      </div> 
     </div> 
    </nav>

來源

2014-09-10 18:40:46 pbenard

真的很棒先生，但我看起來像這樣http://blog.teamtreehouse.com/how-to-build-a-three-line-drop-down-menu-for -a-responsive-website-in-jquery – Aman 2014-09-10 19:19:29

搜索按鈕應該在頂部而不是在底部 – Aman 2014-09-10 19:20:25

你還在使用它嗎？ – Aman 2014-09-10 19:42:02

我畫了這個例子給你，這就是我的意思通過保持簡單，隨意使用它並使用css3媒體查詢編輯移動版。 PS你也可以使用：

position:absolue;right:7px;

的菜單切換按鈕上移動的權利，你也可以使用：

position:absolue;left:7px;

左側，祝你好運了UL - Millzie：）

<html> 
<head> 
<title>My menu V.1</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function($){ 
    $('.menu-right').click(function(){ 
    var animationTime = 800; 
    if($('.menu').css('height') == '60px'){ 
    $('.menu').animate({'height':'80px'}, animationTime, 'linear'); 
    }else if($('.menu').css('height') == '80px'){ 
    $('.menu').animate({'height':'60px'}, animationTime, 'linear'); 
    } 
    }); 
}); 
</script> 
<style type="text/css"> 
*{margin:0;padding:0;border:0;border-radius:0;font-family:sans;} 
div.menu{width:100%;height:60px;background-color:#660033;overflow:hidden;} 
ul.menu-ul{float:left;padding-left:7px;} 
li.menu-li{display:inline;list-style:none;font-size:15px;line-height:60px;margin-right:7px;} 
li.menu-li:hover{border-bottom:2px solid #FFFFFF;color:#FFFFFF;} 
div.menu-right{float:right;line-height:60px;font-size:15px;margin-right:7px;} 
div.menu-right:hover{color:#FFFFFF;} 
/*search form*/ 
input.search{width:900px;height:20px;margin-top:-3px;margin-left:7px;background-color:#FFFFFF;} 
input.search-button{width:70px;height:20px;margin-top:-3px;margin-left:4px;background-color:#FFFFFF;} 
</style> 
</head> 
<body> 
<div class="menu"> 
    <ul class="menu-ul"> 
    <li class="menu-li">Menu item one</li> 
    <li class="menu-li">Menu item two</li> 
    <li class="menu-li">Menu item three</li> 
    <li class="menu-li">Menu item four</li> 
    <li class="menu-li">Menu item five</li> 
    </ul> 
    <div class="menu-right">Search</div> 
    <form> 
    <input type="text" class="search" value="search for something" /> 
    <input type="submit" class="search-button" value="search" /> 
    </form> 
</div> 
</body> 
</html>

來源

2014-09-10 20:21:44 Millzie

使用搜索按鈕製作響應式導航欄

回答

相關問題