Membuat Menu Navigasi Pelangi Sederhana

Tabel Konten
  1. Sedikit Penyesuaian: 

Menu Navigasi Pelangi

Demonya bisa kamu lihat di sini. Oke, kita mulai proyeknya sekarang!

  • Pertama-tama, salinlah baris kode pemodel ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau di atas kode </style>:
    #pelangi             {font:normal 14px Trebuchet MS,Arial,Sans-Serif;margin:0 0 50px;}
    #pelangi ul          {list-style-type: none;margin:10px 0;padding:0;height:95px;}
    #pelangi a strong    {position:relative;top:40%;overflow:hidden;}
    #pelangi li a        {width:95px;height:95px;display:inline-block;float:left;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;text-align:center;}
    #pelangi li a:link,
    #pelangi li a:visited,
    #pelangi li a:active {font-weight:bold;color:#FFFFFF;text-decoration:none;margin:2px 2px;}
    #pelangi li a:hover  {margin:0 0;width:99px;height:99px;opacity:0.9;}
  • Setelah itu letakkan kerangka navigasi ini di tempat yang kamu inginkan: (Pelajari tentang beberapa tempat alternatif untuk meletakkan kerangka navigasi di bab ini):
    <div id="pelangi">
        <ul>
            <li><a href="#" style="background-color: firebrick;"><strong>Beranda</strong></a></li>
            <li><a href="#" style="background-color: red;"><strong>Profil</strong></a></li>
            <li><a href="#" style="background-color: orangered;"><strong>CSS</strong></a></li>
            <li><a href="#" style="background-color: darkorange;"><strong>HTML</strong></a></li>
            <li><a href="#" style="background-color: orange;"><strong>Forum</strong></a></li>
            <li><a href="#" style="background-color: gold;"><strong>JavaScript</strong></a></li>
            <li><a href="#" style="background-color: forestgreen;"><strong>Daftar Isi</strong></a></li>
            <li><a href="#" style="background-color: darkgreen;"><strong>Komentar</strong></a></li>
            <li><a href="#" style="background-color: dodgerblue;"><strong>CSS</strong></a></li>
            <li><a href="#" style="background-color: blue;"><strong>Sunting</strong></a></li>
            <li><a href="#" style="background-color: mediumblue;"><strong>Kontak</strong></a></li>
            <li><a href="#" style="background-color: mediumslateblue;"><strong>Buku Tamu</strong></a></li>
            <li><a href="#" style="background-color: violet;"><strong>Blog</strong></a></li>
            <li><a href="#" style="background-color: darkviolet;"><strong>Masuk</strong></a></li>
        </ul>
    </div>
  • Klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian-penyesuaian.

Sedikit Penyesuaian: 

  • Setiap unit menu didefinisikan sebagai:
    <li><a href="#" style="background-color: warna;"><strong>Nama Menu</strong></a></li>
  • Gantilah kode # dengan alamat URL, berikut ganti juga Nama Menu dengan nama menu yang sesuai dengan URLnya.
  • Kode-kode seperti red, orange, green dan yang lainnya adalah kode warna alternatif lain selain kode HEX dan RGB. Pelajari tabel kodenya di sini.

3 Komentar

  • Frzhrdynt

    Nice tutorial dengan Css sob, tak kira dengan Jquery tersebut. Sob follow sukses, ditunggu followbacknya :D

  • Anonim

    Nice good

  • Ahmad Maryuki

    nice info gan, tp saya baca di artikel juga penggunaan css seperti itu juga tidak terlalu berat. makasih gan infonya!

Komentar telah ditutup.