Web Design & Development

Need a Website?

Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Logo / Corporate Identity

Need a Logo?

Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Seach Engine Optimization

Need to be Heard?

Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

eCommerce

Have Product to Sell?

Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Thursday, August 6, 2009

6Aug
2009





Mega Menu

Sebelum ini kita telah melihat penggunaan "widgetized tabbed box" sebagai alternatif kepada "drop down menu". Kelebihan menu bentuk ini ialah kita boleh memuatkan 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

Kembali ke Jom Kita Blog

Dapatkan kod di bawah ini


<html>
<head>
<style type='text/css'>
body {
background: #ffffff;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
color: #444;
}
h1 {font-size: 3em; margin: 30px 0;}
.container {width: 400px; margin: 5px auto;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 20px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 400px;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 20px;
line-height: 20px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #ff3300;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
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: 400px;
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: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
text-decoration:none;
}
.tab_content img {
float: left;
margin: 0 20px 20px 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
$(&quot;.tab_content&quot;).hide(); //Hide all content
$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show(); //Activate first tab
$(&quot;.tab_content:first&quot;).show(); //Show first tab content
//On Click Event
$(&quot;ul.tabs li&quot;).click(function() {
$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;); //Remove any &quot;active&quot; class
$(this).addClass(&quot;active&quot;); //Add &quot;active&quot; class to selected tab
$(&quot;.tab_content&quot;).hide(); //Hide all tab content
var activeTab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;); //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>
<li><a href="#tab5">Blogroll</a></li>

</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Gallery Posts</h2>
<a href="http://www.designbombs.com/light/simona-munteanu/"><img alt="" src="http://mfm6009.googlepages.com/pretty_girl.GIF"/></a>
<a href="http://megatab.blogspot.com/2009/07/mega-tab-new-form-of-drop-down-menu.html"><span style="font-weight:bold;">Mega Tab Menu</span></a><br/>
<a href="http://megatab.blogspot.com/2009/08/teaser-box.html"><span style="font-weight:bold;"><span style="font-weight:bold;">Teaser Box</span></span></a><br/>


<p>Sfixin' 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 Grandma has been away djkt mlskrio lorem cutlsjh hdgwpwend good bad naen mams.</p>
</div>
<div id="tab2" class="tab_content">
<h2>Submit</h2>
<a href="http://www.designbombs.com/blog/sketch-blog/"> <img alt="" src="http://mfm6009.googlepages.com/pencil.gif"/></a>
<h3><a href="http://tip-buat-blog.blogspot.com">Jom Kita Blog</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 alt="" src="http://mfm6009.googlepages.com/giftbart.gif"/></a>

<h3><a href="http://tip-buat-blog.blogspot.com">Jom Kita Blog</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 alt="" src="http://mfm6009.googlepages.com/umorismo008gifanimate.GIF"/></a>

<h3><a href="http://tip-buat-blog.blogspot.com">Jom Kita Blog</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="tab5" class="tab_content">
<h2>My Other Sites</h2>
<a href="http://www.designbombs.com/illustrations/esteban-munoz/"> <img alt="" src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/estebanmunoz_thumb.gif"/></a>

<h3><a href="http://tip-buat-blog.blogspot.com">Jom Kita Blog</a></h3>
<h3><a href="http://tirambuzz.blogspot.com">Life & Nature</a></h3>
<h3><a href="http://mybestaffiliatesites.weebly.com">My Affiliates</a></h3>
<h3><a href="http://tipsperday.blogspot.com">Gateway To nature</a></h3>
<h3><a href="http://ptcjerk.blogspot.com">Paid To Click</a></h3>


<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>
</body>
</html>



No comments:

Post a Comment