jom kita blog

Cataloged Autobiography
BERKENAAN SAYA

Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..

The Readable Journal
MENEROKA ARTIKEL

Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini

Astrolab Tool
KATEGORI ARTIKEL

Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini

MEGA DROP MENU BAHAGIAN 2

July 19, 2009
Posted by: Fauzie

Kandungan Tutorial

Dalam Bahagian I rencana berkenan Mega Drop Down Menu ini, saya telah tunjukkan link untuk tiga websites yang telah menggunakan Mega menu ini:
foodnetwork.com, Action Envelope dan B&Q

Penggunaan menu jenis besar ini semakin popular. Ini adalah kerana webmaster berpeluang memuatkan lebih banyak maklumat dan juga icon dan graphics dalam satu penal besar.

Boleh dikatakan, semua menu ini bergantung kepada javascript dan juga jquery. Masaalahnya sekarang kebanyakan kita tidak mahir dalam script seperti ini.

Dalam mencari contoh mega menu yang mudah difahami, saya telah bertemu satu contoh yang paling saya suka apabila memperkatakan "drop menu" ini.

Menu ini dicipta oleh Eric Watson (credit goes to him), dan apa yang paling menarik ialah Eric telah berjaya membangunkan satu mega menu yang semua kodnya adalah CSS dan HTML (pure CSS menu). Menurut Eric, menu ini adalah "the first Pure CSS mega menu" yang pernah dibangunkan.

Menurut Eric menu ini mudah untuk dibuat, set up dan juga untuk dibuat modification. Dan saya bersetuju dengan pendapat ini kerana saya telahpun mencubanya dan membuat sedikit modification dengan menambah kod-kod yang sesuai.

Ini adalah demo site yang dibina oleh Eric dan ini pula adalah demo site yang telah saya bina. Sila lihat perubahan yang telah saya buat. Sila hover atau letakkan cursor ke atas tajuk navigation menu.

Anda boleh copy & paste kod-kod seperti di bawah ini untuk melihat bagaimana ianya telah dibuat. Seperti biasa, saya lebih suka jika anda copy & paste dalam notepad dan browse di IE (copy dan paste dari <head> hingga </head> . Dengan cara ini lebih mudah untuk anda memahaminya.

<htm>
<head>

<style type='text/css'>
#mega {
list-style:none;
font-weight:bold;
font-family:verdana;
height:2em;
margin:0 -1px 0 0;
}
#mega li {
background:#b40404;
border:2px solid #ffffff;
margin-left:-0px;
float:left;
width:140px;
text-align:center;
position:relative;
}
#mega li:hover{
background:#ff8000;
border:0px solid #ff8000;
border-bottom:0;
padding:7px 0 1px 0;
margin-top:-7px;
z-index:1;
-moz-border-radius-topright: 10px;
-khtml-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-khtml-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
#mega a{
color:#ffffff;
font:verdana, Sans-serif;
outline:0;
text-decoration:none;
display:block;
line-height:2em;
}
#mega div{
position:absolute;
left:-999em;
margin-top:1px;
width:350px;
padding:0 10px 10px;
border:1px solid #e6e6e6;
border-top:0;
font-weight:normal;
text-align:left;
background:#fbf5ef;
-moz-border-radius-bottomright: 15px;
-khtml-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-bottomleft: 15px;
-khtml-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;
}
#mega li:hover div{
left:-1px;
top:auto;
}
#mega li.dif:hover div{
left:-221px;
}
#mega div h2{
background:#f6e3ce;
color:#000000;
font-size:1em;
font-weight:bold;
padding:5px 10px;
margin:10px 0 5px 0;
clear:both;
float:left;
width:330px;
position:relative;
-moz-border-radius-topright: 5px;
-khtml-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-khtml-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
#mega div p{
float:left;
width:106px;
padding-left:10px;
position:relative;
}
#mega div p a{
color:#2e2e2e;
font:verdana;
text-decoration:none;
float:left;
clear:left;
width:100%;
line-height:1.4;
}
#mega div a:hover,#mega div a:focus,#mega div a:active{
text-decoration:none;
}
#mega div .s1, #mega div .s2, #mega div .s3 {
position:absolute;
width:100%;height:100%;
}
#mega div .s1 {
background:url(http://i425.photobucket.com/albums/pp331/fauzi6009/rightcorner.png) 100% 0 no-repeat;
top:1px;right:-9px;
}
#mega div .s2 {
background:url(http://i425.photobucket.com/albums/pp331/fauzi6009/leftcorner.png) 0 100% no-repeat;
bottom:-9px;left:1px;
}
#mega div .s3 {
background:url(http://i425.photobucket.com/albums/pp331/fauzi6009/sideshadow.png) 100% 100%;
top:9px;right:-9px;
}
#mega li:hover .s4 {
background:url(images/li-shadow.png) 100% 0 repeat-y;
position:absolute;
top:0;right:-9px;
height:100%;
padding:0 8px 0 0;
}
* html #mega li:hover .s4 {
background:none;
}
#mega li:hover .dif-s4 {
padding-bottom:9px
}
</style>

