CSS පාඩම් අංක 06
12. Navigations
මතකද HTMLවලින් සරලව Navigation එකක්, එහෙමත් නැත්නම් Menu එකක් හදාගත්තු හැටි? මේ පාර Navigation එකේ Structure එක HTML වලින් ගහගෙන, හැඩ වැඩ දාන ඒවා CSS වලින් කරලා බලමු. බලමු සරල HTML Code එකක් ලියලා.
<div id="navigation">
<ul>
<li> <a class = "menu" href = "index.html"> Home </li> </a>
<li> <a class = "menu" href = "about.html"> About </li> </a>
<li> <a class = "menu" href = "gallery.html"> Gallery </li> </a>
<li> <a class = "menu" href = "news.html"> News </li> </a>
<li> <a class = "menu" href = "contact.html"> Contact </li> </a>
</ul>
</div>
එතකොට මේ Navigation එකේ Home, About, Gallery, News, Contact කියලා ප්රධාන කොටස් 5ක් තියෙනවා. එතකොට Browser එක Refresh කරලා බැලුවොත් Page එක පෙන්නන්නේ මේ විදිහටයි.
<div id="navigation">
<ul>
<li> <a class = "menu" href = "index.html"> Home </li> </a>
<li> <a class = "menu" href = "about.html"> About </li> </a>
<li> <a class = "menu" href = "gallery.html"> Gallery </li> </a>
<li> <a class = "menu" href = "news.html"> News </li> </a>
<li> <a class = "menu" href = "contact.html"> Contact </li> </a>
</ul>
</div>
එතකොට මේ Navigation එකේ Home, About, Gallery, News, Contact කියලා ප්රධාන කොටස් 5ක් තියෙනවා. එතකොට Browser එක Refresh කරලා බැලුවොත් Page එක පෙන්නන්නේ මේ විදිහටයි.
දැන් අපි CSS එක හදමු. දැන් මේ Navigation එක ඇවිල්ලා තියෙන්නේ එක යට එක. අපිට Navigation එක ගන්න ඕන එක පෙළකට එන විදිහට. එහෙනං අපිට CSS එක මෙහෙම ලියන්න පුලුවන්.
#navigation li {
display:inline-block;
padding-left: 150px;
font-size: 1.5em;
color:white;
padding-top: 10px;
text-decoration:none;
list-style-type-none;
}
.menu {
text-decoration:none;
list-style-type:none
}
Navigation කියන ID එක යටතේ තමයි <li> තියෙන්නේ. එතකොට උඩ තියෙන CSS එක Target කරලා තියෙන්නේ අන්න ඒ <li> වලට. {display:inline-block;} කියන එක පාවිච්චි කරලා තමයි, එක යට එක තිබ්බ ඒවා, එක පෙළකට අරගෙන තියෙන්නේ. <li> වලට Padding Top සහ Padding Left දීලා තියෙනවා දකින්න පුලුවන්. ඒ වගේම Font එකට Size එකක් සහ Colour එකකුත් දීලා තියෙනවා.
සාමාන්යයෙන් මොකක් හරි වචනයකට <href> එකක් දුන්නම, ඒ වචනය Auto Underline වෙනවා. ඒක නැති කරන්න තමයි {text-decoration:none} කියන එක දාලා තියෙන්නේ. {list-style-type:none} එක දාලා තියෙන්නේ වචන ඉස්සරහා තියෙන Dots ටික නැති කරන්න. මේ Properties දෙක දීලා තියෙන්නේ Menu කියන Class එකට. දැන් මෙන්න මේ Code එකත් ලියන්න ඕන.
#navigation {
background-color: black;
height: 50px;
width:100%;
}
මේ Code එක Target කරලා තියෙන්නේ සමස්ථ Navigation එකටම. මේකට කරන බලපෑම <li> එකටත් වෙනවා. දැන් මේක Browser එකේ පෙන්නන්නේ මෙන්න මෙහෙමයි.
ඔන්න දැන් භාගයක් ඉවරයි. දැන් අපි Colour Changesවලට අවධානය යොමු කරමු. සාමාන්යයෙන් Navigation එකකට Mouse Cursor එක ගෙනිච්චම Navigation ඒකෙ පාට වෙනස් වෙනවා. ඒක Click කරනකොට තවත් පාටකින් පෙන්නනවා. Click කළාට පස්සේ තවත් පාටකින් පෙන්නන අවස්ථා තියෙනවා. එහෙම පෙන්නන විදිහට හදන්නේ මෙන්න මෙහෙමයි. වචනයකට Link එකක් දැම්මම එකේ පාට නිල් පාට වෙනවා. ඒ නිසා #navigation a {color:white} කියලා දෙන්න පුලුවන්. ඒ කියන්නේ Navigation කියන ID එකේ තියෙන ඔක්කොම Links සුදු පාට වෙන්න කියලා.
#navigation li a:hover {
color:red
}
උඩ තියෙන Code එක Target කරලා තියෙන්නේ Navigation කියන ID එකේ, li යටතේ තියෙන Links වලට. තමන්ට කැමති පාටක් දෙන්න පුලුවන්. මෙතන දීලා තියෙන්නේ රතු පාට. එතකොට Mouse Cursor එක , Navigation එකේ වචන උඩට (Links උඩට) ගෙනිච්චම, ඒ වචන රතු පාට වෙනවා.
#navigation a:visited {
color: green;
}
කියලා දැම්මොත් අදාළ Link එක Click කරලා, අදාළ Page එකට ගියාට පස්සේ, Link එක කොළ පාටින් පෙන්නනවා.
#navigation a:active {color: } හරහා පුළුවන් අදාළ වචනය Click කරනකොට, වෙනස් වෙන්න පාටක් දෙන්න. Navigations ගැන සරලවම කතා කරන්න තියෙන්නේ ඔච්චර තමයි.