සුභ දවසක් හැමෝටම,

අපි අද කථා කරන්න යන්නේ ඔයා හදන වෙබ් පේජ් එකට CSS Navigation menu Bar එකක් Add කරගන්නේ කොහොමද කියලා. එහෙම නැතන්ම් ඔයාගේ වෙබ් එකට, බ්ලොග් එකට උනත් දාගන්නත් පුළුවන්. CSS ගැන දුලාන් අයියා ලියපු ලිපිය මෙතනින් බලන්න පුළුවන්.  CSS ඉගෙනගනිමු #හැඳින්වීම #පාඩම් මාලාව 01

මම හිතනවා දැන් HTML ගැනත් CSS ගැනත් යම්තාක් දුරට දැනුමක් ඇති කියලා. HTML පාඩම් මාලාව මෙතනින් බලන්න පුළුවන්.

අපි හදන්න යොදාගන්නේ CSS හා HTML. මෙන්න මේක තමා CODE එක.

[html] <html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
border-right:1px solid #bbb;
}

li:last-child {
border-right: none;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #bbb;
}

.active {
background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
<li><a class=”active” href=”#link”>Home</a></li>
<li><a href=”#link”>Soft</a></li>
<li><a href=”#link”>Games</a></li>
<li><a href=”#link”>Tech</a></li>
<li><a href=”#link”>Geek</a></li>
</ul>

</body>
</html>
[/html]

<head> tag ඇතුලේ <style> ටැග් එකක් යොදාගෙන Navigation Bar එක හැඩගන්වලා තියෙනවා. ඉන්පසු Menu Item ටික <body> </body> තුල සකසාගෙන තියෙනවා.

[css]

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
} [/css]

ඔයාට background-color එකට කැමති color එකක් යොදාගන්න පුළුවන්, මම Margin 0 ක්ද,Padding 0 ක් ලෙසද සදහන් කර තිබෙනවා. එම අගයන් වෙනස් කර බලන්න මොකද වෙන්නේ කියලා.

[css]li {
float: left;
border-right:1px solid #bbb;
}[/css]

එමෙන්ම float එක left යන්න යොදා Menu items Left Side එකට හරවා තියෙනවා. එමෙන්ම මෙනු එකේ දැක්වෙන vertical lines වල ප්‍රමාණය 1px වලින්ද,වර්ණය #bbb මගින්ද දක්වලා තියෙනවා.

[css]li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}[/css]

මෙමගින් Menu item ටික හැඩ ගන්වලා තියෙනවා. මෙහි color: white; / padding: 14px 16px; අගයන් වෙනස් කර බලන්න.

[css]li a:hover:not(.active) {
background-color: #bbb;
}[/css]

Menu items සදහා Hover color එකක් යොදාගෙන තියෙනවා, Color වෙනස් කර බලන්න. මම මෙතනදී Hover color එක කීවේ ඔයා මවුසය මේ menu item අතර ගෙනියනකොට මව්සය තියෙන menu item එකට color එකක් එනවා. අන්න ඒකට කියනවා hover effect එකක් කියලා

[css].active {
background-color: #4CAF50;
}[/css]

Active Menu item එක සදහා මෙතනදී Highlight කිරීමට color එකක් යොදා තිබෙනවා,

දැන් Menu item සියල්ල හැඩගන්වා අවසන්, </style> tag එක මගින් <style> tag එක Close කරලා තියෙනවා,

දැන් Body කොටසට ගිහින් Menu item ටික හදාගන්නයි තියෙන්නේ,

[html]<ul>
<li><a class=”active” href=”#link”>Home</a></li>
<li><a href=”#link”>Soft</a></li>
<li><a href=”#link”>Games</a></li>
<li><a href=”#link”>Tech</a></li>
<li><a href=”#link”>Geek</a></li>
</ul>[/html]

මෙතනදී අපි <ul> tag එක යොදාගෙන Unordered List එකක් නිර්මාණය කරන්නයි යන්නේ. Unordered List එකේ  List item එකක් සෑදීම සදහා <li> </li> යොදාගන්නවා.

<li><a class=”active” href=”#link”>Home</a></li>

<a> tag එකක් තුළ menu item text එකට hyperlink එකක් add කරගන්නවා. class=”active” මගින් දැක්වෙන්නේ මෙම සාදන item එක Active item ලෙස සලකන්න කියලයි. මතකද ඉහත css එකේ Active Color එකක් add කලා, එම එක තමයි මෙම අවස්ථාවේදී භාවිතා වෙන්නේ. පහත උදාහරණය බලන්න.

href=”#link” තුළ ඇති #link වෙනුවට ඔයාට Add කරන්න ඕන පේජ් එකෙ link එක දාන්න,

එම ආකාරයෙන් ඔයාට පුළුවන් අවශ්‍යය ප්‍රමාණයක් Menu item add කරගන්න.

නැවත ලිපියකින් හමුවෙමු.

ඔබට සුභ දවසක්!

 

අදහස් දක්වන්න

අදහස්

Share your vote!


  • Fascinated
  • Happy
  • Sad
  • Angry
  • Bored
  • Afraid
‌රැදී සිටින්න...

ඔබත් ගීක් කෙනෙක්ද?

අලුත්ම Geek ලිපි එසැනින් ලබාගන්න අපිව Subscribe කරන්න. දැනුම සොයා යන තරුණ ඔබත් එන්න,ගීක් කෙනෙකු වන්න,

ඔබත් දැන්ම ගීක් කෙනෙක් වෙන්න!

You have successfully subscribed to the Geek

There was an error while trying to send your request. Please try again.

SL Geek LK will use the information you provide on this form to be in touch with you and to provide updates and marketing.

ස්මාර්ට් ගීක් කෙනෙක් වෙන්න! ගීක් මොබයිල් ඇප් එක දාගන්න.

Download Geek App now - 4Mb Only