මම හිතනවා ඔයාලට HTML & CSS ගැන basic knowledge 1k ඇති කියල!
අපි හිතමු අපිට හදන්න ඔනි මේ පහලින් පෙන්නලා තියෙන වගෙ drop down list එකක් කියල.
හරි,එහෙනම් අපි මුලින්ම ඩ්‍රොප් ඩව්න් ලිස්ට් එකේ sketch එක හදාගෙන ඉමු.
To create the sketch we use Unordered List in HTML.
Ok now,First we have to create main lists :- locations, The Menu, Our Story, Contact Us
ඒක කරන්නෙ මෙන්න මෙහෙමයි.
<ul>
<li>Locations</li>
</ul>
<ul>
<li>The Menu</li>
</ul>
<ul>
<li>Our Story</li>
</ul>
<ul>
<li>Contact Us</li>
</ul>
Now we have done creating our main tabs/lists. එහෙත් මේක තාම sketch එක විතරයි.
Now we have to create our drop down list part.
ඒක කරන්නෙ මෙන්න මෙහෙමයි.
<ul class="list1">
<li>Locations
<ul class="list2">
<li>Maps</li>
<li>Address</li>
</ul>
</li>
</ul>
<ul class="list1">
<li>The Menu
<ul class="list2">
<li>Breakfast</li>
<li>Lunch</li>
<li>Dinner</li>
</ul>
</li>
</ul>
<ul class="list1">
<li>Our Story
<ul class="list2">
<li>Breakfast</li>
<li>Lunch</li>
<li>Dinner</li>
</ul>
</li>
</ul>
<ul>
<li>Contact Us</li>
</ul>
හරි,දැන් අපි අපේ sketch එක හදාගෙන ඉවරයි! දැන් ඔයාල ලියපු file එක .html extention එක එක්ක save කරල web browser එකෙන් open කරලා බලන්නකො. කැතයි නේද?
This is the point that CSS comes in to action! Now we have to write our CSS file.
මම CSS ලියන්නේ <head> tag එක ඇතුලෙ but ඔයලා කැමති නම් external style sheet එකක් ලියලා page එකට link කරත් අවුලක් නෑ. මම ලියුවෙ <head> tag එක ඇතුලෙ!
<style type="text/css">
*{margin:0; padding:0;}
.list1 ul
{
margin : 0;
padding : 0;
line-height:30px;
/*background-color:#096;*/
}
.list1 li
{
margin : 3px;
padding : 8px;
list-style:none;
float:left;
position:relative;
background-color :green;
border-radius:10px;
}
/*Nested UL*/
ul ul
{
position:absolute;
visibility:hidden;
/*height:30px;*/
}
ul li:hover ul
{
visibility:visible;
}
.list1 li:hover
{
background:#0C6;
}
ul li:hover ul li a:hover
{
background-color:#0C3;
color:#000;
}
</style>
මේ තියෙන්නේ CSS part එක. මම notepad එකෙන් type කරපු නිසා ලොකුවටම ලස්සන කරන්න බැරි වුනා එත් ඔයාල try කරන්න තව ලස්සන කරන්න සහ තව ගොඩාක් වැඩ කෑලි තියෙනවා. හොයගෙන කරන්න!
Further Reference - http://www.w3schools.com/css/default.asp
එහෙනම් පස්සෙ හම්බවෙමු!
එතකන් Good Luck! :)
අපි හිතමු අපිට හදන්න ඔනි මේ පහලින් පෙන්නලා තියෙන වගෙ drop down list එකක් කියල.
හරි,එහෙනම් අපි මුලින්ම ඩ්‍රොප් ඩව්න් ලිස්ට් එකේ sketch එක හදාගෙන ඉමු.
To create the sketch we use Unordered List in HTML.
Ok now,First we have to create main lists :- locations, The Menu, Our Story, Contact Us
ඒක කරන්නෙ මෙන්න මෙහෙමයි.
<ul>
<li>Locations</li>
</ul>
<ul>
<li>The Menu</li>
</ul>
<ul>
<li>Our Story</li>
</ul>
<ul>
<li>Contact Us</li>
</ul>
Now we have done creating our main tabs/lists. එහෙත් මේක තාම sketch එක විතරයි.
Now we have to create our drop down list part.
ඒක කරන්නෙ මෙන්න මෙහෙමයි.
<ul class="list1">
<li>Locations
<ul class="list2">
<li>Maps</li>
<li>Address</li>
</ul>
</li>
</ul>
<ul class="list1">
<li>The Menu
<ul class="list2">
<li>Breakfast</li>
<li>Lunch</li>
<li>Dinner</li>
</ul>
</li>
</ul>
<ul class="list1">
<li>Our Story
<ul class="list2">
<li>Breakfast</li>
<li>Lunch</li>
<li>Dinner</li>
</ul>
</li>
</ul>
<ul>
<li>Contact Us</li>
</ul>
හරි,දැන් අපි අපේ sketch එක හදාගෙන ඉවරයි! දැන් ඔයාල ලියපු file එක .html extention එක එක්ක save කරල web browser එකෙන් open කරලා බලන්නකො. කැතයි නේද?
This is the point that CSS comes in to action! Now we have to write our CSS file.
මම CSS ලියන්නේ <head> tag එක ඇතුලෙ but ඔයලා කැමති නම් external style sheet එකක් ලියලා page එකට link කරත් අවුලක් නෑ. මම ලියුවෙ <head> tag එක ඇතුලෙ!
<style type="text/css">
*{margin:0; padding:0;}
.list1 ul
{
margin : 0;
padding : 0;
line-height:30px;
/*background-color:#096;*/
}
.list1 li
{
margin : 3px;
padding : 8px;
list-style:none;
float:left;
position:relative;
background-color :green;
border-radius:10px;
}
/*Nested UL*/
ul ul
{
position:absolute;
visibility:hidden;
/*height:30px;*/
}
ul li:hover ul
{
visibility:visible;
}
.list1 li:hover
{
background:#0C6;
}
ul li:hover ul li a:hover
{
background-color:#0C3;
color:#000;
}
</style>
මේ තියෙන්නේ CSS part එක. මම notepad එකෙන් type කරපු නිසා ලොකුවටම ලස්සන කරන්න බැරි වුනා එත් ඔයාල try කරන්න තව ලස්සන කරන්න සහ තව ගොඩාක් වැඩ කෑලි තියෙනවා. හොයගෙන කරන්න!
Further Reference - http://www.w3schools.com/css/default.asp
එහෙනම් පස්සෙ හම්බවෙමු!
එතකන් Good Luck! :)
No comments:
Post a Comment