The Vimeo site is a overall great design, specially I like the search box, this tutorial is to show you how to make it happen.
Demo can be see here.
html code
This is the code for you form.
<form name="search" id="search_form2" method="get" action="/search">
<ul id="menu_search">
<li class="searchContainer">
<div>
<input name="search_query" type="text" id="search_query" value="" />
<a href="#"><img src="images/magnifier.png" alt="Search"/></a>
</div>
<ul>
<li><input id="field1" type="radio" name="search_type" checked="field1" value="field1" /><label FOR="field1">field1</label></li>
<li><input id="field2" type="radio" name="search_type" value="field2"/><label FOR="field2">field2</label></li>
</ul>
</li>
</ul>
</form>
css code
Before you paste in the code here the sneak peak how it will look
This is the code for you css.
#menu_search{
margin:0px;
padding:0px;
line-height:30px;
}
#menu_search > li {
cursor:pointer;
float:left;
position:relative;
padding:0px;
}
#menu_search > li:hover {
color:#B0D730;
}
#menu_search ul {
margin:0px;
}
#menu_search li ul {
position:absolute;
left:0px;
top:0px;
margin-top:30px; /* usually the same as #menu_search(line-height)*/
width: 98%;
padding-right:20px;
background-color:#333333; /* drop down box background color */
color:#D10000; /* drop down box font color */
font-size:0.7em;
display:none;
line-height:16px; /*control the line height*/
padding:5px; /*giving the text a bit of breathing room*/
}
#menu_search li:hover ul {
display:block;
}
#menu_search li ul li{
border-top: dotted 1px #606060;
list-style-type:none;
}
#menu_search li ul li:hover {
color:#7FCDFE;
background:#eeeeee;
}
.searchContainer div {
border: 1px solid #666;
display:inline;
padding:5px;
margin:0px;
}
.searchContainer input[type="text"] {
border:none;
width:360px; /* This control the width of the search box*/
}
.searchContainer img {
vertical-align:middle;
border:none;
}
Be a link sponsor for this page now
[sponsorbox]
I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.
Good Luck!
thanks for such a interesting post
Excellent read, I just passed this onto a colleague who was doing a little research on that. And he actually bought me lunch because I found it for him smile So let me rephrase that: Thanks for lunch!
Nice to notice that there are blog possessors that worry about their blogs and not release all kind of unusable stuff but rather try to maintain it fresh and worthy for the interest of their visitors. You’ve done a good job and i thank you for that and also for not shocking me with inutile garbage and spam.Thank You