Selamat Datang

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.

Horizontal Menu

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

Jangan lupa untuk follow twitter kami di @tut_web

Salam Web Design Indonesia





Penulis :

I'm just simple person, web developer part time, web design holic, website researcher. Work in the world of websites & coding for eat : View all posts by Abuser

Comments

7 thoughts on “Tips Membuat Horizontal Menu Dengan CSS

  1. Lita says:

    It’s so useful for beginner like me… Thank you.

  2. sadam says:

    Coll….I Like It

  3. makasih mas sangat membantu saya,trims

  4. Hanafi says:

    Ini dia yang saya cari-cari…

    Terima kasih,,.. sangat membantu sekali… :D

  5. syafri says:

    class=”lang” pada HTML
    ini maksudnya apa ya?
    maklumin saya masih tahap belajar :)

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development