Tips Membuat Horizontal Menu Dengan CSS
Navigasi merupakan hal yang ponting untuk ada di website, ini untuk memudahkan user dalam menjelajahi isi website, Navigasi bisa disebut menu, menu ada yang berbentuk Vertical, dan ada juga yang berbentuk Horizontal.
Menu Vertical adalah menu yang berderet kebawah, sedangkan Horizontal Memanjang Kesamping.
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/
Menu Vertical adalah menu yang berderet kebawah, sedangkan Horizontal Memanjang Kesamping.
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/
0 comments:
Post a Comment