Cara Membuat Menu Navigation Plus Search box

Hari pertama 2015 saya mau buat tulisan cara membuat menu navigation dan kolom search dibawah header. Sebenarnya, belum ada pembahasan yang menarik untuk saya share di blog, karena alasan malasnya menulis, hehehe. Selain itu memang ada jadwal UAS dikampus.

Baca juga : Cara Membuat Navigasi Menu Plus Widget Hari Tanggal, Tahun

Tapi biar ada updatean, saya berusaha mengembalikan selera untuk menulis. Namun, InsyaAllah tulisan kali ini ada manfaatnya. Berikut cara membuat Menu Navigation Simple :

Masukkan kode CSS

nav {
    background-color:#333;
    font: 15px arial, sans-serif;
    margin:0;
    padding:0;
    list-style:none;
}
nav ul li.right-nav{float:right;padding-right:10px;}

nav ul {
    height:auto;
    margin:0;
    padding:0 0 0 10px;
    overflow: hidden;
    list-style: none;
    position: relative;
}

nav li {
    list-style:none;
    display:inline;
    margin:0;
    padding:0;
    float:left;
}
nav li a {
    display:block;
    line-height:40px;
    text-decoration:none;
    color:#f3f3f3;
    padding:0 15px;
}

nav li a:hover {
    color:#333;
    background-color:#eee;
}

#search {
    position:relative;
    width:auto;
    height:100%;
    padding:0;
    margin:5px;
    text-align:center;
}

#search-form {
    border-radius:2px;
    margin:0 auto;
    background:#777 url('http://1.bp.blogspot.com/-hol8u-tMI4o/U6a5GKy8xbI/AAAAAAAADxA/axfPxABLUlA/s1600/search.png') 96% 50% no-repeat;
    border:0 none;
    height:28px;
    width:90%;
    color:#f4f4f4;
    font: 15px arial, sans-serif;
    transition:all 0.5s ease 0s;
    padding-left:5px;
    padding-right:5px;
}

#search-form .search-button,#search-form .search-button:hover{
    transition:all 0.5s ease 0s;
    background:#f2f2f2;
    border:0 none;
    float:right;
    cursor:pointer;
    outline:none;
}

#search-form:hover{
    background:#555 url('http://1.bp.blogspot.com/-hol8u-tMI4o/U6a5GKy8xbI/AAAAAAAADxA/axfPxABLUlA/s1600/search.png') 90% 50% no-repeat;
}

#search-form:focus{
    background:#95A5A6 url('http://1.bp.blogspot.com/-hol8u-tMI4o/U6a5GKy8xbI/AAAAAAAADxA/axfPxABLUlA/s1600/search.png') -10% 50% no-repeat;text-shadow:none!important;outline:none;color:#f2f2f2;
}

#box {
    display:none
}

.search-text {
    font-size:15px;
    float:right;
    cursor:pointer;
}

.search-text:hover {
    color:#fff
}

Kemudian berikut kode HTMLnya :

<nav>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Product</a></li>
        <li><a href='#'>Contact Me</a></li>
        <li class='right-nav'>
        <div id='search'>
            <form action='/search' id='searchform' method='get'>
            <input id='search-form' name='q'         onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;' type='text' value='Search here ...'/>
            </form>
        </div>
        </li>
    </ul>
</nav>

Demo

Jika kawan ingin menambahkan Font Awsome disetiap Kata yang ada pada Menu Nav, Masukkan data script link diatas </head> dengan

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

 Selipkan Icon, untuk melihat dan memilih Icon Font Awsome klik fortawesome.github.io . Berikut HTML Nav yang saya buat :

<nav>
    <ul>
        <li><a href='#'><i class="fa fa-home"></i>
Home</a></li>
        <li><a href='#'><i class="fa fa-user"></i>
About</a></li>
        <li><a href='#'><i class="fa fa-tags"></i>
Product</a></li>
        <li><a href='#'><i class="fa fa-microphone"></i>
Contact Me</a></li>
        <li class='right-nav'>
        <div id='search'>
            <form action='/search' id='searchform' method='get'>
            <input id='search-form' name='q'         onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;' type='text' value='Search here ...'/>
            </form>
        </div>
        </li>
    </ul>
</nav> 

Demo

Jika anda menginginkan Menu Nav dibawah header, maka kode HTML letakkan pada sisi bawah tepat </header>.

Sekian kali ini, selamat mencoba. Keep Happy Blogging.

Newer Post Older Post