Cara Membuat Navigation bar Keren dengan CSS

Seotechman.com, Bogor 17/01/2019. 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 web, blog dan lain sebagainya.

Apa Itu Navigation Bar 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 web atau pun 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 pembuatan dan langkah-langkahnya, bisa perhatikan dibawah ini.

Cara Membuat Navigation Bar Keren (Menu Navigasi)

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

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.

KODE CSS

        * {
 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, langsung saja klik simpan. Langkah selanjutnya yaitu buat file head.php atau terserah kalian.

Copy paste kode HTML berikut ini lalu tempel kedalam head.php yang sudah kalian buat.

KODE HTML

 <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 web kalian atau bisa dengan alamat email ataupun yang lainnya.

Langkah berikutnya adalah, memasukan file head.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.

Demikianlah tutorial cara membuat navigation bar keren dengan CSS.

Semoga bermanfaat!

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini