Tips Membuat Horizontal Menu Dengan CSS
Pada tips singkat berikut ini kita akan mencoba teknik dasar bagaimana teknik dasar membuat Horizontal menu dengan CSS.
Disini kita juga akan belajar Pseudo-element :before dan :first-child milik CSS.
Oke kita mulai dengan Membuat Struktur HTML seperti berikut ini
HTML
<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>Basic Horizontal Menu CSS : DEMO</title>
<style type=”text/css”>
<!– /CSS Code Here –>
</style>
</head>
<body>
<div class=”demo-container”>
<h1>Tutorial-Webdesign.com</h1>
<ul class=”horizon-menu”>
<li><a href=”#” class=””>Home</a></li>
<li><a href=”#” class=”lang”>About</a></li>
<li><a href=”#” class=”lang”>Work</a></li>
<li><a href=”#” class=”lang”>Portfolio</a></li>
<li><a href=”#” class=”lang”>Contact</a></li>
</ul>
</div>
</body>
</html>
Setelah membuat struktur HTML nya, sekarang kita mempercantik dengan CSS
CSS
h1{margin:5px}
.demo-container{margin:50px;}
.horizon-menu{list-style-type:none;padding:0;margin:0;background:#fff000;padding:10px;border-radius:5px;box-shadow:inset 0 0 5px 2px #f4f4f4}
.horizon-menu a{text-decoration:none; color:#111;font-weight:bold}
.horizon-menu li{display:inline;margin:5px 0}
.horizon-menu li:before{content:’ | ‘;color:rgba(0,0,0,.1)}
.horizon-menu li:first-child:before{content:’ ‘}
.horizon-menu li a{margin-right:5px; margin-left:5px;padding:5px;border-radius:5px;
-webkit-transition:background-color 500ms ease-in-out;
-moz-transition:background-color 500ms ease-in-out;
}
.horizon-menu li a:hover{background-color:orange}
Penjelasan:
Inti utama dalam membuat menu horizontal yaitu pada baris code 4, dimana tertulis display:inline
.horizon-menu li{display:inline;margin:5px 0}
Sedangkan untuk membuat pemisah kita menggunakan li:before{content:’ | ‘}, dimana akan menulis karakter [ | ]
Agar pemisah tidak muncul diawal maka kita membutuhkan li:first-child:before{content:’ ‘}
Tambahan:
Untuk membuat menu tersebut Responsive terhadap lebar layar, dimana akan berfungsi dengan baik jika dibuka di layar yang lebih kecil seperti Smartphone atau PC Tablet, maka kita tambahkan code berikut:
@media (max-width:767px){
.demo-container{margin:5px;}
.horizon-menu li{display:block}
.horizon-menu li:before{content:”;color:rgba(0,0,0,.1)}
}
Oke sekian tips kali ini, semoga berguna
SUMBER = http://www.tutorial-webdesign.com/tips-membuat-horizontal-menu-dengan-css3/
