Scribd Logo
Unggah

Selamat datang di Scribd!

  • Slide 06

    Diunggah oleh

    Ahmad Yani S
    7 tayangan9 halaman
    lihjkhdjada

    Judul Asli

    SLIDE 06

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    lihjkhdjada

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    7 tayangan9 halaman

    Slide 06

    Diunggah oleh

    Ahmad Yani S
    lihjkhdjada

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 9

    Slide 06

    CSS Style lanjut

    Menu Drop down


    DropDown Menu atau Menu
    Dropdown adalah sebuah menu yang
    berisikan kumpulan link-link yang
    ditampilkan menurun kebawah jika
    menu tersebut di klik dan menu itu
    berfungsi sebagai pengarah ke
    halaman web lain, baik dari web kita
    sendiri atau dari web lain.

    Example

    Code

    <html>
    <head>
    <title> Menu drop down</title>
    <link href="ex-dropdown.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    </div>
    </div>
    </body>
    </html>

    CSS Navigation Bar


    Navigation bar = Daftar link
    Ini di gunakan untuk
    menghubungkan dokumen html yang
    satu dengan yang lain dengan
    menggunakan menu
    Navigation bar ada 2 jenis :
    Navigation bar horizontal
    Navigation bar vertical

    Navigation bar vertikal

    Code

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    }
    li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    }

    /* Change the link color on hover */


    li a:hover {
    background-color: #555;
    color: white;
    }
    </style>
    </head>
    <body>
    <h2>Vertical Navigation Bar</h2>
    <ul>
    <li><a 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>

    Navigation horizontal

    Code
    <!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>

    Anda mungkin juga menyukai