CSS: MegaMenu Dropdown


bikin file megamenu.css yang isinya:

.megamenu{ list-style:none; width:100%; margin:0 auto 0 auto; height:35px; padding:0 20px; }

.megamenu li{ float:left; display:block; text-align:center; position:relative; padding:5px 15px; margin-right:1px; border:none; }

.megamenu li:hover{ background:#e9e9e9; background:-moz-linear-gradient(top,#B0A122,#CABB3B); background:-webkit-gradient(linear,0% 0,0% 100%,from(#B0A122),to(#CABB3B)); }

.pilih{ background:#e9e9e9; background:-moz-linear-gradient(top,#B0A122,#CABB3B); background:-webkit-gradient(linear,0% 0,0% 100%,from(#B0A122),to(#CABB3B)); }

.megamenu li a{ font-family:UbuntuRegular,Arial,Helvetica,sans-serif; font-size:16px; color:#4A0000; display:block; outline:0; text-decoration:none; text-shadow:1px 1px 1px #ccc; }

.megamenu li:hover a{ color:red; text-shadow:1px 1px 1px #fff; }

.megamenu li .drop{ padding-right:21px; background:url(“img/drop .png”) no-repeat right 8px; }

.megamenu li:hover .drop{ background:url(“img/drop .png”) no-repeat right 7px; }

.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns{ margin:4px auto; float:left; position:absolute; left:-999em; text-align:left; padding:10px 5px 10px 5px; border-top:none; z-index:9999; background:#eee; background:-moz-linear-gradient(top,#CABB3B,#B0A122); background:-webkit-gradient(linear,0% 0,0% 100%,from(#CABB3B),to(#B0A122)); }

.dropdown_1column{ width:150px; }

.dropdown_2columns{ width:300px; }

.dropdown_3columns{ width:450px; }

.dropdown_4columns{ width:600px; }

.dropdown_5columns{ width:750px; }

.dropdown_3columns .promotions{ width:960px; margin-left:-445px; }

.megamenu li:hover .dropdown_1column, .megamenu li:hover .dropdown_2columns, .megamenu li:hover .dropdown_3columns, .megamenu li:hover .dropdown_4columns, .megamenu li:hover .dropdown_5columns{ left:-1px; top:auto; }

.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:140px; }

.col_2{ width:280px; }

.col_3{ width:440px; }

.col_4{ width:590px; }

.col_5{ width:740px; }

.megamenu p, .megamenu h2, .megamenu h3, .megamenu ul li{ font-family:Arial,Helvetica,sans-serif; line-height:21px; font-size:12px; text-align:left; text-shadow:1px 1px 1px #FFF; }

.megamenu h2{ font-size:21px; font-weight:400; letter-spacing:-1px; margin:7px 0 14px 0; padding-bottom:14px; border-bottom:1px solid #666; }

.megamenu h3{ font-size:16px; margin:7px 0 14px 0; padding-bottom:7px; border-bottom:1px solid #888; }

.megamenu p{ line-height:18px; margin:0 0 10px 0; }

.megamenu li:hover div a{ font-size:13px; color:black; line-height:20px; }

.megamenu li:hover div a:hover{ color:red; } .strong{ font-weight:bold; }

panggil sebelum </head>

<link rel=”stylesheet” type=”text/css” href=”megamenu.css” media=”screen, projection” />

contoh menu seperti ini:

<ul id=menu-holder>

<li id=”home”><a href=”home”>Home</a></li>

<li id=”gallery” ><a href=”#”>Gallery</a>

<div>

<div>

<h3>Heavylift</h3>

<a href=”gallery-hlpo”>Papua Operation</a>

<a href=”gallery-hlso”>Southpole Operation</a>

<a href=”gallery-hlmo”>Malaysia Operation</a>

</div>

<div>

<h3>Aircraft Movement</h3>

<a href=”gallery-ambi”>Biak</a>

<a href=”gallery-amff”>Firefighting</a>

<a href=”gallery-amso”>Southpole</a>

</div>

<div>

<h3>Firefighting</h3>

<a href=”gallery-ffpb”>Pekanbaru</a>

<a href=”gallery-ffpr”>Palangkaraya</a>

</div>

<div>

<h3>Aerofertilizing</h3>

<a href=”gallery-aero”>Pekanbaru & Jambi 2010</a>

<a href=”gallery-siak”>Riau 2011</a>

<a href=”gallery-rasau”>Rasau 2011</a>

</div>

<div>

<h3>Others</h3>

<a href=”gallery-dakota”>Garuda Monument</a>

<a href=”gallery-caravan”>Caravan Evacuation</a>

<a href=”galeri/South-Pole.pdf” target=”_blank”>ebook Start at the South Pole – A Logistics Challenge</a>

</div>

</div>

</li>

<li id=”video” ><a href=”#”>Video</a>

<div>

<div>

<h3>Aerofertilizing</h3>

<a href=”video-rijam”>Pekanbaru & Jambi</a>

<a href=”video-siak”>Riau</a>

<a href=”video-rasau”>Rasau</a>

</div>

</div>

</li>

<li id=”client” ><a href=”client”>Client</a></li>

<li id=”about” ><a href=”#”>Service</a>

<div>

<div>

<a href=”private”><h3>Private Jets</h3></a>

<a href=”private-EL600″>Embraer Legacy 600</a>

<a href=”private-F100EJ”>Fokker F100</a>

<a href=”private-BJ135″>Embraer BJ-135</a>

<a href=”private-RB390″>Raytheon 390</a>

<a href=”private-E120″>Embraer 120</a>

<a href=”private-BC1900″>Beechcraft-1900</a>

<a href=”private-CGC”>Cessna Grand Caravan</a>

</div>

<div>

<h3>Helicopter</h3>

<a href=”heavylifting”>Heavylifting</a>

<a href=”firefighting”>Firefighting</a>

<a href=”aerofertilizing”>Aerofertilizing</a>

</div>

<div>

<a href=”others”><h3>Others</h3></a>

<a href=”others”>Livestock</a>

<a href=”others”>Aeromedical</a>

<a href=”others”>Search and Rescue</a>

</div>

</div>

</li>

<li id=”about” ><a href=”#”>About</a>

<div>

<div>

<h3>B M S</h3>

<a href=”about-ceo”>From The C.E.O</a>

<a href=”about-us”>About Us</a>

<a href=”about-contact”>Contact Us</a>

<a href=”about-partnership”>Partnership</a>

</div>

</div>

</li>

</ul>

untuk contoh tampilnya seperti apa, silakan klik: http://aerostarjet-aviation.com/home

Author: Dewantara Mata Dunia

Indonesian Cyber Center

2 Comments Add yours

  1. How will criminal background checks influence most people in the long term.

  2. One day out of the week isn’t going to kill your weight loss.
    You should then follow up step 1 with the proper vitamins and herbal supplements, which in turn reduce
    insulin sensitivity and help in maintaining a healthy
    weight. Don’t let media hype confuse you; low cost
    and free weight loss solutions do exist.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s