CSS3 ကိုသုံးပြီး Menu အကြီးကြီး ဆောက်ကြမည် (၂)

phpcrazyOctober 15, 2010HTML & CSS

ပထမပိုင်းမှာတော့ အပေါ်ဖက် Menu အတွက် ဆောက်ခဲ့ပြီးပါပြီ။ အခုမှ စဖတ်မယ့်သူတွေ ပြန်ဖတ်ချင်တယ်ဆိုရင်

CSS3 ကိုသုံးပြီး Menu အကြီးကြီး ဆောက်ကြမယ် (၁)

မှာ လေ့လာနိုင်ပါတယ်။ ကဲရှေ့ဆက်ပြီး Second Level Menu (သို့) Drop-down menu အတွက် ဆက်ကြရအောင်။ ပုံမှန်အတိုင်းဆိုရင်တော့ အောက်မှာ ပြထားတဲ့အတိုင်း Nested Menu တွေ ဆက်ရေးလိုက်ရုံပါပဲ။

<ul id="menu">
    <li><a href="#">Item 1</a><
        <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a><
        <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
        </ul>
    </li>
</ul>

ဒါပေမယ့် ဒီတစ်ခါ သုံးချင်တာက CSS3 ရဲ့ Feature တစ်ခုဖြည်တဲ့ Div Wrapping ပေါ့။ ဒီတော့ Sub Menu တွေကြားမှာ Div တွေ ညှပ်ထည့်ပါမယ်။ အောက်မှာ ပြထားတဲ့အတိုင်းပေါ့။ ကျွန်တော် အခုရေးပေးတာ နမူနာတွေပဲနော် တကယ့် Code တွေမှာ ဘာမှ သွားမပြောင်းသေးပါဘူး။

<ul id="menu">
	<li><a href="#">Item 1</a>
		<div>
		Drop down Content
		<div>
	</li>
	<li><a href="#">Item 2</a>
		<div>
		Drop down Content
		<div>
	</li>
</ul>

ကဲ DIV တွေကိုတောင် ကြားညှပ်လို့ ရနေမှပဲ၊ DIV ထဲကို ဘာပဲ ဖြစ်ဖြစ် ထည့်လို့ရပြီပေါ့ဗျာ။ အရင်ကဆိုရင် အဲဒီလိုသုံးနိုင်ဖို့အတွက် JavaScript ကို သုံးကို သုံးရပါလိမ့်မယ်။ အဲဒီလို အသုံးပြုတာကို Drop-down Container လို့ခေါ်ပါတယ်။ ရှေ့ဆက်ပြီး Drop Down Container အကြောင်း လေ့လာကြည့်ရအောင် …

Drop Down Containers

Drop Down Container တွေကို အရွယ်အစာမျိုးစုံသတ်မှတ်ပြီး အသုံးပြုနိုင်ပါတယ်။ DIV ကို ကြားညှပ်ထားတဲ့အတွက် ပုံတွေထည့်မလား၊ စာတွေထည့်မလား၊ ဘာပဲ ထည့်ချင် ထည့်ချင်ရပြီ ဆိုတာတော့ သိလောက်ပါပြီ။

ပထမဦးဆုံး နဂိုမူရှင်း Drop Down ကို ဖျောက်ပေးဖို့ လိုပါမယ်၊ မဖျောက်ရင် Hover ကြမှမပေါ်ပဲ ဒီအတိုင်း ပေါ်နေတဲ့အတွက် ထပ်ကုန် ပါလိမ့်မယ်။ အဲဒီလို ဖျောက်နိုင်ဖို့အတွက် Position: absolute ထားပေးရပါမယ်။ ပြီးရင် left: -999em; ဆိုပြီး မမြင်ရတဲ့ဆီကို ပို့လိုက်ပါမယ်။

	position: absolute;
	left: -999em; /* Hide the drop down */

