Cara Mudah Membuat Menu Navigasi Horisontal Dropdown Sunrise. Sahabat Info Sinta semuanya, Salahsatu menu navigasi horisontal dengan script css yang bisa dijadikan alternatif untuk dipasang di blog adalah menu navigasi horisontal/dropdown menu (sun rise). Seperti gambar di bawah ini: Baca Juga Membuat Menu Navigasi Horisontal Dropdown Membuat Menu navigasi Horisontal Beberapa menu dropdown lainnya bisa dilihat disini: 1. Simple dropdown 2. Dropdown 2 level 3. Drop down massive blue Menu navigasi di atas terkesan rounded dengan warna coklat kekuningan mengarah ke warna orange disertai warna putih di belakang teks. Untuk membuat menu navigasi di atas, bisa ikuti prosedur berikut: 1. Login ke akun blogger Pilih Dashboard - Tata letak (Rancangan)- Edit HTML
cari kode berikut: ]]> 2. Di bagian atas kode tersebut masukkan kode berikut @charset "utf-8"; /* CSS Document */ body{ padding: 25px; } /*^'^ Navigation Structure ^'^*/ .nav-container-outer{ background: #990000; padding: 0px; height: 74px; background: url(http://i48.tinypic.com/hur12s.jpg); } .float-left{ float: left; } .float-right{ float: right; } .nav-container .divider{ display:block; font-size:1px; border-width:0px; border-style:solid; } .nav-container .divider-vert{ float:left; width:0px; display: none; } .nav-container .item-secondary-title{ display:block; cursor:default; white-space:nowrap; } .clear{ font-size:1px; height:0px; width:0px; clear:left; line-height:0px; display:block; float:none; } .nav-container{ position:relative; zoom:1; margin: 0 auto; } .nav-container a, .nav-container li{ float:left; display:block; white-space:nowrap; } .nav-container div a, .nav-container ul a, .nav-container ul li{ float:none; } .nav-container ul{ left:-10000px; position:absolute; } .nav-container, .nav-container ul{ list-style:none; padding:0px; margin:0px; } .nav-container li a{ float:none } .nav-container li{ position:relative; } .nav-container ul{ z-index:10; } .nav-container ul ul{ z-index:20; } .nav-container ul ul ul{ z-index:30; } .nav-container ul ul ul ul{ z-index:40; } .nav-container ul ul ul ul ul{ z-index:50; } li:hover>ul{ left:auto; } #nav-container ul { top:100%; } #nav-container ul li:hover>ul{ top:0px; left:100%; } /*^'^ Primary Items ^'^*/ #nav-container a{ padding:7px 17px 7px 18px; margin: 10px 0px 0px 0px; color: blue; font-family: Trebuchet MS, Arial, sans-serif, Helvetica; font-size:14px; text-decoration:none; font-weight: bold; background: url(http://i50.tinypic.com/an25cp.jpg); background-repeat: no-repeat; background-position: top; } #nav-container a:hover{ color: #6C3600; background: url(http://i49.tinypic.com/md1emv.jpg); background-repeat: no-repeat; background-position: center; } /*^'^ Secondary Items Container ^'^*/ #nav-container div, #nav-container ul{ padding:10px 4px 10px 4px; margin:0px 0px 0px 0px; background: url(http://i49.tinypic.com/xauknl.jpg); background-repeat: repeat-x; background-color: #FF9900; border-bottom: 1px solid #CA6500; } /*^'^ Secondary Items ^'^*/ #nav-container div a, #nav-container ul a{ padding:3px 10px 3px 6px; background-color: #FFFFFF; background: url(http://i48.tinypic.com/14l21jb.jpg); background-repeat: no-repeat; background-position: 0px 22px; font-size:11px; border-width:0px; border-style:none; margin: 0px 0px 0px 0px; width: 149px; } /*^'^ Secondary Items Hover State ^'^*/ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #FFFFFF; background: url(http://i48.tinypic.com/14l21jb.jpg); background-repeat: no-repeat; color:#CC0000; } /*^'^ Secondary Item Titles ^'^*/ #nav-container .item-secondary-title{ cursor:default; padding:4px 0px 3px 7px; color: #6C3600; font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica; font-size:11px; background: url(http://i47.tinypic.com/or1755.jpg); background-repeat: no-repeat; font-weight:bold; } /*^'^ Horizontal Dividers ^'^*/ #nav-container .divider-horiz{ border-top-width:1px; margin:5px 5px; border-color: #C16100; } /*^'^ Vertical Dividers ^'^*/ #nav-container .divider-vert{ border-left-width:1px; height:15px; margin:4px 2px 0px 2px; border-color:#AAAAAA; } Simpan template 3. Pada gadget html/javascript masukkan kode berikut:
Menu 5 Menu 5.1 Menu 5.3 Menu 5.4 Menu 6 Menu 7 Catatan: Pada script di atas Ganti semua tanda # pada href="#" dengan url target atau url tujuan. Teks Menu1 , Menu2, ..., diganti dengan teks yang akan ditampilkan di menu Agar script bisa berfungsi dengan baik, maka sebaiknya dicopy ke notepad atau word pad kemudian diedit sesuai kebutuhan blog anda. Contoh blog yang memakai menu horisontal dropdown sunrise bisa dilihat disini sekian posting saya tentang Cara Mudah Membuat Menu Navigasi Horisontal Dropdown Sunrise kali ini,
Baca konten-konten menarik Kompasiana langsung dari smartphone kamu. Follow channel WhatsApp Kompasiana sekarang di sini: https://whatsapp.com/channel/0029VaYjYaL4Spk7WflFYJ2H
Lihat Inovasi Selengkapnya
