JRTR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Berbagi informasi online, komputer, tutorial blogger, template untuk blogger, tips trik blogger.

» » » Cara Pasang Mega Menu Horizontal Drop Down Keren Habis
Rabu, 24 Oktober 2012

Cara Pasang Mega Menu Horizontal Drop Down Keren Habis

Rabu, Oktober 24, 2012 | Posted by: | 1 comment
Hallo Sahabat ! Bakalan-Tlogorejo-City --->> Apa Kabar...? Kali Ini Saya Akan Berbagi Dengan Sahabat Blogger Dan Pembaca Setia....Apakah sahabat blogger Bosan dengan tampilan drop down menu biasa-biasa saja, pingin agak keren dan berkelas,kalu ya,,,anda tidak salah lagi masuk ke blog sederhana saya ini,., coba saja menu mega drop down menu ini. Menu ini merupakan menu horizontal dimana menu drop down nya tidak seperti biasanya, melainkan sangat besar dan bercabang.

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/AVvXsEi_C4R6uyYxlZ9jHkfD_WjjvqcsJbuMdpK0h_gyBDUKZj6Ve-a8QLivISr3UNqAX7jAeDAc-mIDfBGETz5FP4n4vpc7MwPRcDF4_I9iTQh5HqfjPesJIrbkL02SCF95CY-IzXQg-vSOr8Xl/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_C4R6uyYxlZ9jHkfD_WjjvqcsJbuMdpK0h_gyBDUKZj6Ve-a8QLivISr3UNqAX7jAeDAc-mIDfBGETz5FP4n4vpc7MwPRcDF4_I9iTQh5HqfjPesJIrbkL02SCF95CY-IzXQg-vSOr8Xl/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><!-- Begin Home Item -->
<div class='dropdown_2columns'><!-- Begin 2 columns container -->
<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/AVvXsEg8MpuDOzZyqaZuzhSWn6opteT9_UmC3h7FZRGQZLygSxV6O_-AZlHorH5kS6CmgQ5HYmnXBG2WevausnA2jWiElfZa4hvGCeM6qdm5DhKWpmb8rWcXaa25qMZGCGVDh5tSD5R68t2ctUrr/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><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a class='drop' href='#'>5 Columns</a><!-- Begin 5 columns Item -->
<div class='dropdown_5columns'><!-- Begin 5 columns container -->
<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/AVvXsEgOu5Kx7je6DFMprV41Gahs9-MtA6GvUINYJ-nPLepsf4n5D1wjoKinCiKF_cYf30lpiNk5g3Sbtlf1qg3v15IIQX7qZUY5EVFxseb3pQU_oogxpDTXiybfvo4nJgsWjQef60S0s6GCYPZ6/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/AVvXsEi8EDN5ZOw5wUGnV5FxU7mNHT3K1_WaDNx0ATX2aLJazvtkNq6FC44Vh3Sm3hRW6ixZvpc1x6xdrIB5rm1vEhyphenhyphenUd0us_tkcoKwNTO0LzstMzjZJmdrRGbWqdAc0_QUJ9oeMSwedqeV3BjhD/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><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->
<li><a class='drop' href='#'>4 Columns</a><!-- Begin 4 columns Item -->
<div class='dropdown_4columns'><!-- Begin 4 columns container -->
<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><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<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><!-- Begin 3 columns Item -->
<div class='dropdown_3columns align_right'><!-- Begin 3 columns container -->
<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/AVvXsEi8EDN5ZOw5wUGnV5FxU7mNHT3K1_WaDNx0ATX2aLJazvtkNq6FC44Vh3Sm3hRW6ixZvpc1x6xdrIB5rm1vEhyphenhyphenUd0us_tkcoKwNTO0LzstMzjZJmdrRGbWqdAc0_QUJ9oeMSwedqeV3BjhD/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/AVvXsEgOu5Kx7je6DFMprV41Gahs9-MtA6GvUINYJ-nPLepsf4n5D1wjoKinCiKF_cYf30lpiNk5g3Sbtlf1qg3v15IIQX7qZUY5EVFxseb3pQU_oogxpDTXiybfvo4nJgsWjQef60S0s6GCYPZ6/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><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>
Perhatian
Ganti teks yang berwarna merah dengan kata-kata lainnya.

5. Simpan dan lihat hasilnya.

Source; http://blazerracing.blogspot.com/2012/10/cara-membuat-mega-drop-down-menu-dengan.html 
JokoRowoTlogoRejo Beri Komentar
Bagikan kepada teman!
Garis
Label: ,
300 x 250

1 komentar:

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN 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>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

Langgan: Catat Ulasan (Atom)
 
Design by JRTR Copyright © 2014 ~ 2015 Powered by Blogger
TOP