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

flatnav

Seperti yang kita tahu, Designmodo adalah sebuah website yang menyediakan konten tentang desain dan pembuat User Interface antara lain : Flat, Bricks, Square, And Impressionist UI. Dan baru baru ini mereka melepaskan sebuah tutorial dari salah satu User Interface Element mereka, yaitu Dropdown menu dari Square UI.

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

 

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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

1
2
3
4
5
6
* {
    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

1
2
3
4
5
6
7
8
9
10
11
.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.

3. Links

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#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.

preview download

Source: http://designmodo.com/create-drop-down-menu-search-box/#ixzz2UdMTwLFH

Advertisements

5 thoughts on “Create a Drop Down Menu with Search Box in CSS3 and HTML5

  1. 私がいた とても幸せ 見つけるためにこれはインターネット site.I あなたの上にあなたに感謝することを学ぶ |この優れた| | 読みこの栄光!ためのあなたの}時間{この素敵に! I 間違い と楽しんそれと| |少しの少しのビット 各毎 私はしましたあなたブックマークチェックアウトするポスト|新しいものあなたのブログで。

  2. I discovered your “Create a Drop Down Menu with Search Box in CSS3 and HTML5 | IT Swapps!!” page and noticed you could have a lot more traffic. I have found that the key to running a website is making sure the visitors you are getting are interested in your subject matter. There is a company that you can get traffic from and they let you try it for free. I managed to get over 300 targetted visitors to day to my website. Check it out here: http://nsru.net/fdse

  3. Thank you for the auspicious writeup. It if truth be told was a
    leisure account it. Glance advanced to far delivered agreeable from you!

    However, how could we communicate?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s