Create a Drop Down Menu with Search Box in CSS3 and HTML

Topic: CSS3
Difficulty: Intermediate
Estimated Completion Time: 45 min

In this tutorial, we will be creating a flat style navigation with a search box and dropdown menu from the Square UI.

Flat menu

HTML Code

The navigation is made up of an unordered list (.nav) containing various types of elements inside them:

  • List items(LIs) which contain normal links do not have any id/class.
  • #settings contains an image based link.
  • #search contains the search field along with a submit button.
  • #options contains a link as well as an unordered list (.subnav) which acts as a dropdown.

At the end we include prefixfree which lets us use only unprefixed CSS properties everywhere.

<ul class="nav">
	<li id="settings">
		<a href="#"><img src="settings.png" /></a>
	</li>
	<li>
		<a href="#">Application</a>
	</li>
	<li>
		<a href="#">Board</a>
	</li>
	<li id="search">
		<form action="" method="get">
			<input type="text" name="search_text" id="search_text" placeholder="Search"/>
			<input type="button" name="search_button" id="search_button"></a>
		</form>
	</li>
	<li id="options">
		<a href="#">Options</a>
		<ul class="subnav">
			<li><a href="#">Settings</a></li>
			<li><a href="#">Application</a></li>
			<li><a href="#">Board</a></li>
			<li><a href="#">Options</a></li>
		</ul>
	</li>
</ul>

<script src="prefixfree-1.0.7.js" type="text/javascript"></script>

CSS

1. Basic Styles

@import url(http://fonts.googleapis.com/css?family=Montserrat);

* {
	margin: 0;
	padding: 0;
}

We start with a basic CSS reset and import a custom font ‘Montserrat’ from Google Fonts.

2. Navigation and List Items

.nav {
	background: #232323;
	height: 60px;
	display: inline-block;
}

.nav li {
	float: left;
	list-style-type: none;
	position: relative;
}

The main navigation element has a dark grey background and a fixed height. The list items are floated left and are positioned relatively so that they can contain the dropdown menu which is absolutely positioned later on.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

3. Links

.nav li a {
	font-size: 16px;
	color: white;
	display: block;
	line-height: 60px;
	padding: 0 26px;
	text-decoration: none;
	border-left: 1px solid #2e2e2e;
	font-family: Montserrat, sans-serif;
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
	background-color: #2e2e2e;
}

#settings a {
	padding: 18px;
	height: 24px;
	font-size: 10px;
	line-height: 24px;
}

The links have basic styling. They use the Montserrat font we imported earlier from Google Fonts. A subtle white glow is added to make the text smooth and bold. The links have a 60px line height which is same as that of .nav.

The links also have a hover effect where the background is changed to a lighter version of the grey background.

#settings contains an image link hence its layout is adjusted to make the settings icon appear in the center.

4. Search Box

Flat Search

#search {
	width: 357px;
	margin: 4px;
}
#search_text{
	width: 297px;
	padding: 15px 0 15px 20px;
	font-size: 16px;
	font-family: Montserrat, sans-serif;
	border: 0 none;
	height: 52px;
	margin-right: 0;
	color: white;
	outline: none;
	background: #1f7f5c;
	float: left;
	box-sizing: border-box;
	transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: white;
}
#search_text:focus {
    background: rgb(64, 151, 119);
}
#search_button {
	border: 0 none;
	background: #1f7f5c url(search.png) center no-repeat;
	width: 60px;
	float: left;
	padding: 0;
	text-align: center;
	height: 52px;
	cursor: pointer;
}

#search is provided with a fixed width and a small margin or 4px around it.

#search_text is floated to the left and is provided with a green background which animates to a lighter shade on hover.

#search_button is also floated to the left to make it align with #search_text horizontally. It uses a search icon as its background which is positioned at its center.

Styling the placeholder is a tricky one. It appears grey on some browsers. This answer on Stackoverflow gives a complete overview on how to do it.

5. Dropdown

Flat Dropdown

#options a{
	border-left: 0 none;
}
#options>a {
	background-image: url(triangle.png);
	background-position: 85% center;
	background-repeat: no-repeat;
	padding-right: 42px;
}
.subnav {
	visibility: hidden;
	position: absolute;
	top: 110%;
	right: 0;
	width: 200px;
	height: auto;
	opacity: 0;
	transition: all 0.1s;
	background: #232323;
}
.subnav li {
	float: none;
}
.subnav li a {
	border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
	visibility: visible;
	top: 100%;
	opacity: 1;
}

#options which contains a dropdown is given a triangle icon as a background on the right to make it more intuitive.

.subnav is hidden by default using a combination of CSS visibility and opacity properties. Its positioned at 110% from the top. On hover the top changes to 100% along with the opacity and visibility properties giving a cool hover effect to the dropdown menu.

Download Source Files

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Puneet Pugalia

Frontend developer and creator of TheCodePlayer. Keeps fiddling with HTML5/CSS3/JS/etc. You can follow him on Twitter at @puneetpugalia.

Newsletter

10 Comments
  1. Hoang Giang May 20, 12:57 pm

    Very well tuts

    Reply
    +4
  2. Will May 20, 5:43 pm

    Very cool — can’t wait to try! Thanks, guys!

    Reply
    +6
  3. José Carneiro May 22, 7:11 am

    Awesome guys, the options button is not working on my Ipad though, is it because the pseudo-class is hover and not another one?

    Reply
    +5
  4. Vivek Nath.R May 26, 6:45 am

    This is cool, Why don’t you make it responsive?

    Reply
    +4
  5. Pedro Saddi May 31, 8:01 pm

    Some link above drop-down (even not visible) will not work, right? Because visibility.

    Reply
    +4
  6. Maitreya Vyas Jul 13, 9:11 pm

    Thanks for this! I was really searching for this like drop down menu on the web… :)

    Reply
    0
  7. Rik Gierman Jul 19, 3:05 pm

    It does not seem to go full width? I am a noob wanting to learn, is there someone who can give me the solution?

    Reply
    +1
  8. Rik Gierman Jul 19, 4:03 pm

    Already found out how, now to see if there is a way to make it fixed like facebook

    Reply
    0
  9. Radu Jul 31, 6:39 pm

    In the first code snipet there is a mistake in the form tag after the second input. the “” shouldnt be there… right ?

    Reply
    0
    • Radu Jul 31, 6:40 pm

      I forgot about the injection protection, ok…

      By “” I ment, the end thag of an anchor.

      Reply
      0

Leave a Reply

*
* Minimum length: 20 characters