RobbiHeN

[:en]Membuat Dropdown Menu Dengan CSS – part 1[:]

[:en]Kali ini saya akan berbagi tutorial sederhana untuk membuat Dropdown Menu menggunakan HTML dan CSS saja. Saya mencoba membuat sebuah menu horizontal untuk obi.ninja. Di ke tujuh menu saya hanya membuat 2 buah dropdown saja, selebihnya silakan mencoba memodifikasi sendiri.

Langkah-langkah untuk membuat dropdown menu adalah sebagai berikut :

1. Siapkan dulu cemilan dan minuman (kopi boleh, teh  boleh atau es jus lebih baik)

2. Silakan siapkan icon yang akan digunakan untuk menu (jika dibutuhkan), untuk icon gratisan silakan download dan pilih di link ini

3. Buat folder yang berisi file index.html, folder images (untuk menyimpan icon), dan folder css untuk menyimpan css (buat file style.css). Lalu copykan icon berwarna dasar putih di folder images dan yang berwarna hitam di folder hitam di dalam images

4. Buka file index.html lalu ketikkan source code berikut ini

<html>
<head>
    <title>Menu Responsive Obi.ninja</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head>

<body>
<nav>  
    
</nav>
</body>
</html>

5. tag nav merupakan tag baru yang terdapat pada HTML 5 yang fungsinya untuk memberikan tanda bahwa itu adalah navigasi.

6. Kemudian lanjut ketik list dengan menggunakan unordered list (<ul>) di dalam tag nav, seperti contoh di bawah ini

<ul>
        <li>
            <a  href="#" title="">
                <span id="icon-home">Home</span>
            </a>
        </li>
        <li>
            <a  href="#" title="">
                <span  id="icon-art">Art</span>
            </a>
            <ul>
                <li>
                    <a  href="#" title="">
                        <span  id="sub-icon-art">Design</span>
                    </a>
                    <a  href="#" title="">
                        <span  id="sub-icon-art">Photography</span>
                    </a>
                    <a  href="#" title="">
                        <span  id="sub-icon-art">Web Design</span>
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a  href="#" title="">
                <span  id="icon-ayahasi">Ayah ASI</span>
            </a>
            <ul>
                <li>
                    <a  href="#" title="">
                        <span  id="sub-icon-ayahasi">Bayi</span>
                    </a>
                    <a  href="#" title="">
                        <span  id="sub-icon-ayahasi">Family</span>
                    </a>
                    <a  href="#" title="">
                        <span  id="sub-icon-ayahasi">Parenting</span>
                    </a>
                    <a  href="#" title="">
                        <span  id="sub-icon-ayahasi">Tips Trick</span>
                    </a>
                    <a  href="#" title="">
                        <span  id="sub-icon-ayahasi">Cek Promo</span>
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a  href="#" title="">
                <span  id="icon-hobi">Hobi</span>
            </a>

        </li>
        <li>
            <a  href="#" title="">
                <span  id="icon-kuliah">Kuliah</span>
            </a>
        </li>
        <li>
            <a  href="#" title="">
                <span  id="icon-nyeloteh">Nyeloteh</span>
            </a>
        </li>
        <li>
            <a  href="#" title="">
                <span  id="icon-technoninja">TechnoNinja</span>
            </a>
        </li>
    </ul>

lanut ke part 2…

[:]

robbihen

, ,

Leave a Reply