အဲဒီနေရာမှာ left: -99em ကို နောက်ပိုင်းမှာ ဖြုတ်ပြီး စမ်းကြည့်ပါ။ Drop-down menu တွေ ထပ်ကုန်တာ တွေ့ရပါလိမ့်မယ်။ ရှေ့ဆက်ပြီး Drop Down Container တွေရဲ့ အရောင်တွေကို အပေါ်မှာ ကျွန်တော်တို့ ဆောက်ခဲ့တဲ့ Menu အရောင်အတိုင်းပေးပါ့မယ်။ ဒါမှလည်း တစ်ဆက်တည်းပုံစံနဲ့ ကြည့်လို့့ကောင်းမှာ ဖြစ်ပါတယ်။ ပြီးရင် Rounded Corner အတွက် သတ်မှတ်ပါမယ်။ ထုံးစံအတိုင်း Padding တွေ border တွေ သတ်မှတ်ပေးပါမယ်။ ကျွန်တော်တို့ သုံးချင်တာက 1 Column, 2 Columns, 3 Columns စသည်ဖြင့် သုံးချင်တဲ့အတွက် CSS တွေကို စုပြီး သတ်မှတ်ပေးပါ့မယ်။ ဒါပေမယ့် ဒီတစ်ခါ ID အနေနဲ့ မသုံးပဲ Class အနေနဲ့ သုံးပါတယ်။ ဒါမှလည်း ထပ်ထပ်ပြီး သုံးလို့ရမှာ ဖြစ်ပါတယ်။

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
    margin: 4px auto;
    position: absolute;
    left: -999em; /* Hide the drop down */
    text-align: left;
    padding: 10px 5px 10px 5px;
    border: 1px solid #777777;
    border-top: none;

    /* Gradient background */
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
}

အဲဒီ အဆင့်ပြီးသွားရင် Column တစ်ခုခြင်းစီအတွက် width တွေ သတ်မှတ်ပေးရပါမယ်။

.dropdown_1column { width: 140px; }
.dropdown_2columns { width: 280px; }
.dropdown_3columns { width: 420px; }
.dropdown_4columns { width: 560px; }
.dropdown_5columns { width: 700px; }

အခု အချိန်အထိ ကျွန်တော်တို့ HTML မှာ dropdown menu ကို မသုံးရသေးပါဘူး။ ဒါကြောင့် Drop Down Menu ကို သုံးကြည့်ရအောင်။ တစ်ခုခြင်းစီ ကွဲပြားခြားနားမှုရှိအောင် 1 Column, 2 Column, 3 Column, 4 Column, 5 Column ဆိုပြီး ခွဲခြားလိုက်ပါမယ်။ ဒီတော့ အောက်မှာပေးထားတဲ့ Code တွေအတိုင်း index.html မှာ ပြင်လိုက်ပါ။

<ul id="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#" class="drop">5 Columns</a>
		<div class="dropdown_5columns">
		<p>5 Columns content</p>
		</div>
	</li>
	<li><a href="#" class="drop">4 Columns</a>
		<div class="dropdown_4columns">
		<p>4 Columns content</p>
		</div>
	</li>
	<li><a href="#" class="drop">3 Columns</a>
		<div class="dropdown_3columns">
		<p>3 Columns content</p>
		</div>
	</li>
	<li><a href="#" class="drop">2 Columns</a>
		<div class="dropdown_2columns">
		<p>2 Columns content</p>
		</div>
	</li>
	<li><a href="#" class="drop">1 Column</a>
		<div class="dropdown_1column">
		<p>1 Column content</p>
		</div>
	</li>
</ul>

ဒါဆိုရင်တော့ စမ်းကြည့်လို့ရပါပြီ။ ဒါပေမယ့် ဘာမှ ပေါ်လာမှာ မဟုတ်ပါဘူး။ ဘာဖြစ်လို့လဲ ဆိုတော့ left: -999em ဆိုပြီး ပို့ထားတဲ့အတွက်ကြောင်ပါ့။ အဲဒီအတွက် Hover လုပ်တဲ့အခါမှာ ပေါ်လာအောင် Left ကို ပြန်သတ်မှတ်ပေးဖို့ လိုပါတယ်။

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;top:auto;
}

