Membuat Horizontal Menu Dengan CSS

Berikut langkah langkah nya:

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 terimakasih