CSSကိုသုံးပြီး menu list ကို button ပုံစံပြုလုပ်ခြင်း
panpan
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 ပုံစံများကို မိမိစိတ်ကြိုက် ဉာဏ်ရှိသလို ပြောင်းယူနိုင်ပါကြောင်း။