වෙබ් අඩවි වලට menu හදද්දි අපි බොහෝ වෙලාවට mouseover එකේදි මෙනුවේ රූපය වෙනස්‌ වෙන ආකරයට හදනවා. මේ ආකාරයේ menu සම්පුර්නයෙන්ම css භවිතයෙන් හදන්න පුලුවන්. මම පෙන්වන්නම් කරන හැටි.
මෙලෙස menu එක සැදීමෙන් වාසි කිහිපයක්‌ තියෙනවා.
- menu එකේ අයිතමයක සාමාන්‍ය පෙනුම සහ mouseover කල විට පෙනුම සදහා රූප දෙකක්‌ වෙනුවට අපි භාවිතා කරන්න්නේ එක රූපයයි. එනිසා පරිශීලකයා මෙනු අයිතමය mouseover කල සැනින් අපට අවශ්‍ය පෙනුම ලබා ගන්නට පුලුවන්. මන්ද mouseover සදහා වෙනම රූපයක්‌ පරිශීලකයාගෙ පරිගනකයට බාගත වීමට අවශ්‍ය නොවන නිසා.
- ඒ වාගේම අනවශ්‍ය javascript භාවිතා නොකර css මගින් menu එක ක්‍රියාත්මක වන නිසා කේතය පැහැදිලියි.
මෙහිදී අපි කරන්නේ යම් සබැදුමක්‌(link) සදහා එම සබැදුමේ පසුබිම් රූපය(background-image) වෙනස්‌ කිරීමයි. එය කරන්නේ මෙහෙමයි.
සාමාන්‍ය පෙනුම සහ mouseover කල පසු පෙනුම යන දෙකම අඩංගු කර රූපය සාදාගත යුතුයි. උදාහරණය සදහා මම පහත රූපය යොදා ගන්නවා. එහි අලු පැහැති ඉහල කොටස සාමාන්‍ය පෙනුම සදහාත් කලු පැහැ පහල කොටස mouseover සදහාත් යොද ගන්නවා.
html කේතය
<a href="http://thilspage.blogspot.com" id="my-link"> </a>
css කේතය
#my-link {
display: block;
width: 325px;
height: 80px;
background-image:url(hoverlogo.jpg);
background-position: top;
}
#my-link:hover {
background-position: bottom;
}
මෙම ක්‍රමය menu සදහා භවිතා කල හැකියි. පහත සබැදුම බලන්න.
සම්පූර්ණ කේතය
<!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" />
<title>menu</title>
<style>
#wrapper {
margin:50px auto;
width:600px;
}
#top_navigation {
height:40px;
background:url(menu_bg.gif) repeat-x;
}
a.top_nav_home:link, a.top_nav_home:visited {
display:block;
width:94px;
height:40px;
float:left;
background:url(home.gif) no-repeat top;
}
a.top_nav_home:hover {
background-position:bottom;
}
a.top_nav_about:link, a.top_nav_about:visited {
display:block;
width:94px;
height:40px;
float:left;
background:url(about.gif) no-repeat top;
}
a.top_nav_about:hover {
background-position:bottom;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top_navigation">
<a class="top_nav_home" href="#"> </a>
<a class="top_nav_about" href="#"> </a>
</div>
</div>
</body>
</html>
Posts
No comments:
Post a Comment