Belajar CSS (22. Navigasi)

Akhi Syabab

Navigation Bar atau kita sering sebut menu merupakan kumpulan dari bebera link. Navigasi sangat penting di dalam website karena dapat memudahkan visitor untuk mecari kategori yang dibutuhkan dalam sebuah situs. Tampilan menu sendiri dapat berbentuk vertikal maupun horizontal sesuai kebutuhan website.

Navigasi vertical
ex.

<!DOCTYPE html>
<html>
<head>
	<title>belajar menu</title>
	<style>
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			width: 10%;
			background-color: blue;
			position: fixed;
			height: 100%;
			overflow: auto;
		}
		li a{
			display: block;
			color: #000;
			padding: 8px 0px 8px 16px;
			text-decoration: underline;
		}
		li a.active{
			background-color: #4caf50;
			color: white;
		}
		li a:hover:not(.active){
			background-color: #555;
			color: white;
		}
		p {
			margin-left: 10%;
			padding: 1px 16px;
			height: 1000px;
		}

	</style>
</head>
<body>
	<ul>
		<li><a class="active" href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
	</ul>
	<p>contoh kata</p>
	<p>contoh kata</p>
	<p>contoh kata</p>
	<p>contoh kata</p>
	<p>contoh kata</p>
	<p>contoh kata</p>
	<p>contoh kata</p>
	<p>contoh kata</p>
</body>
</html>

hasil

Navigasi Horizontal
ex.

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa dipostingan selanjutnya.