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 1 |
| July 14, 2009 Posted by: Fauzie |
Sebelum ini kita telah melihat penggunaan "Widgetized Tabbed Box" sebagai alternatif kepada "drop down menu". Kelebihan menu bentuk ini ialah kita boleh memuatkan lebih banyak maklumat dan juga image.
Dalam rencana ini mari kita lihat satu lagi jenis "tabbed / drop down" menu yang saya kira mempunyai daya tarikannya yang tersendiri.
Dikenali sebagai "mega menu", menu-menu jenis ini adalah satu fenomena baru dalam penggunaan "drop down menu". Walaupun penggunaannya masih belum meluas, menu jenis ini sedang hangat diperkatakan. Ini adalah kerana penggunaan javaScript dan jQuery yang banyak.
Kelebihan dalam penggunaannya ialah:
"single drop down" apabila tajuk di hover boleh memuatkan lebih banyak maklumat dalam satu panel besar memuatkan semua kategori yang sama dalam satu panel boleh memuatkan icon dan image graphic lebih menarik Sila klik di sini, ini dan ini untuk melihat bagaimana ia berfungsi.
Untuk Bahagian I Mega Drop Down Menu ini, saya ingin tunjukkan satu menu yang mudah untuk diletakkan dalam blog atau site. Ia tidak memerlukan penggunaan script yang banyak dan dicipta oleh Soh Tanaka (Credit goes to Soh Tanaka of sohtanaka.com).
 |
Saya telahpun mencubanya dan anda boleh lihat demo ini. Untuk mencubanya anda bolehlah copy & paste kod-kod CSS dan HTML seperti berikut ke dalam notepad. Nota: copy & paste kod dari hingga ke dan save dengan menggunakan extension ".html" pada nama file. Pergi ke IE klik File ->Open File dan klik nama file. Dari kod ini anda boleh buat perubahan mengikut kehendak anda. Apa yang anda perlu buat ialah menukar href dan src link untuk URL dan image.
.container {
width: 400px;
margin: 10px auto;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 12px;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-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;
}
.tab_content {
padding: 10px;
font-size: 12px;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.5em;
}
.tab_content h3 a{
color: #254588;
}
.tab_content img {
float: left;
margin: 0 20px 10px 0;
border: 1px solid #ddd;
padding: 5px;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
</head<
<body>
<div class="container">
<ul class="tabs">
<li>
<a href="#tab1">Gallery</a></li>
<li>
<a href="#tab2">Submit</a></li>
<li>
<a href="#tab3">Resources</a></li>
<li>
<a href="#tab4">Contact</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Gallery</h2>
<a href="http://www.designbombs.com/light/simona-munteanu/">
<img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/simonamunteanu_thumb.gif" alt="" width="100" height="100" /></a>
<h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3><p>Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy. Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers everlastin' shotgun driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin' shack good roped in. Reckon stew tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin' landlord. </p><p>Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin bull, java, huntin'. </p><p>Stinky yonder pigs in, rustle kinfolk gonna marshal sittin' wagon, grandpa. Ya them firewood buffalo, tobaccee cabin.</p></div><div id="tab2" class="tab_content"><h2>Submit</h2><a href="http://www.designbombs.com/blog/sketch-blog/"> <img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/sketchblog_thumb.gif" alt="" width="100" height="100" /></a><h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3><p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p><p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p><p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p></div>
<div id="tab3" class="tab_content"><h2>Resources</h2><a href="http://www.designbombs.com/fashion/lukas-mynus/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/mynus_thumb.gif" alt="" width="100" height="100" /></a><h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3><p>Dirt tools thar, pot buffalo put jehosephat rent, ya pot promenade. Come pickled far greasy fightin', wirey, it poor yer, drive jig landlord. Rustle is been moonshine whomp hogtied. Stew, wirey stew cold uncle ails. Slap hoosegow road cooked, where gal pot, commencin' country. Weren't dogs backwoods, city-slickers me afford boxcar fat, dumb sittin' sittin' drive rustle slap, tornado. Fuss stinky knickers whomp ain't, city-slickers sherrif darn ignorant tobaccee round-up old buckshot that. </p><p>Deep-fried over shootin' a wagon cheatin' work cowpoke poor, wuz, whiskey got wirey that. Shot beer, broke kickin' havin' buckshot gritts. Drunk, em moonshine his commencin' country drunk chitlins stole. Fer tonic boxcar liar ass jug cousin simple, wuz showed yonder hee-haw drive is me. Horse country inbred wirey, skanky kinfolk. Rattler, sittin' darn skanky fence, shot huntin'.</p></div><div id="tab4" class="tab_content"><h2>Contact</h2><a href="http://www.designbombs.com/illustrations/esteban-munoz/"> <img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/estebanmunoz_thumb.gif" alt="" width="100" height="100" /></a><h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3><p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p><p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p><p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p></div></div></div>
