Hai, ketemu lagi bersama saya dalam Tutorial Membuat Fixed Navigation Bar. Sebelumnya apakah kalian sudah tau apa itu fixed navigation? Fixed Navigation adalah Navigation Bar yang ketika di scroll ke bawah tidak akan tertutup dan akan terus melayang.
Sebelum ke tutorial, di sini saya akan memberikan contoh-contoh website yang memakai Fixed Navigation Bar.
Yaaap, sekarang kita mulaaaiii :D
STEP 1
Langkah pertama, kita akan membuat file html. ketikkan syntax di bawah :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed Navigation Bar</title>
<meta name="description" content="description">
<meta name="author" content="Ahmad Maulana">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="fixed-navigation-bar.css">
</head>
<body>
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<a class="sitename" href="fixed-navigation-bar.html">Ahmad</a>
<!-- Example responsive navigation menu -->
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a href="//amaulanaa.blogspot.com">Home</a></li>
<li><a href="//amaulanaa.blogspot.com">About</a></li>
<li><a href="//amaulanaa.blogspot.com">Contact</a></li>
<li><a href="//twitter.com/eksmudd">Twitter</a></li>
<li><a href="//www.facebook.com/madz.243">Facebook</a></li>
</ul>
</div>
</nav>
<section class="content">
<div class="description">
<h1>Fixed Navigation Bar</h1>
<p class="summary">Fixed Navigation, Scroll Untuk Melihat Hasil.</p>
<a class="button" href="//amaulanaa.blogspot.com">Baca Tutorial?</a>
</div>
</section>
<section class="some-related-articles">
<h1>Articles About Website Navigation</h1>
<p>Here are links (with excerpts) to five Six Revisions articles that talk about website navigation. (Because filler content/lorem ipsum sucks.)</p>
<h2><a href="#">Guide to Website Navigation Design Patterns</a></h2>
<p>Site navigation has a wide variety of common and familiar design patterns that can be used as a foundation for building effective information architecture for a website. This guide covers popular site navigation design patterns. For each site navigation design pattern, we discuss its common characteristics, its drawbacks, and when best to use it.</p>
<h2><a href="#">Is It Time To Rethink Website Navigation?</a></h2>
<p>One of the many beautiful things about web design is the near-limitless options available to us. Yet, still, our navigation systems seem stuck into the existing preformed solutions. For small, personal sites, a simple top horizontal navigation bar is the typical option.</p>
<h2><a href="#">Trying to Navigate Website Navigation</a></h2>
<p>Having clearly labeled navigation types to choose from can help people organize the information more easily. For us professionals, having standardized nomenclature allow us to discuss and explore the subject. Even information architecture (IA) experts like Lou Rosenfeld, Steve Krug, Jesse James Garrett, and Jakob Nielsen don't agree as to what "secondary navigation" is.</p>
<h2><a href="#">8 Ways to Add a Responsive Navigation Menu on Your Site</a></h2>
<p>There are plenty of techniques for implementing responsive navigation menus on your site. This article talks about eight excellent open source projects for building responsive navigation menus. At the end of the article, you will find a summary table that has links to the official site, demos, usage guide, and official open source repository for each project.</p>
<h2><a href="#">Information Architecture 101: Techniques and Best Practices</a></h2>
<p>Without a clear understanding of how information architecture (IA) works, we can end up creating sites that are more confusing than they need to be or, worse, make our content virtually inaccessible. This guide covers the fundamentals of information architecture for organizing website content. We will look into popular IA design patterns, best practices, design techniques, and case examples.</p>
</section>
</body>
</html>yap, cukup panjang sekali. namun file utamanya ada pada tag <nav></nav>. Saya sengaja membuat artikelnya agar dapat terlihat hasil dari fixed navigation itu.
STEP 2
Selanjutnya kita akan memberi style dan memberikan efek fixed pada navigation. Ketikkan syntax di bawah dan simpan dengan nama fixed-navigation-bar.css :
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #00a087;
}
Sebetulnya dengan syntax diatas pun sudah cukup untuk membuat navbar menjadi melayang alias fixed. Tapi kita akan memberi style untuk yang lainnya. Ketikkan syntax di bawah dan simpan dengan nama fixed-navigation-bar.css :
.content {
margin-top: 20px;
}
.fixed-nav-bar li, .fixed-nav-bar a {
height: 50px;
line-height: 50px;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
.menu a, .menu a:visited {
color: #ffffff;
}
.menu a:hover, .menu a:target {
color: #ebebeb;
}
.menu-items {
display: inline-block;
}
.sitename {
display: inline-block;
margin-right: 20px;
margin-left: 10px;
}
a.sitename, a:visited.sitename {
color: #e0e0e0;
}
.menu-items li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
.menu-items a {
text-decoration: none;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(assets/down-arrow-icon.png);
}
.hide {
background-image: url(assets/up-arrow-icon.png);
}
@media only screen and (max-width: 800px) {
.menu {
position: relative;
width: 100%;
}
.sitename {
position: absolute;
top: 0;
left: 15px;
margin-left: 0px;
}
.menu-items {
display: none;
width: 100%;
margin-top: 50px;
background-color: #008378;
}
.menu-items li {
display: block;
text-align: center;
}
.show, .hide {
position: absolute;
top: 0;
right: 15px;
}
.show {
display: inline-block;
}
.hide {
display: none;
}
#menu:target .show {
display: none;
}
#menu:target .hide, #menu:target .menu-items {
display: inline-block;
}
}
@media only screen and (max-width: 220px) {
.sitename, .show, .hide {
font-size: 14px;
}
}
STEP 3
Selanjutnya, buat file baru. Ketikkan synta di bawah dan simpah dengan nama base.css.
/* WEB FONT */
@import url(http://fonts.googleapis.com/css?family=Signika:600|Varela+Round);
/* RESET */
* {
margin: 0;
padding: 0;
border: 0;
}
/* BASIC */
body {
font: normal 18px/22px "Varela Round", sans-serif;
background-color: #e9ffff;
color: #2e2e2e;
}
h1, h2 {
font-family: "Signika", sans-serif;
font-weight: 600;
}
h1 {
font-size: 36px;
line-height: 46px;
color: #e0e0e0;
}
h2 {
font-size: 24px;
line-height: 33px;
margin-bottom: -20px;
}
p {
margin: 20px 0;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
}
/* LAYOUT */
.fixed-nav-bar {
box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.6);
}
.content {
position: relative;
background: #464646 url(59H-from-gratisography.jpg) no-repeat center center fixed;
background-size: cover;
}
.description, .some-related-articles {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
.description {
padding-top: 100px;
min-height: 250px;
text-align: center;
}
.some-related-articles {
color: #747474;
}
.some-related-articles h1 {
color: #384e56;
margin-top: 60px;
text-transform: uppercase;
}
.some-related-articles h2 a:link, .some-related-articles h2 a:visited {
color: #464646;
transition: color 0.1s ease;
}
.some-related-articles h2 a:hover {
color: #000000;
transition: color 0.3s ease;
}
/* SPECIAL */
.summary {
color: #d9dee2;
margin-top: 40px;
margin-bottom: 60px;
}
.button, .button:visited, .button-dark {
display: inline-block;
max-width: 200px;
margin: 50px 10px 30px 10px;
padding: 10px;
font-family: "Signika", sans-serif;
color: #ffffff;
background-color: transparent;
border: 2px solid #ffffff;
border-radius: 3px;
text-transform: capitalize;
text-align: center;
transition: all 0.1s ease;
}
.button-dark, .button-dark:visited {
margin: 20px 10px 30px 0;
color: #464646;
border-color: #464646;
}
.button:hover, .button-dark:hover {
transition: all 0.3s ease;
}
.button:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.button-dark:hover {
color: #ffffff;
background-color: rgba(70, 70, 70, 0.9);
}
Yap selesai :D
Semoga Bermanfaat :D
terimakasih gan, bermamfaat
BalasHapusmantap gan :D
BalasHapusjgn lpa junjungi juga Baca Manga Bahasa Indonesia
mantap gan :D
BalasHapusjgn lupa kunjungi juga 'Baca Manga Bahasa Indonesia