Making a responsive navigation bar with a search b

2019-09-18 18:33发布

站内问答 / jQuery
932 2 4

I am trying to make a responsive navigation bar using bootstrap. I want to build like http://wordpress.org/support/topic/want-to-move-search-option-from-header-to-navigation-bar . .

But the search button don't go to the right and when collapsed the tabs split and move to the line below. At the place of Download Wordpress button I want LogIn and SignUp buttons. On collapsing the brand name, search button and the bars for opening the menu should be shown in same line.

Can somebody please tell how to do it? 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;
    }
}

2条回答
贼婆χ
2楼-- · 2019-09-18 19:14

I drew up this example for you, this is what I meant by keeping it simple, Feel free to use it and edit for mobile using css3 media queries. p.s you can also use:

position:absolue;right:7px;

for the menu toggle button on the right for mobile and you can also use:

position:absolue;left:7px;

for the ul on the left, Good luck - 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>
查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
3楼-- · 2019-09-18 19:23

I don't really understand if your search-input should be visible in xs view but here is something working :

Js Fidlle : http://jsfiddle.net/8hrnkbaL/1/

The first problem in your fiddle was that bootstrap was loaded before jQuery, but jQuery must be load in first...

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)