Cara Membuat Navigation bar Keren Dengan Css


Cara Membuat Navigation Bar Keren

Navbar atau sering disebut Navigation Bar, yang posisinya terdapat pada head atau tepat diatas (fixed top), bisa juga dibawah (fixed bottom). Tampilan Navbar akan terlihat lebih menarik jika kita mempercantiknya dengan balutan CSS, animasi, ataupun dengan javascript.

Bagi para pakar koding atau seorang yang paham bahasa pemograman, tentunya dalam hal ini sangatlah mudah. Akan tetapi, pada artikel yang akan saya bahas kali ini adalah khusus untuk para pemula yang mungkin sedikit kesulitan bahkan cenderung tidak mengerti, cara membuat sebuah menu bar pada webs, blog dan lain sebagainya.

Apa Itu Navbar Dan Apa Fungsinya?
Navbar adalah sebuah toolbar yang memiliki fungsi spesifik untuk menghandle semua navigasi, yang dimana terdapat didalamnya bermacam-macam bisa itu alamat website, form search dan lain-lain. Jika disebuah situs webs maupun blog tidak terdapat menu bar atau navbar, mungkin rasanya kurang menarik. Jadi, dapat dikatakan peran Navbar ini sangatlah penting.

Nah, sesuai apa yang telah saya katakan pada pembahasan kali ini saya akan memberikan tutorial bagaimana cara membuat sebuah Navbar keren. Perlu diketahui bahwa, disini saya hanya menggunakan bantuan dari CSS saja, dan dibalut dengan gradient color yang bisa berubah-ubah.

Bagaimana Cara Membuatnya?

Mungkin kita langsung praktekan saja, untuk proses pembuatannya bisa perhatikan dibawah ini:

Langkah pertama yaitu, login ke Cpanel (Control Panel) atau hosting kalian. Nah kalau belum punya hosting, kalian bisa order di Niagahoster.

