Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

bootstrap amazon style search bar

Tags:

css

twitter-bootstrap

twitter-bootstrap-3

navbar

searchbar

Is there an easy way to do something similar to this in bootstrap? A search bar with a drop down selector for a different category? I've been looking through their documentation, something similar to this but with the dropdown being attached to the search bar is what I'm looking for. I want it to be part of my navbar. I recall seeing an example online but can't seem to find it now. Also wondering where it would go in relation to my header at the moment

enter image description here

<header class="navbar navbar-fixed-top navbar-inverse">
      <div class="navbar-inner">
        <div class="container">
          <nav>
            <ul class="nav pull-left">
              <li><%= link_to 'New Review', 
              if (current_user) 
                new_review_path 
              else
                log_in_path
              end %></li>
            </ul>
          </nav>
          <nav>
            <ul class="nav pull-right">
              <li><%= link_to "Home",    '/' %></li>
              <li><%= link_to "Help",    '#' %></li>
              <% if current_user %>
                <li><%= link_to "Log out", log_out_path %>
              <% else %>
                <li><%= link_to "Sign up", sign_up_path %></li>
                <li><%= link_to "Log in", log_in_path %></li>
              <% end %>
            </ul>
          </nav>
        </div>
      </div>
    </header>
like image 295
parameter Avatar asked Apr 14 '14 06:04

parameter

2 Answers

Please, refer this it satisfied your requirement HTML: 

<div class="container">
    <div class="row">    
        <div class="col-xs-8 col-xs-offset-2">
            <div class="input-group">
                <div class="input-group-btn search-panel">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span id="search_concept">Filter by</span> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#contains">Contains</a></li>
                      <li><a href="#its_equal">It's equal</a></li>
                      <li><a href="#greather_than">Greather than ></a></li>
                      <li><a href="#less_than">Less than < </a></li>
                      <li class="divider"></li>
                      <li><a href="#all">Anything</a></li>
                    </ul>
                </div>
                <input type="hidden" name="search_param" value="all" id="search_param">         
                <input type="text" class="form-control" name="x" placeholder="Search term...">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div>
        </div>
    </div>
</div>

CSS: 

body{
    margin-top:20px;
}

JS: 

$(document).ready(function(e){
    $('.search-panel .dropdown-menu').find('a').click(function(e) {
        e.preventDefault();
        var param = $(this).attr("href").replace("#","");
        var concept = $(this).text();
        $('.search-panel span#search_concept').text(concept);
        $('.input-group #search_param').val(param);
    });
});

Refer this link http://bootsnipp.com/snippets/featured/search-panel-with-filters

like image 142
vinothvino Avatar answered Nov 18 '22 08:11

vinothvino

See if this example that helps you..

javascript: 

/* activate scrollspy menu */
$('body').scrollspy({
  target: '#navbar-collapsible',
  offset: 50
});

/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 50
        }, 1000);
        return false;
      }
    }
});

CSS: 

/*
A custom Bootstrap 3.1 template
from http://bootply.com

This CSS code should follow the 'bootstrap.css'
in your HTML file.

license: MIT
author: bootply.com
*/

html,body {
    height:100%;
    background:center no-repeat fixed url('/assets/example/bg_suburb.jpg');
    background-size: cover;
}

.icon-bar {
    background-color:#fff;
}

.navbar-trans {
    background-color:#279ddd;
    color:#fff;
}

.navbar-trans li>a:hover,.navbar-trans li>a:focus,.navbar-trans li.active {
    background-color:#38afef;
}

.navbar-trans a{
    color:#fefefe;
}

.navbar-trans .form-control:focus {
    border-color: #eee;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}

section {
    padding-top:70px;  
    padding-bottom:50px; 
    min-height:calc(100% - 1px);
}

.v-center {
    padding-top:10%;
    font-size:70px;
}

.well {
    border-color:transparent;
}

a.list-group-item.active,[class*='-info'] {
    background-color: #168ccc;
    color:#fff;
}

#section1 {
    background-color: #168ccc;
    color:#dedeff;
}

#section2 {
    background-color: #e5e5ef;
    color:#686868;
}

#section3 {
    background-color: #168ccc;
    color:#ddd;
}

#section4 {
    background-color: #fff;
    color:#444;
}

#section5,#section7,#section7 a {
    color:#f5f5f5;
}

#section6 {
    background-color: #168ccc;
    color:#ddd;
}

footer {
    background-color:#494949;
    color:#ddd;
    min-height:100px;
    padding-top:20px;
    padding-bottom:40px;
}

footer .nav>li>a {
    padding:3px;
    color:#ccc;
}

footer .nav>li>a:hover {
    background-color:transparent;
    color:#fff;
}

HTML: 

<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="navbar-collapse collapse" id="navbar-collapsible">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#section1">What</a></li>
        <li><a href="#section2">When</a></li>
        <li><a href="#section3">How</a></li>
        <li><a href="#section4">Four</a></li>
        <li><a href="#section5">Five</a></li>
        <li><a href="#section6">Why</a></li>
        <li><a href="#section7">Who</a></li>
        <li>&nbsp;</li>
      </ul>
      <form class="navbar-form">
        <div class="form-group" style="display:inline;">
          <div class="input-group"> 
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-chevron-down"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Category 1</a></li>
                <li><a href="#">Category 2</a></li>
                <li><a href="#">Category 3</a></li>
                <li><a href="#">Category 4</a></li>
                <li><a href="#">Category 5</a></li> 
              </ul>
            </div>
            <input type="text" class="form-control" placeholder="What are searching for?">
            <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>

<section class="container-fluid" id="section1">
    <h1 class="text-center v-center">Sectionalize.</h1>

    <div class="container">
      <div class="row">
          <div class="col-sm-4">
            <div class="row">
              <div class="col-sm-10 col-sm-offset-2 text-center"><h3>Robust</h3><p>There is other content and snippets of details or features that can be placed here..</p><i class="fa fa-cog fa-5x"></i></div>
            </div>
          </div>
          <div class="col-sm-4 text-center">
            <div class="row">
              <div class="col-sm-10 col-sm-offset-1 text-center"><h3>Simple</h3><p>You may also want to create content that compells users to scroll down more..</p><i class="fa fa-user fa-5x"></i></div>
            </div>
          </div>
          <div class="col-sm-4 text-center">
            <div class="row">
              <div class="col-sm-10 text-center"><h3>Clean</h3><p>In the first 30 seconds of a user's visit to your site they decide if they're going to stay..</p><i class="fa fa-mobile fa-5x"></i></div>
            </div>
          </div>
      </div><!--/row-->
    <div class="row"><br></div>
  </div><!--/container-->
</section>

<section class="container-fluid" id="section2">
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2 text-center">
        <h1>What is Bootstrap?</h1>
        <br>
        <p class="lead">Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It is the No.1 project on GitHub with 65,000+ stars and 23,800 forks (as of March 2014) [1] and has been used by NASA and MSNBC, among many others..</p>
        <br> 
        <i style="font-size:120px" class="fa fa-camera fa-5x"></i>
        <p>Big 'ol Camera Icon</p>
    </div>
  </div>
</section>

<section class="container-fluid" id="section3">
    <h1 class="text-center">Bootstrap is Responsive</h1>
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <h3 class="text-center">Vertical scrolling has become a popular and lasting trend in Web design.</h3>
        <div class="row">
          <div class="col-xs-4 col-xs-offset-1">Some brand-tacular designs even have home page content that is taller that 12,000 pixels. That's a lotta content.</div>
          <div class="col-xs-2"></div>
          <div class="col-xs-4 text-right">Anyhoo, this is just some random blurb of text, and Bootply.com is a playground and code editor for Bootstrap.</div>
        </div>
        <p class="text-center">
          <img src="/assets/example/img_mtnpeople.png" class="img-responsive center-block ">
        </p>
      </div>
   </div>
</section>

<section class="container-fluid" id="section4">
    <h2 class="text-center">Change this Content. Change the world.</h2>
    <div class="row">
      <div class="col-sm-8 col-sm-offset-2">
      <img src="/assets/example/bg_smartphones.jpg" class="img-responsive center-block ">
      <p class="text-center">Images will scale down proportionately as browser width narrows.</p>
      </div>
    </div>
</section>

<section class="container-fluid" id="section5">
  <div class="col-sm-10 col-sm-offset-1">
    <div class="container">
    <div class="row">
      <div class="col-sm-4 col-xs-12">
            <div class="list-group">
              <a href="#" class="list-group-item active">
                <h2 class="list-group-item-heading">Basic</h2>
                <h6>Free to get started</h6>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 100 - more about this</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 2 - this is more about this</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 3 GB</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 4</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Feature</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Feature</p>
              </a>
              <a href="#" class="list-group-item">
                <button class="btn btn-primary btn-lg btn-block">Get Started</button>
              </a>
            </div>
      </div><!--/left-->

      <div class="col-sm-4 col-xs-12">
            <div class="list-group text-center">
              <a href="#" class="list-group-item active">
                <h2 class="list-group-item-heading">Better</h2>
                <h6>Most popular plan</h6>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 200 - more about this</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 2 - this is more about this</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 5 GB</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 6</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Feature</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Feature</p>
              </a>
              <a href="#" class="list-group-item">
                <button class="btn btn-default btn-lg btn-block">$10 per month</button>
              </a>
            </div>
      </div><!--/middle-->

      <div class="col-sm-4 col-xs-12">
            <div class="list-group text-right">
              <a href="#" class="list-group-item active">
                <h2 class="list-group-item-heading">Best</h2>
                <h6>For enterprise grade</h6>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 100 - more about this</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 2 - this is more about this</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 8 GB</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Option 10</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Unlimited</p>
              </a>
              <a href="#" class="list-group-item">
                <p class="list-group-item-text">Unlimited</p>
              </a>
              <a href="#" class="list-group-item">
                <button class="btn btn-default btn-lg btn-block">$20 per month</button>
              </a>
            </div>
      </div><!--/right-->

    </div><!--/row-->
    </div><!--/container--> 
  </div>
