Untuk pembuatan menu ini sama sekali tanpa menggunakan bantuan jQuery, atau dengan kata lain bila anda menggunakan menu ini maka tidak akan begitu berpengaruh pada kecepatan atau pemuatan situs atau blog Anda, di karenakan Cool Sunrise Gloss Drop Down Menu ini menggunkana bantuan CSS.
Mengingat banyaknya blogger yang mengeluh akan kecepatan atau pemuatan situs atau blog mereka karna Navigation Menus yang di gunakan, maka menu ini merupakan salah satu sarana atau alternatif yang cocok untuk situs atau blog mereka.
Demo Cool Sunrise Gloss Drop Down Menu
Cara Membuat
Berikut ini adalah CSS dan JavaScript standar yang di gunakan untuk membuat Cool Sunrise Gloss Drop Down Menu. Silahkan Anda lakukan sedikit perubahan pada kode JavaScript untuk menyesuaikannya pada situs atu blog Anda!
CSS
/*----Cool Sunrise Gloss Drop Down Menu by Oto Website----*/
@otowebsite "utf-8";
/* CSS Document */
body{
padding: 25px;
}
/*^'^ Navigation Structure ^'^*/
.ow-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(https://code-otowebsite.googlecode.com/svn/trunk/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.ow-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.ow-container .divider-vert{
float:left;
width:0px;
display: none;
}
.ow-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;
}
.ow-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.ow-container a, .ow-container li{
float:left;
display:block;
white-space:nowrap;
}
.ow-container div a, .ow-container ul a, .ow-container ul li{
float:none;
}
.ow-container ul{
left:-10000px;
position:absolute;
}
.ow-container, .ow-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.ow-container li a{
float:none
}
.ow-container li{
position:relative;
}
.ow-container ul{
z-index:10;
}
.ow-container ul ul{
z-index:20;
}
.ow-container ul ul ul{
z-index:30;
}
.ow-container ul ul ul ul{
z-index:40;
}
.ow-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#ow-container ul {
top:100%;
}
#ow-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^'^ Primary Items ^'^*/
#ow-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(https://code-otowebsite.googlecode.com/svn/trunk/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}
#ow-container a:hover{
color: #6C3600;
background: url(https://code-otowebsite.googlecode.com/svn/trunk/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}
/*^'^ Secondary Items Container ^'^*/
#ow-container div, #ow-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(https://code-otowebsite.googlecode.com/svn/trunk/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}
/*^'^ Secondary Items ^'^*/
#ow-container div a, #ow-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(https://code-otowebsite.googlecode.com/svn/trunk/item-secondary-bg.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 ^'^*/
#ow-container div a:hover, #ow-container ul a:hover{
background-color: #FFFFFF;
background: url(https://code-otowebsite.googlecode.com/svn/trunk/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}
/*^'^ Secondary Item Titles ^'^*/
#ow-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(https://code-otowebsite.googlecode.com/svn/trunk/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}
/*^'^ Horizontal Dividers ^'^*/
#ow-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#ow-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}
HTML/JavaScript
<div class="ow-container-outer"> <img src="https://code-otowebsite.googlecode.com/svn/trunk/nav-bg-l.jpg" alt="" class="float-left" /> <img src="https://code-otowebsite.googlecode.com/svn/trunk/nav-bg-r.jpg" alt="" class="float-right" /> <ul id="ow-container" class="ow-container"> <li><a class="item-primary" href="http://www.otowebsite.blogspot.com/">HOME</a> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Products</a> <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Quality</a> <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Services</a> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Very Long Item</a> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Fully Flexible</a> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li> <li class="clear"> </li></ul> </div>
Dari Meja Editor!
Sekian dulu untuk tutorial tentang Cool Sunrise Gloss Drop Down Menu, mudah-mudahan Anda senang dengan tutorial kali ini dan bisa bermanfaat untuk Anda. Bila ada pertanyaan tentang tutorial di atas jangan ragu untuk bertanya, cukup lemparkan pertanyaan Anda di kotak komentar, Saya akan berusaha secepat mungkin membalasnya!
Posting Komentar Blogger Disqus
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>
Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.
Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.
Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Konversi Kode di Sini! Daftar Member Aktif