Create a Drop Down Menu with Search Box in CSS3 and HTML
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.
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(https://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.
.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.
With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
Try FreeOther Products3. 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
#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.
With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
Try Startup App Try Slides AppOther Products5. 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.