Tạo Drop Down Menu và Ô tìm kiếm với CSS3 & HTML

Trong bài hướng dẫn này, chúng ta sẽ đi tạo 1 Navigation với phong cách phẳng (flat style) với ô tìm kiếm và dropdown menu từ Square UI.



HTML

<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. Giao diện cơ bản

@import url(http://fonts.googleapis.com/css?family=Montserrat); * { margin: 0; padding: 0; }

Chúng ta dùng CSS cơ bản với reset và sử dụng ‘Montserrat’ từ Google Fonts.

1. Navigation và List items

.nav
{ background: #232323;
 height: 60px;
 display: inline-block;
}
 .nav li
{ float: left;
 list-style-type: none;
 position: relative;
}

Thành phần chính của Navigation là có background màu xám đen (dark grey) và chiều cao cố định (fixed height). List items: float left, postition: relative Dropdown menu: absolute

LINK

.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;
}

Trên đây là style về link:
- Sử dụng font Montserrat của Google
- Tiêu đề màu trắng
- Dùng hiệu ứng đổ bóng (text shadow)
- Chiều cao 60px...

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;
}

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;
}

LIVE PREVIEW