Wadah Madrasah Pengalaman: Tutorial CSS3 Tab menu _ mudah dan kemas


Thursday, April 12, 2012

Tutorial CSS3 Tab menu _ mudah dan kemas

.



Assalamualaikum...

Hai korang..kali nie Wan nak ajar korang macma mana nak wat tab menu yang simple dan mudah...Kalau korang nak..


Jom Tutorial..


Caranya mudah sangat..

Dashboard>add gadget>HTML

Copy dan paste kod kat bawah nie.



<center><style>
#WanHazel-Container {
font: normal 1em Arial, Helvetica, sans-serif;
width:100%; float:left;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
background: #4d4b4d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64-xynlKQvkLbw4XoOKhXEbzdrPmTlYzr4yhs2PxMHUEpqc-w21DqYtmwZyYHVC8140x5WRD3mhZlfyHwgxoZoakBAODPcXvX3QCte_l16AW4juz9wagafH2lbgPn-qZ_c5e220UzCfI/s1600/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none; }

/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64-xynlKQvkLbw4XoOKhXEbzdrPmTlYzr4yhs2PxMHUEpqc-w21DqYtmwZyYHVC8140x5WRD3mhZlfyHwgxoZoakBAODPcXvX3QCte_l16AW4juz9wagafH2lbgPn-qZ_c5e220UzCfI/s1600/gradient.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #4d4b4d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64-xynlKQvkLbw4XoOKhXEbzdrPmTlYzr4yhs2PxMHUEpqc-w21DqYtmwZyYHVC8140x5WRD3mhZlfyHwgxoZoakBAODPcXvX3QCte_l16AW4juz9wagafH2lbgPn-qZ_c5e220UzCfI/s1600/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
text-align:left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
text-align:left;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64-xynlKQvkLbw4XoOKhXEbzdrPmTlYzr4yhs2PxMHUEpqc-w21DqYtmwZyYHVC8140x5WRD3mhZlfyHwgxoZoakBAODPcXvX3QCte_l16AW4juz9wagafH2lbgPn-qZ_c5e220UzCfI/s1600/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
</style>

<div id="MBT-Container">
<ul id="nav">

<li><a href="Link blog korang">Home</a>
<li><a href="Link 1">tab 1</a></li>
<li><a href="Link 2">tab 2</a></li>
<li><a href="Link 3">tab 3</a></li>
<li><a href="Link 4">tab 4</a></li>
<li><a href="Link 5">tab 5</a></li>

</li></ul>



<br/>




<br/></div></center>



Tab menu nie tak de drop down menu k..Nak buat yang mudah je untuk korang..Kalau korang nak ubah warna latar tab menu korang nie..Korang tukar kod warna nie..4d4b4d ..Kod warna HTML korang leh dapat kat sini


klik untuk Kod Warna HTML - XHTML - XML - CSS


Link 5 dan tab tu korang ubah lah ikut kesesuaian korang..Link tu korang ambik dari page yang korang dah buat atau mana mana entri korang..korang leh rujuk kat sini kalau nak wat new page

http://wanhazel.blogspot.com/2011/04/tutorial-wat-new-page-dan-link-dalam.html



Bila dah selesai..

Korang save dan lihat lah hasilnya..


Kalau suka entri kali nie klik like atau sponsor Wan rm0.20 .Klik kanan dan open in new tab k , atau klik button donate.Yang iklhas nak klik je taw..Terima kasih

Who are you betting on for Axiata Cup? The Best
When price tags are slashed into half






Papai


.



12 comments:

hoyahadis said...

trime kasih wan..:)

Ayuni said...

thanx, br je cuba, cantik, dh click semua iklan!

AisYah said...

Thanks wan.. saye gube ye :)

Unknown said...

tuto yg menarik. terima kasih wan :)

syazlinda said...

Saya try gune :)

Oddie said...

abg wan, mun laman sosial cm fb n twitter bleh pakey x?

Wan_hazel said...

boleh jak..hehehe

LYNA HIJAB COLLECTION said...

salam wan...nk request utk drop down menu mcm yg wan buat dkt tab tutorial tu bleh?

Wan_hazel said...

PM wan kat fb nanti wan ajar k.)(wan Hazel)..senang skit..susah nak terangkan..ehheh

Unknown said...

wan camne nk buat sub menu cam wan buat? roger caer ye nnt..thanks =)

Wan_hazel said...

caer tgk sini k


www.webdesignerwall.com/tutorials/css3-dropdown-menu/

||aLeaSaRa|| said...

slm ramadhan...saya dh apply tutorial ni utk blog..dulu sy guna menu bar yg lip lap tu...tqvm ye ^* slmt hr raya!!!