Membuat Drop Down Menu dengan Search Box di CSS dan HTML

Dalam tutorial ini, kita akan membuat menu flat style dengan kotak pencarian atau search box dan menu dropdown dari Square UI.

flatnav

HTML

Navigasi terdiri dari list unordered (.nav) yang mengandung berbagai jenis unsur didalamnya :

  • List items(LIs) yang berisi link yang normal tidak memiliki id/class
  • #setting berisi link berbasis gambar
  • #search berisi kolom pencarian bersama dengan tombol submit
  • #options berisi link serta list unordered (.subnav) yang bertindak sebagai dropdown

Pada akhirnya kita masukan prefixfree yang memungkinkan kita menggunakan unprefixed properti CSS dimana-mana.

<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 Style

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

Kita mulai dengan CSS dasar reset dan import font custom ‘Montserrat’ dari Google Font.

2. Navigation dan List Item

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

Elemen navigasi utama memiliki background abu-abu gelap dan height. List item float kiri dan diposisikan relatif sehingga dapat berisi menu dropdown yang benar-benar diposisikan di kemudian hari.

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

Link memiliki styling dasar. Mereka menggunakan font Montserrat yang kita impor sebelumnya dari Google Font. Sebuah cahaya putih halus ditambahkan untuk membuat teks halus dan tebal. Link memiliki line height 60px yang sama dengan .nav.

Link juga memiliki efek hover dimana background diubah ke versi yang lebih ringan dari background abu-abu.

#settings berisi link gambar dengan demikian tata letaknya disesuaikan untuk membuat ikon pengaturan muncul di tengah.

4. Search Box

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 disediakan dengan width 357px dan margin sekitarnya 4px.

#search_text float kekiri dan disediakan dengan background hijau yang menghidupkan suasana menjadi lebih terang dihover.

#search_button juga melayang kekiri untuk membuatnya sejajar dengan #search_text horizontal. Ini menggunakan icon pencarian sebagai latar belakang yang diposisikan posisinya.

5. Dropdown

flatnav1

#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 yang berisi dropdown diberi icon segitiga sebagai background di sebelah kanan untuk membuatnya lebih intuitif.

.subnav tersembunyi secara default menggunakan kombinasi visibilitas CSS dan sifat opacity. Diposisikan top 110% . Saat membawa perubahan top ke 100% bersama dengan opacity dan visibilitas properti memberikan efek hover keren untuk menu dropdown.

DEMO

Comments

comments