CSS အပြည့်အစုံကတော့

#menu {
    list-style:none;
    width:940px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;

    /* Rounded Corners */

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    /* Background color and gradients */

    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

    /* Borders */

    border: 1px solid #002232;

    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;

    /* Background color and gradients */

    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

    /* Rounded corners */

    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #EEEEEE;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
    padding-right:21px;
    background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
    background:url("img/drop.png") no-repeat right 7px;
}

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
    margin: 4px auto;
    position: absolute;
    left: -999em; /* Hide the drop down */
    text-align: left;
    padding: 10px 5px 10px 5px;
    border: 1px solid #777777;
    border-top: none;

    /* Gradient background */
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
}

.dropdown_1column { width: 140px; }
.dropdown_2columns { width: 280px; }
.dropdown_3columns { width: 420px; }
.dropdown_4columns { width: 560px; }
.dropdown_5columns { width: 700px; }

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;top:auto;
}

HTML အပြည့်အစုံကတော့

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />

<title>Mega Drop Down Menu</title>
</head>

<body>
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#" class="drop">5 Columns</a>
        <div class="dropdown_5columns">
        <p>5 Columns content</p>
        </div>
    </li>
    <li><a href="#" class="drop">4 Columns</a>
        <div class="dropdown_4columns">
        <p>4 Columns content</p>
        </div>
    </li>
    <li><a href="#" class="drop">3 Columns</a>
        <div class="dropdown_3columns">
        <p>3 Columns content</p>
        </div>
    </li>
    <li><a href="#" class="drop">2 Columns</a>
        <div class="dropdown_2columns">
        <p>2 Columns content</p>
        </div>
    </li>
    <li><a href="#" class="drop">1 Column</a>
        <div class="dropdown_1column">
        <p>1 Column content</p>
        </div>
    </li>
</ul>
</body>

</html>

ဒီအဆင့် ရောက်ပြီဆိုရင် Drop Down Container တွေ အတိုင်းအတာ တစ်ခုအထိ ပုံပေါ်လာပြီး ဖြစ်ပါတယ်။ ရလာတဲ့ Result ကတော့

Drop Down Container Columns များ ဖန်တီးခြင်း

ကဲ ရှေ့ဆက်ပြီး 960gs ရဲ့ နည်းပညာနဲ့ Column တွေ ဖန်တီးရအောင်

.col_1,
.col_2,
.col_3,
.col_4,
.col_5
{
	display: inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}

.col_1 { width: 130px; }
.col_2 { width: 270px; }
.col_3 { width: 410px; }
.col_4 { width: 550px; }
.col_5 { width: 690px; }

ထုံးစံအတိုင်း Col ရဲ့ Width တွေကို သတ်မှတ်ပေးပါတယ်။ HTML ကိုတော့ တစ်ခုမှ Apply မလုပ်ရသေးပါဘူး။ ဒီတော့ 5 Columns ဆိုတဲ့ နေရာမှာ Apply လုပ်ပါမယ်။

		<div class="dropdown_5columns">
			<div class="col_5">
			<p>This is a 5 Columns content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_4">
			<p>This is a 4 Columns content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_3">
			<p>This is a 3 Columns content</p>
			</div>
			<div class="col_2">
			<p>This is a 2 Columns content</p>
			</div>
		</div>

အဲဒီလို ဖြည့်ပြီး Run လိုက်မယ်ဆိုရင်တော့

အဲဒီအဆင့်ထိတော့ ရောက်သွားပါပြီ။ ဒီအဆင့်အထိ ကိုယ်စက်ထဲမှာ ကျွန်တော် ပေးထားတဲ့ Source Code လေးကို Zip ဖြည်ပြီး လေ့လာကြည့်ပါ။