</head>

<body>
<div id="wrap">
<ul id="mega">
<li><a href="#">HOME</a> <b class="s4"></b>
<div> <b class="s1"></b><b class="s2"></b><b class="s3"></b>

<h2>Egyptian Artifacts</h2>
<p><a href="http://s425.photobucket.com/albums/pp331/fauzi6009/?action=view&current=egypt3.jpg" target="_blank"><img border="0" alt="egypt vase" src="http://i425.photobucket.com/albums/pp331/fauzi6009/egypt3.jpg"/>Egyptian Vase</a></p>
<p><a href="http://s425.photobucket.com/albums/pp331/fauzi6009/?action=view&current=egypt1-1.jpg" target="_blank"><img border="0" alt="egypt queen" src="http://i425.photobucket.com/albums/pp331/fauzi6009/egypt1-1.jpg"/>Egyptian Queen</a></p>
<p><a href="http://s425.photobucket.com/albums/pp331/fauzi6009/?action=view&current=egypt2-2.jpg" target="_blank"><img border="0" alt="egypt farmer 2" src="http://i425.photobucket.com/albums/pp331/fauzi6009/egypt2-2.jpg"/>Egyptian Farmer</a></p>

<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>

<h2>Location</h2>
<p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
<p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
<p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>

</div>
</li>
<li><a href="#">ABOUT</a> <b class="s4"></b>
<div> <b class="s1"></b><b class="s2"></b><b class="s3"></b>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a><a href="#">Dance</a></p>

<p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a><a href="#">Perform</a></p>
<p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a><a href="#">Math</a></p>
<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>

<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
</div>
</li>
<li><a href="#">SCHOOLS</a> <b class="s4"></b>

<div> <b class="s1"></b><b class="s2"></b><b class="s3"></b>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
<p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
<p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>

<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>

<h2>Location</h2>
<p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
<p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
<p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>

<h2>Months</h2>
<p><a href="#">Janary</a><a href="#">February</a><a href="#">March</a><a href="#">April</a></p>
<p><a href="#">May</a><a href="#">June</a><a href="#">July</a><a href="#">August</a></p>
<p><a href="#">September</a><a href="#">October</a><a href="#">November</a><a href="#">December</a></p>

</div>
</li>
<li class="dif"><a href="#">MAP</a> <b class="s4 dif-s4"></b>
<div> <b class="s2"></b><b class="s3"></b>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a><a href="#">Math</a><a href="#">Cooking</a></p>

<p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a><a href="#">Algebra</a><a href="#">Fitness</a></p>
<p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a><a href="#">Training</a><a href="#">Web Design</a></p>
<h2>Teachers</h2>

<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
</div>

</li>
<li class="dif"><a href="#">SUPPORT</a> <b class="s4 dif-s4"></b>
<div> <b class="s2"></b><b class="s3"></b>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a></p>
<p><a href="#">Names</a><a href="#">Study</a></p>

<p><a href="#">Health</a><a href="#">Dance</a></p>
<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a><a href="#">Steve</a><a href="#">Mack</a><a href="#">Fred</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">Lemmon</a><a href="#">Stone</a><a href="#">Bella</a></p>

<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Shannon T</a><a href="#">Sarah</a><a href="#">Ralph</a></p>
</div>
</li>
<li class="dif"><a href="#">CONTACT</a> <b class="s4 dif-s4"></b>
<div> <b class="s2"></b><b class="s3"></b>

<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
<p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
<p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>

<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a><a href="#">Steve</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">Madeline</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Lorence R</a></p>

<h2>Location</h2>
<p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
<p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
<p><a href="#">San Diego</a><a href="#">Los Angles</a></p>

</div>
</li>
</ul>

</div>

Kandungan Tutorial

WARNING:This layout is only compatible with modern browsers. Please download Firefox, Chrome or Safari, and forget about Explorer!