CSS Navbar Vertical

0
168

Pada kesempatan kali ini saya akan memberikan tutorial membuat navbar vertical dengan css. Tutorial sederhana ini berguna bagi anda yang ingin membuat navbar vertical untuk design website. Navbar Vertical atau Navbar yang posisinya disamping beginilah tutorialnya.

Step 1

Buat file index.html dan ketikkan source code dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>Css Navbar Vertical </title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<ul>
		<li><a href="#" class="active">Home</a></li>
		<li><a href="#">Article</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">About</a></li>
	</ul>
	<div class="content">
		<h2>Tulis Sesuatu</h2>
		<p>Tulis Arikel disini sesuai keinginan anda ...</p>
		<p>Tulis Sesuatu.</p>
		<p>Tulis Sesuatu.</p>
	</div>
</body>
</html>

 

Step 2

Buat folder css, dan buat file style.css, selanjutnya ketikkan source code dibawah ini.

body {
  margin: 0;
}
ul {
  width: 25%;
  height: 100%;
  position: fixed;
  background-color: #ddd;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}
li a {
  font-family: arial;
  display: block;
  padding: 10px 0 10px 16px;
  text-decoration: none;
  color: #333;
}
li a.active {
  background-color: #00d2e1;
}
li a.active:hover {
  background-color: #333;
  color: #fff;
}
li a:hover {
  background-color: #333;
  color: #fff;
}
.content {
  margin-left: 25%;
  height: 1000px;
  padding: 1px 16px;
}

 

Posisi navbar ini fixed di sebelah samping, sedangkan untuk artikelnya anda bisa scroll ke bawah atau ke atas. Hasil tampilannya nanti akan seperti ini.

Demikian tutorial kali ini semoga bermanfaat bagi anda.

Baca Juga : CSS Navbar Horizontal

***PIU***

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here