html tab နဲ႔ css style သံုးရံုနဲ႔ button ပံုစံ menu listကို ျပဳလုပ္လို႔ ရပါတယ္။

အခု အေပၚမွာ ျပထားတဲ့ ပံုက ITEM FOUR ဆိုတဲ့ေနရာကို mouse over တင္ထားတာပါ။

ပံုက print screen ဖမ္းထားတာဆိုေတာ့ effect ကိုအျမင္အားျဖင့္ သိပ္မသိသာလွပါဘူး။

html file ကို browser မွာဖြင့္လိုက္ရင္ေတာ့ ေသခ်ာျမင္ရမွာပါ။

html code နဲ႔ css style ကိုပါ တင္ေပးလိုက္ပါတယ္။

ဒါက css style ပါ။ css အတြက္ file သက္သက္မလုပ္ေတာ့ဘဲ html page မွာပဲ ေပါင္းေရးထားတဲ့ပံုစံနဲ႔ပဲ တင္ေပးလိုက္ပါတယ္။

<style type=”text/css”>

#menu {display:block; position:relative; background:#edebdc; width:112px; padding:25px; border:1px solid #000; margin:50px auto 100px auto;}
.white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-top:1px solid #ffdc56; border-right:1px solid #957704; border-bottom:1px solid #937603; border-left:1px solid #ffdc56;overflow:hidden; text-align:center;}
.blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-family:verdana; font-size:11px; font-weight:bold; overflow:hidden; border-top:1px solid #ffd42e; border-right:1px solid #caa205; border-bottom:1px solid #c9a105; border-left:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:15px; background:#fc0;}
.black {position:relative; top:0; left:0; width:102px; height:22px; border:1px solid #000;}
.cona {position:relative; top:0; left:0; width:105px; height:25px; border-top:1px solid #d5d3ca; border-left:1px solid #d5d3ca; background:#f7f6ef;}
.conb {position:relative; top:0; left:0; width:107px; height:27px; border-top:1px solid #b8b7af; border-left:1px solid #b8b7af; background:#f7f6ef;}
.conc {position:relative; top:0; left:0; width:109px; height:29px; border-top:1px solid #9c9b95; border-left:1px solid #9c9b95; background:#f7f6ef;}
.cond {position:relative; top:0; left:0; width:111px; height:31px; border-top:1px solid #d5d3ca; border-left:1px solid #d5dc3a; background:#fff; margin-top:2px;}

#menu a.switch:visited {text-decoration:none;}
#menu a.switch {color:#c00; text-decoration:none; position:absolute;}
#menu a.switch:hover {color:#c00; background:#edebdc; cursor:pointer;}
#menu a.switch:hover .white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-bottom:1px solid #ffdc56; border-left:1px solid #957704; border-top:1px solid #937603; border-right:1px solid #ffdc56;overflow:hidden; text-align:center;}
#menu a.switch:hover .blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-size:11px; font-weight:bold; overflow:hidden; border-bottom:1px solid #ffd42e; border-left:1px solid #caa205; border-top:1px solid #c9a105; border-right:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:17px; background:#eb0;}

</style>

အခုဟာကေတာ့ html tab ေတြပါ။

<div id=”menu”>

<div><div><div><div><div
class=”black”>
<a href=”#nogo”><span><span
title=”Item one”>ITEM ONE</span></span></a>
</div></div></div></div></div>

<div><div><div><div><div
class=”black”>
<a href=”#nogo”><span><span
title=”Item two”>ITEM TWO</span></span></a>
</div></div></div></div></div>

<div><div><div><div><div
class=”black”>
<a href=”#nogo”><span><span
title=”Item three”>ITEM THREE</span></span></a>
</div></div></div></div></div>

<div><div><div><div><div
class=”black”>
<a href=”#nogo”><span><span
title=”Item four”>ITEM FOUR</span></span></a>
</div></div></div></div></div>

<div><div><div><div><div
class=”black”>
<a href=”#nogo”><span><span
title=”Item five”>ITEM FIVE</span></span></a>
</div></div></div></div></div>

</div>

အေရာင္ပံုစံ font ပံုစံမ်ားကို မိမိစိတ္ႀကိဳက္ ဥာဏ္ရွိသလို ေျပာင္းယူႏိုင္ပါေၾကာင္း။

About panpan

chit has written 61 post in this Website..