Disini saya anggap kalian sudah punya hosting, setelah login masuk ke menu filemanager lalu buatlah sebuah file, beri nama style.css. Setelah itu copy paste kode CSS dibawah ini dan masukan kedalam file style.css yang sebelumnya sudah kalian buat.

        * {
 padding:0;
 margin:0;
}
body {
 font-family:'Jockey One', Geneva, sans-serif;
 font-size:15px;
 background-color:#FFF
}
header {
 width:100%;
 background: linear-gradient(45deg, #9b59b6, #7095c1, #e74c3c, #f1c40f, #48d1cc, #2ecc71);
 -webkit-animation: color 2.5s ease-in  0s infinite alternate running;
 -moz-animation: color 2.5s linear  0s infinite alternate running;
 animation: color 2.5s linear  0s infinite alternate running;
 z-index:1000;
 position:fixed;
}
/* Animasi + Prefix untuk browser */
@-webkit-keyframes color {
    0% { background: linear-gradient(45deg, #9b59b6, #7095c1, #e74c3c, #f1c40f, #48d1cc, #2ecc71); }
    25% { background: linear-gradient(45deg, #3c8dbc, #7095c1, #48d1cc); }
    50% { background: linear-gradient(45deg, #9b59b6, #7095c1, #48d1cc); }
}
@-moz-keyframes color {
     0% { background: linear-gradient(45deg, #9b59b6, #7095c1, #e74c3c, #f1c40f, #48d1cc, #2ecc71); }
    25% { background: linear-gradient(45deg, #3c8dbc, #7095c1, #48d1cc); }
    50% { background: linear-gradient(45deg, #9b59b6, #7095c1, #48d1cc); }
}
@keyframes color {
  0% { background: linear-gradient(45deg, #9b59b6, #7095c1, #e74c3c, #f1c40f, #48d1cc, #2ecc71); }
 25% { background: linear-gradient(45deg, #3c8dbc, #7095c1, #48d1cc); }
 50% { background: linear-gradient(45deg, #9b59b6, #7095c1, #48d1cc); }
}
.menu-bar {
 color:#ddd;
 border:2px solid #ddd;
 font-size:35px;
 width:60px;
 cursor:pointer;
 text-align:center;
 padding:5px;
 margin-left:10px;
 margin-top:12px;
 margin-bottom:5px;
 -webkit-animation: slide 0.2s ease;
 -moz-animation: slide 0.2s ease;
 animation: slide-in 0.2s ease;
 animation-fill-mode: forwards;
}
.navbar-brand {
        float:right;
        padding:0 4px 4px 0;
        margin:3px;
        color:#fff;
}
.menu-bar:hover {
        background:rgba(0, 0, 0, 0.3);
        border-radius:4px;
}
#tag-menu {
 display:none;
}
#tag-menu:checked ~ div.jw-drawer {
 -webkit-animation: slide 0.2s ease;
 -moz-animation: slide 0.2s ease;
 -o-animation: slide 0.2s ease;
 animation: slide-in 0.2s ease;
 animation-fill-mode: forwards;
}
.jw-drawer {
 position:fixed;
 left:-280px;
        height:100%;
 z-index:100;
 width:230px;
 margin-top:5px;
 animation: slide-out 0.2s ease;
 animation-fill-mode: forwards;
 background: #F5F5F5;
}
.jw-drawer ul li {
 list-style:none;
}
.jw-drawer ul li a {
 padding:10px 20px;
 text-decoration:none;
 display:block;
 color:#3c8dbc;
 border-top:none;
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
}
.jw-drawer ul li a:hover{
 background-color:rgba(0, 0, 0, 0.1);
 transition: all 0.8s;
}
.jw-drawer ul li a i {
 width:50px;
 height:35px;
 text-align:center;
 padding-top:15px;
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
}
@-webkit-keyframes slide-in {
 from {left: -280px;}
 to {left: 0;}
}
@-moz-keyframes slide-in {
 from {left: -280px;}
 to {left: 0;}
}
@keyframes slide-out {
 from {left: 0;}
 to {left: -280px;}
}
Kalau sudah klik simpan, langkah selanjutnya yaitu buat file head.php atau terserah kalian. Copy paste kode html berikut ini lalu tempel pada head.php yang sudah kalian buat.

 <link rel="stylesheet" href="css/styles.css">
<header>
  <input type="checkbox" id="tag-menu"/>
  <label class="fa fa-bars fa-2x menu-bar" for="tag-menu"></label>
  <a class="navbar-brand"></a>
  <div class="jw-drawer">
<nav>
      <ul>
        <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li><a href="/about"><i class="fa fa-address-card-o"></i> About Us</a></li>
        <li><a rel="nofollow" href="#"><i class="fa fa-envelope-open"></i> Mailer</a></li>
        <li><a href="#"><i class="fa fa-mixcloud"></i> Music partner</a></li>
        <li><a href="#"><i class="fa fa-mixcloud"></i> Music Partner</a></li>
        <li><a href="#"><i class="fa fa-feed"></i> Blog</a></li>
        </ul>
        </nav>
        </div>
        </header>
Setelah selesai lalu klik simpan file. Pada bagian link yang saya beri tanda #, bisa kalian ganti dengan url webs kalian atau bisa dengan alamat email ataupun yang lainnya.

Langkah berikutnya adalah, memasukan file head.php atau navbar.php kedalam file inti atau index. Bagaimana caranya? Sangat mudah, kalian tinggal menginclude nya saja dengan cara seperti dibawah ini.
Contoh File Index

<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!-- Head Navbar -->
<?php include 'head.php'; ?>
</head>
<body>
<h1>Navbar Is Here</h1>
</body>
</html>
Kalau sudah selesai semua, kalian bisa lihat hasilnya seperti apa dan bagaimana jadinya. Jika terjadi erorr atau kesalahan, mungkin kalian tidak mengikuti langkah seperti diatas yang sudah saya jelaskan secara detail.

Dan untuk link demonya, bisa kalian lihat dibawah ini.

Live Demo

Mungkin itu saja yang dapat saya sampaikan, dan saya rasa cukup untuk pembahasan kali ini. Lebih atau kurangnya semoga bermanfaat khususnya bagi pemula.

Demikianlah Cara Membuat Navbar Keren Di Html. Atas perhatiannya saya ucapkan, Terimakasih.

Blogger
Disqus
Select your comment system