Membuat Menu Horizontal

Saad Abdurrazaq Sun, June 7, 2015 No Comments 1,216 views
Membuat-Menu-Horizontal

Pada artikel kali ini, kita akan membahas bagaimana membuat menu horizontal. Jika kita pernah mendengar menu vertikal, maka tentunya kita mungkin pernah mendengar menu horizontal. Baik menu vertikal maupun menu horizontal sebenarnya masih digunakan oleh banyak website. Menu vertikal biasanya diletakkan pada bagian sidebar dan digunakan untuk menampilkan categories dan juga archive, walau terkadang menu vertikal juga sering digunakan untuk menampilkan beberapa hal atau pilihan selain dua itu, tetapi berbeda halnya dengan menu horizontal, menu horizontal biasanya dibuat untuk ditempatkan dibawah header dan dijadikan pembatas antara header dengan content area di bawahnya.

Membuat menu horizontal tidak hanya sebatas menu saja, menu horizontal merupakan “pemanis” sekaligus penambah kesan elegan pada suatu website, tanpa adanya menu horizontal website terkesan kurang elegan dan kurang menarik, tetapi setelah ditambahkan menu horizontal, website akan terlihat lebih berkelas.

sama halnya dengan membuat menu vertikal, untuk membuat menu horizontal yang elegan juga dibutuhkan keahlian dalam memahami CSS, HTML dan jQuery, tetapi jika Anda ingin sekedar copy paste kode, Anda cukup memahami sedikit saja tentang HTML, CSS dan jQuery. Bagi Anda yang hanya ingin sekedar copy paste kode, Anda bisa mengikuti tutorial ini sampai habis. Simak langkah-langkahnya dibawah ini step by step.

Step 1: Ketikkan kode HTML berikut ini:

<html>
<title></title>
<head>
</head>
<body>
</body>
</html>


Step 2:
Aktifkan koneksi internet Anda, kita akan load file jQuerynya, ketikkan script berikut ini dan letakkan dibawah kode<head>.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>


Step 3:
Kita akan membangun menu horizontal dengan HTML. Ketikkan kode dibawah ini, dan letakkan dibawah kode <body>.



<div id="cssmenu">


<ul>


<li><a href="kafeinkode.com"><span>Home</span></a></li>



<li class="has-sub"><a href="kafeinkode.com"><span>Menu 1</span></a>


<ul>


<li><a href="kafeinkode.com"><span>SubMenu 1</span></a></li>



<li><a href="kafeinkode.com"><span>SubMenu 2</span></a></li>


</ul>


</li>



<li><a href="kafeinkode.com"><span>Menu 2</span></a></li>


</ul>


</div>



Step 4:
Setelah menu horizontal selesai dibangun, hasilnya masih berantakan, karena belum kita styling. Sekarang kita akan menstylingnya dengan CSS. Ketikkan kode di bawah ini kemudian letakkan setelah kode <head> dan sebelum kode </head>.

/* Menu Dropdown
*****************/
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
border: none;
margin: 0;
padding: 0;
line-height: 1;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

/* navbar */
#cssmenu {
height: 40px;
width: 1070px;
display: block;
padding: 0;
margin: 0 auto;
margin-top: 5;
border: 1px solid;
border-color: #080808;
padding-bottom: 0.1px;
margin-bottom: 0;
}

#cssmenu,
#cssmenu > ul > li > ul > li a:hover {
background: #3c3c3c;
background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: linear-gradient(top, #3c3c3c 0%, #222222 100%);
}

#cssmenu > ul {
list-style: inside none;
padding: 0;
margin: 0;
}

#cssmenu > ul > li {
list-style: inside none;
padding: 0;
margin: 0;
float: left;
display: block;
position: relative;
}

#cssmenu > ul > li > a {
outline: none;
display: block;
position: relative;
padding: 13px 20px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
font-weight: bold;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
border-right: 1px solid #080808;
color: #ffffff;
height: 14px;
}

#cssmenu > ul > li > a:hover {
background: #0074a2;
color: #ffffff;
}

#cssmenu > ul > li:first-child > a {

}

#cssmenu > ul > li > a:after {
content: ”;
position: absolute;
border-right: 1px solid;
top: -1px;
bottom: -1px;
right: -2px;
z-index: 99;
border-color: #3c3c3c;
}

#cssmenu ul li.has-sub:hover > a:after {
top: 0;
bottom: 0;
}

/* tanda panah */
#cssmenu > ul > li.has-sub > a:before {
content: ”;
position: absolute;
top: 18px;
right: 6px;
border: 5px solid transparent;
border-top: 5px solid #ffffff;
}

/* tanda panah ketika dihover */
#cssmenu > ul > li.has-sub:hover > a:before {
top: 19px;
}

/* sub-list view when link on the top is hovered */
#cssmenu ul li.has-sub:hover > a {
background: #0074a2;
border-color: #3f3f3f;
padding-top: 14px;
z-index: 999;
}

#cssmenu ul li.has-sub:hover > ul,

#cssmenu ul li.has-sub:hover > div {
display: block;
}

#cssmenu ul li.has-sub > a:hover {
background: #0074a2;
border-color: #3f3f3f;
}

#cssmenu ul li > ul,

#cssmenu ul li > div {
display: none;
width: auto;
position: absolute;
top: 41px;
padding: 10px 0;
background: #0074a2;
border-radius: 0 0 5px 5px;
z-index: 999;
}

#cssmenu ul li > ul {
width: 200px;
}

#cssmenu ul li > ul li {
display: block;
list-style: inside none;
padding: 0;
margin: 0;
position: relative;
}

#cssmenu ul li > ul li a {
outline: none;
display: block;
position: relative;
margin: 0;
padding: 8px 20px;
font: 10pt Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

#cssmenu ul ul a:hover {
color: #ffffff;
}

#cssmenu > ul > li.has-sub > a:hover:before {
border-top: 5px solid #ffffff;
}


Step 5:
Menu dropdown sudah jadi, sekarang kita akan memberikan efek jQuerynya. Letakkan script berikut ini dibawah kode </style>.

<script type="text/javascript">
$(document).ready(function(){
    $("#cssmenu ul li").hover(function () {
         $(this).siblings().find('ul').slideUp(400);
            $(this).find('ul').slideDown(400);  

    }, function () {
       $(this).find('ul').slideUp(400);

    });
});
</script>


Step 6:
Simpan filenya, kemudian load file tersebut di localhost.

Is a web enthusiast from Indonesia. kafeinkode was created and written by Saad Abdurrazaq, it is built on WordPress. Love working with WordPress, programming, blogging, internet marketing, and all about computer soft skills.

0 comments

Leave a Reply

Your email address will not be published. Required fields are marked *