Cara Membuat Menu Bar Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

apa kabar semuanya ? hehe ^_^
pada pagi hari ini saya akan membuat tutorial tentang Cara Membuat Menu Bar Dengan CSS3
walau menu bar ini simple namun tetap menarik bila di lihat :D,
kekurangan dari menu bar ini yaitu tidak di lengkapi dengan sub menu dan belum responsive,
mungkin lain waktu saya akan membuat tutorialnya.
seperti biasa, Langsung saja kita praktekan, silahkan ikuti langkah-langkah di bawah ini dengan benar.

1. Membuat File HTML
seperti biasanya kita siapkan terlebih dulu file HTML bernama index.html, lalu ketikkan script berikut ini .

 <!DOCTYPE html>
<html>
<head>
 <title>Menubar CSS</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class = "nav-primary" role = "navigation">
  <ul role = "menubar">
    <li role = "presentation"><a href = "#" role = "menuitem">Home</a></li>
    <li role = "presentation"><a href = "#" role = "menuitem">Menu 1</a></li>
    <li role = "presentation"><a href = "#" role = "menuitem">Menu 2</a></li>
    <li role = "presentation"><a href = "#" role = "menuitem">Menu 3</a></li>
  </ul>
</nav>
</body>
</html>

2. Membuat File CSS
jika sudah buat file htmlnya, silahkan buat file cssnya bernama style.css, dan ketikkan script berikut.

 
* {
 margin: 0;
 padding: 0;
}
body {
    font: normal normal 13px/1.25 arial, helvetica, sans-serif;
}

.nav-primary {
    background: #8ae1b7;
    background-image:
        linear-gradient(
            to bottom,
            rgba(118, 193, 157, 0),
            rgba(118, 193, 157, 0) 90%,
            rgba(118, 193, 157, 100) 90%,
            rgba(118, 193, 157, 100) 100%
        );
    clear: both;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav-primary li {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    vertical-align: bottom; /* IE9 fix: li v-aligns with baseline on hover without this */
}

.nav-primary a {
    color: #fff;
    display: block;
    font-size: 110%;
    font-weight: bold;
    overflow: hidden;
    padding: 0.99em 1.5em; /* slightly less than one to prevent rounding error */
    position: relative;
    text-decoration: none;
        -moz-transition: background 0.4s ease-out;
        -o-transition: background 0.4s ease-out;
        -webkit-transition: background 0.4s ease-out;
    transition: background 0.4s ease-out;
}

.nav-primary a::after {
    background: #b82222;
    content: "";
    height: 0.714em;
    left: 50%;
    margin-left: -0.42857em;
    position: absolute;
    top: -0.857em;
        -moz-transform: rotate( 45deg );
        -ms-transform: rotate( 45deg );
        -o-transform: rotate( 45deg );
        -webkit-transform: rotate( 45deg );
    transform: rotate( 45deg );
        -moz-transition: top 0.3s ease-out;
        -o-transition: top 0.3s ease-out;
        -webkit-transition: top 0.3s ease-out;
    transition: top 0.3s ease-out;
    width: 0.714em;
}

.nav-primary a:hover {
    background: #3498db;
    background-image:
        linear-gradient(
            rgba(78, 127, 103, 0),
            rgba(78, 127, 103, 0) 90%,
            rgba(78, 127, 103, 100) 90%,
            rgba(78, 127, 103, 100) 100%
        );
    overflow: hidden;
    position: relative;
}

.nav-primary a:hover::after {
    top: -5px;
}

@media only screen and (max-width: 600px) {
    .nav-primary a {
        border-radius: 0.6em;
        margin: 0.35em;
        padding: 0.5em;
    }
  
    .nav-primary a:hover {
        background-image: none;
        /*border: 0.25em solid rgba(78, 127, 103, 100);
        padding: 0.25em;*/
      box-shadow: inset 0 -5px 0 0 rgba(78, 127, 103, 100);
    }
}

mohon maaf jika tidak ada demonya hehe :)
silahkan di coba dan di pahami :D
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

SHARE THIS

Blog Comments 16
Facebook Comments

Unknown

10 September 2015 at 08:45

gagal faham ane :)

DeTutorial

10 September 2015 at 10:07

emang paling enak ngoding,,,
nice artikel oms

10 September 2015 at 10:10

wah kalo yang versi bloggernya gimana gan hehe

Nisful Ardi

10 September 2015 at 10:22

Aduhh gan... Paling gak ngerti kalo udah baca kode-kode gituan..

10 September 2015 at 12:01

dapat ilmu nbaru nih gan. makasih banyak :D

Rudi

10 September 2015 at 12:38

okey gan good tutorialnya, gue udah pernah sih buat menu tapi ngak sebagus itu jadi dapet ilmu baru nih tapi di kembangin lagi dong d kasih sub menu biar makin ciamik.. ijin save yaa bang :D