</section>

<section class="container-fluid" id="section6">
    <h2 class="text-center">Do you see what I mean?</h2>
    <p class="text-center lead">Add some compelling information here</p>
    <img src="/assets/example/bg_iphone.png" class="img-responsive center-block ">

</section>

<section class="container" id="section7">
    <h1 class="text-center">Social Media Fascination</h1>
    <div class="row">
      <!--fontawesome icons-->
      <div class="col-sm-1 col-sm-offset-2 col-xs-4 text-center">
       <i class="fa fa-github fa-4x"></i>
      </div>
      <div class="col-sm-1 col-xs-4 text-center">
       <i class="fa fa-foursquare fa-4x"></i>
      </div>
      <div class="col-sm-1 col-xs-4 text-center">
        <i class="fa fa-facebook fa-4x"></i>
      </div>
      <div class="col-sm-1 col-xs-4 text-center">
       <i class="fa fa-pinterest fa-4x"></i>
      </div>
      <div class="col-sm-1 col-xs-4 text-center">
       <i class="fa fa-google-plus fa-4x"></i>
      </div>
      <div class="col-sm-1 col-xs-4 text-center">
       <i class="fa fa-twitter fa-4x"></i>
      </div>
      <div class="col-sm-1 col-xs-4 text-center">
       <i class="fa fa-dribbble fa-4x"></i>
      </div>
      <div class="col-sm-1 col-xs-4 text-center">
       <i class="fa fa-instagram fa-4x"></i>
      </div>
  </div><!--/row-->
  <div class="row">
    <div class="col-md-12 text-center">
      <br><br>
      <p>
        <a href="http://www.bootstrapzero.com/bootstrap-template/sectionalize">Get the code for this template.</a>
      </p>
    </div>
  </div>
</section>

<footer id="footer">
  <div class="container">
    <div class="row">    
      <div class="col-xs-6 col-sm-6 col-md-3 column">          
          <h4>Information</h4>
          <ul class="nav">
            <li><a href="about-us.html">Products</a></li>
            <li><a href="about-us.html">Services</a></li>
            <li><a href="about-us.html">Benefits</a></li>
            <li><a href="elements.html">Developers</a></li>
          </ul> 
        </div>
      <div class="col-xs-6 col-md-3 column">          
          <h4>Follow Us</h4>
          <ul class="nav">
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Google+</a></li>
            <li><a href="#">Pinterest</a></li>
          </ul> 
      </div>
      <div class="col-xs-6 col-md-3 column">          
          <h4>Contact Us</h4>
          <ul class="nav">
            <li><a href="#">Email</a></li>
            <li><a href="#">Headquarters</a></li>
            <li><a href="#">Management</a></li>
            <li><a href="#">Support</a></li>
          </ul> 
      </div>
      <div class="col-xs-6 col-md-3 column">          
          <h4>Customer Service</h4>
          <ul class="nav">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Delivery Information</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms &amp; Conditions</a></li>
          </ul> 
      </div>
    </div><!--/row-->
  </div>
</footer>

http://bootply.com/129806

This is a full-width search form in the navbar along with an input-group-btn on the left side of the input that is used as a dropdown of categories.

like image 29
Zim Avatar answered Nov 18 '22 08:11

Zim
Sign in to Comment

Related questions

How to overlay a play button over a video thumbnail image?
Apply a CSS effect to only the first 10 <a> tags of a div
Responsive Bootstrap Sticky Footer Height
How to select the first element of n>4 elements with CSS only?
JQuery - Get width: auto from inline style
Force absolute div to listen to parent's padding?
Sass store selector in variable
How to determine where particular style comes from using Chrome DevTools
CSS Organization Structure Chart
How to apply the style only if next element has specific class?
Nested divs of same class, show child on hover
Style of Twitter's Bootstrap 3 navbar
change margin-top on scroll
Foundation media queries in font-family
Change border groove second color?
What does this mean in Bootstrap 3 docs?
Scaling iframes for responsive design CSS-only
Div fill remaining horizontal space
Make a div fill the remaining dynamic height and scroll without javascript
Unit for sizes in CSS

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!