Cara Membuat Mega Dropdown Menu

176 views

alhadi.org – Cara Membuat Mega Dropdown Menu, Cara Membuat Mega Dropdown Menu

Cara Membuat Mega Dropdown Menu

Sobat blogger bosan dengan tampilan menu yang biasa – biasa saja ? coba pakai menu yang ini saja. Tips blog kali ini, saya ingin berbagi Cara Membuat Mega Dropdown Menu di blog. Menu ini menampilkan banyak sub menu sesuai dengan namanya Mega dropdown, desainya juga keren, sama dengan website-website profesional, dan tidak membuat loading blog berat. Untuk lebih jelasnya silahkan sobat lihat Live Demonya : Mega Dropdown Menu

Bagaimana sob ? Keren bukan ?..Untuk cara membuatnya juga tidak terlalu rumit, ikuti langkah-lngkah berikut ini :

1. Login ke blog kamu
2. Pilih Template > Edit HTML > Cari kode ]]>
3. Setelah ketemu letakan kode CSS di bawah ini tepat di atas kode ]]>
 

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(“http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png”) no-repeat right 8px;
}
#menu li:hover .drop {
 background:url(“http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/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.

  • Home

    Welcome !

    Ini adalah menu denan Mega Drop Down menu. Cara membuatnya hanya menggunakan CSS tanpa JavaScript

                

    Cross Browser Support

    ''

    Mega Drop Down Menu ini telah diuji dan berhasil untuk semua browser.

  • 5 Columns

    Ini adalah contoh untuk kolom 5

    Ganti dengan kata-kata Anda sendiri atau sebuah link.

    Ganti dengan kata-kata Anda sendiri atau sebuah link.

    Ganti dengan kata-kata Anda sendiri atau sebuah link.

    Ganti dengan kata-kata Anda sendiri atau sebuah link.

    Ganti dengan kata-kata Anda sendiri atau sebuah link.

    Fitur Post Dengan Images

    ''

    Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera AndaRead more…

    ''

    Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera AndaRead more…

    Ganti dengan kata-kata Anda sendiri atau sebuah link.

  • 4 Columns

    This is a heading title

    Some Links

    • ThemeForest
    • GraphicRiver
    • ActiveDen
    • VideoHive
    • 3DOcean

      

    Useful Links

    • NetTuts
    • VectorTuts
    • PsdTuts
    • PhotoTuts
    • ActiveTuts

      

    Other Stuff

    • FreelanceSwitch
    • Creattica
    • WorkAwesome
    • Mac Apps
    • Web Apps

      

    Misc

    • Design
    • Logo
    • Flash
    • Illustration
    • More…

      

  • 1 Column
    • FreelanceSwitch
    • Creattica
    • WorkAwesome
    • Mac Apps
    • Web Apps
    • NetTuts
    • VectorTuts
    • PsdTuts
    • PhotoTuts
    • ActiveTuts
    • Design
    • Logo
    • Flash
    • Illustration
    • Get This Menu

      

  • 3 columns

    Lists in Boxes

    • FreelanceSwitch
    • Creattica
    • WorkAwesome
    • Mac Apps
    • Web Apps

      

    • ThemeForest
    • GraphicRiver
    • ActiveDen
    • VideoHive
    • 3DOcean

      

    • Design
    • Logo
    • Flash
    • Illustration
    • More…

      

    Here are some image examples

    ''

    Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera AndaRead more…

    ''

    Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera AndaRead more…

  • Selamat sobat sudah mempunyai  Mega Dropdown Menu yang keren.

    Cukup sekian tips blog kali ini, Cara Membuat Mega Dropdown Menu. Semoga Bermanfaat.

    Script by : blazerracing.blogspot.com
    Terima Kasih Atas kunjungan anda di halaman  Cara Membuat Mega Dropdown Menu, Jangan lupa untuk Membookmars Halaman ini jika  Cara Membuat Mega Dropdown Menu berguna untuk anda.