Cara Membuat Mega Drop Down Menu Dengan CSS

Bosan dengan tampilan drop down menu biasa-biasa saja, pingin agak keren dan berkelas, coba menu mega drop down menu ini. Menu ini merupakan menu horizontal dimana menu drop down nya tidak seperti biasanya, melainkan sangat besar dan bercabang.

DEMO

1. Login ke blog kamu

2. Pilih Template > Edit HTML > Cari kode ]]></b:skin>

3. Setelah ketemu letakan kode CSS di bawah ini tepat di atas kode ]]></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/AVvXsEjWweMiqV8g2XJmWybUpjjYOL47PvTLoVKwVpfFJoJEp_Lf07oS_UZHEjfVInkAA9aTDN2l26qIyDSwBcurxRK1tfyHcT8DcUYy2g3Om9pkmd_9nOEo3On3NiP2S1T-8c_4hXxF0MEJ2pyE/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWweMiqV8g2XJmWybUpjjYOL47PvTLoVKwVpfFJoJEp_Lf07oS_UZHEjfVInkAA9aTDN2l26qIyDSwBcurxRK1tfyHcT8DcUYy2g3Om9pkmd_9nOEo3On3NiP2S1T-8c_4hXxF0MEJ2pyE/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.

4. 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/AVvXsEgajPyaCLnhgmULhs08NxMff-LJ085s6pUU9pActnRooCVJ86YH5NSPfS_d_ckePOAfksIj23yaZ4EiEk_xgQDi8JGaarawb8hrnoep0qHCZpXwJG4E3gCn-Grqaq_C43Etiv04v39S9gn0/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/AVvXsEiDPEFK3zkE2lj7j1ogKIAyulDEkCXWGn6E92d_leEtZu9RQKT5oHF2bltTpoZrqb1NCEC1GZmL5FXnZO63hOs1uChBHivQBq4djBXe85hASaJ0DB3yfMNpj_dbU5NYpqqpk0a7pfpGRtcU/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/AVvXsEh1jtAc-e5kmLwlnf43FixBb4VcsfN-OpfcRClzoDt83-B3umwOIEZ2NreH7jPp85OR_fr-c1NcYTEDdYz-3dXgzKG3S5Wqds6wfNYnjadvuyFr_z_YUVFVdHCCU_525-l5lRiJg1uAnkCh/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/AVvXsEh1jtAc-e5kmLwlnf43FixBb4VcsfN-OpfcRClzoDt83-B3umwOIEZ2NreH7jPp85OR_fr-c1NcYTEDdYz-3dXgzKG3S5Wqds6wfNYnjadvuyFr_z_YUVFVdHCCU_525-l5lRiJg1uAnkCh/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/AVvXsEiDPEFK3zkE2lj7j1ogKIAyulDEkCXWGn6E92d_leEtZu9RQKT5oHF2bltTpoZrqb1NCEC1GZmL5FXnZO63hOs1uChBHivQBq4djBXe85hASaJ0DB3yfMNpj_dbU5NYpqqpk0a7pfpGRtcU/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>

Perhatian
Ganti teks yang berwarna merah dengan kata-kata lainnya.

5. Simpan dan lihat hasilnya.

Cara Membuat Mega Drop Down Menu Dengan CSS

0 Response to "Cara Membuat Mega Drop Down Menu Dengan CSS"

Posting Komentar

Postingan Populer

Label