Uncategories Membuat menu navbar horizontal

Saturday, April 1, 2017

Membuat menu navbar horizontal

Posted By: Saturday, April 01, 2017 Leave a Reply
Membuat menu atau istilah lainya adalah navba, menu atau navbar ada dua jenis tampilan yaitu menu vertikal dan menu horizontal,  pada html untuk membuat menu vertikal  biasanya menggunakan kode seperti di bawah ini :
 <ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

dan hasil dari pada kode itu adalah maka akan tampil seperti menu di bawah ini bawah ini

  1. Home
  2. News
  3. Contact
  4. About
untuk membuat menu vertikal yang lebih menarik maka kita bisa menambahkan kode cssnya agar tampilan menu bisa lebih menarik. berikut adalah code css untuk mempercantik tampilan menu :

 <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}
</style>

sehingga hasilnya seperti menu di bawah ini


    Vertical Navigation Bar

    sementara untuk mengubah menu itu agar berubah tampilannya menjadi horizontal adalah scriptnya sebagai berikut

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

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

    li a:hover {
        background-color: #111;
    }
    </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>

    </body>
    </html>
     sehingga tampil menu seperti di bawah ini
    nah itulah cara membuat menu vertikal dan horizontal pake html.

    0 komentar: