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

Jangan lupa untuk follow twitter kami di @tut_web

Salam Web Design Indonesia

Abuser

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”

Lita says:

February 12, 2013 at 07:02

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

sadam says:

October 17, 2013 at 18:15

Coll….I Like It

panji iman baskoro says:

June 12, 2014 at 08:53

makasih mas sangat membantu saya,trims

Hanafi says:

September 11, 2014 at 19:39

Ini dia yang saya cari-cari…

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

syafri says:

June 13, 2015 at 21:39

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

TWD Editorial says:

June 14, 2015 at 01:28

Boleh kamu hiraukan saja, dihapus pun tak apa, karena itu kayaknya hanya dipakai untuk project kami waktu itu dan lupa disesuaikan dengan tutorialnya.

Reply
- syafri says:
  
  June 15, 2015 at 20:46
  
  oo.. begitu ya
  thanks..
  
  Reply

Tutorial Web Design

Topik

Tags