Cara Membuat Menu Drop Down Super Multi Keren

Cara Membuat Menu Drop Down Super Multi Keren - ITFS ARI

Salam Sukses Bagi Pengunjung Setia StyLe Of TKJ, Kali Ini Saya akan posting tentang Menu Drop Down di Blog,

Ok langsung ke tips nya :

1. Pertama siapkan diri anda melihat Perubahan Tampilan Blog Anda.
2. Jangan Lupa Makan Dulu Sebelum mengerjakanya,
3. Masuk ke Blog Anda masing - masing.
4. Pilih Template > Edit HTML > Cari kode ]]></b:skin>

5. Setelah Ketemu Copy code dibaah ini di atas code ]]></b:skin>

body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}

/* Navigation Bar */

#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;

/* Rounded Corners */

-moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

/* Background color and gradients */

background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

/* Borders */

border: 1px solid #002232;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}

#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;

/* Background color and gradients */

background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}

#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvxppP30OgWPPVtSk34c8oKQ9Omw0sA3ApFdFl9jdHbcwWrw9sarvM5qAJFJ8POcwdmw9amrANVRCnFICXk1nsw5CVKI1RsSFm7rED-OOCD71H3-KrRuZtQZKKdDu4_nRt1ivh7RA5X8fU/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvxppP30OgWPPVtSk34c8oKQ9Omw0sA3ApFdFl9jdHbcwWrw9sarvM5qAJFJ8POcwdmw9amrANVRCnFICXk1nsw5CVKI1RsSFm7rED-OOCD71H3-KrRuZtQZKKdDu4_nRt1ivh7RA5X8fU/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;

/* Gradient background */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

/* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px ;
z-index:444 !important;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
 float:right !important;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}

#menu li:hover div a {
 font-size:12px;
 color:#015b86;
}
#menu li:hover div a:hover {
 color:#029feb;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;

/* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

/* Shadow */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;

/* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}

.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}

Simpan.

6. Kembali ke menu Tata Letak > Add Gadget > Pilih HTML/JavaScript > Copy kode di bawah ini.

<div id='menu'>
<li><a class='drop' href='#'>Home</a>
<div class='dropdown_2columns'>

<div class='col_2'>
<h2>
Welcome !</h2>
</div>
<div class='col_2'>
<p>
Ini adalah menu denan Mega Drop Down menu. Cara membuatnya hanya menggunakan CSS tanpa JavaScript</p>
</div>
<div class='col_2'>
<h2>
Cross Browser Support</h2>
</div>
<div class='col_1'>
<img alt='' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzapdhDA1y1ra8nlO7V60-zs8q4c_lzNJ_cyimg1nhWjekfNKxZMOxADAObR1psBKxvnmEhR-eba38DqhF0Ra3fgNwbtJ_GUpFdFnGVNhZWN6c3fbKDDzsQbFcqG-BW8IpM4rern6o8mYk/s1600/browsers.png' width='125'/>
</div>
<div class='col_1'>
<p>
Mega Drop Down Menu ini telah diuji dan berhasil untuk semua browser.</p>
</div>
</div>

</li>

<li><a class='drop' href='#'>5 Columns</a>
<div class='dropdown_5columns'>

<div class='col_5'>
<h2>
Ini adalah contoh untuk kolom 5</h2>
</div>
<div class='col_1'>
<p class='black_box'>
Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>
Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='italic'>
Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>
Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='strong'>
Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_5'>
<h2>
Fitur Post Dengan Images</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4QdziJkLNPsnW77XBP6Y_DqmkWjLDsuYdZusclWJpqvvyo9N4tlE2vgWq3dplPzXQu922Qeqje1rtpxYwNnzUl9ysV4MLthIPGzI9uxAubp2zq0NQVOHdrsTf4cPKQk5lB9JQJoPgjRDR/s1600/01.jpg' width='70'/>
<p>
Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
<br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDpHyQ5SFdhbzLYYht5agRW72GpcsPM5A-KKT_AwOtGzgtO3T0aTvYukd0JqgVwZTOkJP0n5YS0TS3BIpws-x9lR4zL9PhpwylsyJjkMAW4uH9yrtXZ9ux1zeqypkh1oRI7ttCJwPoxzqI/s1600/02.jpg' width='70'/>
<p>
Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
<div class='col_2'>
<p class='black_box'>
Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
</div>

</li>

<li><a class='drop' href='#'>4 Columns</a>
<div class='dropdown_4columns'>

<div class='col_4'>
<h2>
This is a heading title</h2>
</div>
<div class='col_1'>
<h3>
Some Links</h3>
<ul>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>
</div>
<div class='col_1'>
<h3>
Useful Links</h3>
<ul>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
</ul>
</div>
<div class='col_1'>
<h3>
Other Stuff</h3>
<ul>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>
</div>
<div class='col_1'>
<h3>
Misc</h3>
<ul>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>
</div>
</div>

</li>

<li class='menu_right'><a class='drop' href='#'>1 Column</a>
<div class='dropdown_1column align_right'>
<div class='col_1'>
<ul class='simple'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='http://blazerracing.blogspot.com/'>Get This Menu</a></li>
</ul>
</div>
</div>
</li>
<li class='menu_right'><a class='drop' href='#'>3 columns</a>
<div class='dropdown_3columns align_right'>

<div class='col_3'>
<h2>
Lists in Boxes</h2>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>
</div>
<div class='col_3'>
<h2>
Here are some image examples</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDpHyQ5SFdhbzLYYht5agRW72GpcsPM5A-KKT_AwOtGzgtO3T0aTvYukd0JqgVwZTOkJP0n5YS0TS3BIpws-x9lR4zL9PhpwylsyJjkMAW4uH9yrtXZ9ux1zeqypkh1oRI7ttCJwPoxzqI/s1600/02.jpg' width='70'/>
<p>
Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
<br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4QdziJkLNPsnW77XBP6Y_DqmkWjLDsuYdZusclWJpqvvyo9N4tlE2vgWq3dplPzXQu922Qeqje1rtpxYwNnzUl9ysV4MLthIPGzI9uxAubp2zq0NQVOHdrsTf4cPKQk5lB9JQJoPgjRDR/s1600/01.jpg' width='70'/>
<p>
Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
</div>

</li>

</div>
<br>

Selesai dan Simpan

Perhatian :
Silahkan Lakukan Editing Sesuai Dengan Keinginan Anda.

Sekian Tentang Cara Membuat Menu Drop Down Super Multi Keren

Jangan Lupa Comentarnya

Last aRi Stevand Simbolon

Search This Blog

Cara Membuat Menu Drop Down Super Multi Keren - ITFS ARI

Labels

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Like Box Facebook, Follow Twitter Dan Blogger Melayang - ITFS ARI

Konfigurasi TCP/IP Versi Debian - ITF SARI

Perjalanan Hidup - ITFS ARI