Create search button equal to theme twentyfourteen [closed]

Question

Create search button equal to theme twentyfourteen [closed]

Navigation

#1 by (1 votes)

0

I need to create a search button just like the twentyfourteen theme. How can I do it?

html css

asked by anonymous 23.02.2015 / 22:10

1 answer

There is a duplicate section 'system.web.extensions / scripting / scriptResourceHandler' defined How to check if a view exists before having it created?

score 1 · Accepted Answer

See how simple jquery commands and using css can help:

When the user clicks the search button, it displays the search form.

See an example in practice:

$( "#btn-search" ).click(function() {
  $("#search-wrapper").toggle();
  $("#search-wrapper").addClass("active");
});

.principal{
  width: 200px;
  }

#search-wrapper{
  display: none;
  text-align: right;
  width: 100%;
  }

#txt-search{
  border: none;
  margin:5px 3px;
  width: 30%;

}
.active{
  background-color: green;
  color: white;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="principal">
<nav class="text-right">
	<a>home </a> | 
	<a id="btn-search"><i class="glyphicon glyphicon-search"></i> search</a>
</nav>
<div id="search-wrapper">
	<form>
		search here: <input type="search" id="txt-search" name="txt-search">

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

You see that by default the search form container has been declared in the css with display: none , soon it will only appear, if the user clicks the button, then > toggle () toggle between show or hide as the user clicks.

I hope I have helped:)