Breaking News

Tips and Tricks

මෘදුකාංග

Windows Tips & Tricks

Blogger Widgets

Android

Internet

Web Browsers

Fun Virus

ඔයාගෙ බ්ලොග් එකටත් Drop Down Menu එකක් දාගන්න....


          මම අද බ්ලොග් කරන යාළුවන්ට තවත් පොඩි වැඩක් අරන් ආව.බ්ලොග් එකට Drop Down Menu එකක් දාගන්න තියනම් හොඳයි නේද? මම අද කියල දෙන්න යන්නෙ බ්ලොග් එකකට කොහොමද Drop Down Menu එකක් දාගන්නෙ කියලා.කියවල බලන්නකො එහෙනම්....

එහෙනම් දැන් අපි වැඩි කතා නැතුව වැඩේ පටන් ගමු නේද? මුලින්ම ඔයාගෙ බ්ලොගර් ඩෑෂ්බෝඩ් එකට ලොග් වෙන්නකෝ...

දැන් Template → Edit Html කියන එක ක්ලික් කරන්න.


ඊට පස්සෙ ඔයාගෙ බ්ලොග් එකේ HTML කෝඩ් ටික ලෝඩ් වෙයි.ඒකෙන් මුලින්ම ]]></b:skin> කියන කෝඩ් එක හොයාගන්න.ඒකට කලින් තමයි අපේ CSS කෝඩ් එක දාගන්න ඕනෙ.

දැන් පහලින් තියන කෝඩ් එක කොපි කරල ]]></b:skin> කෝඩ් එකට උඩින් (කලින්) පේස්ට් කරගන්න.

/*CSS Menu Bar by GRSoft Creations[Gihan]
----------------------------------------------- */
#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}
#cssmenu ul {
  background: #333333;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu li {
  float: left;
  padding: 0px;
}
#cssmenu li a {
  background: #333333 url('https://lh4.googleusercontent.com/-KIYiEzllCrM/UqlMVJFaKzI/AAAAAAAAApY/XHFNNkcqXFc/s35/seperator.gif') bottom right no-repeat;
-webkit-transition: background-color 300ms linear;
     -moz-transition: background-color 300ms linear;
     -o-transition: background-color 300ms linear;
     -ms-transition: background-color 300ms linear;
     transition: background-color 300ms linear;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: #7face3;
}
#cssmenu ul ul a {
  color: #f0b2f0;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #7387d9 url('https://lh6.googleusercontent.com/-QU77Z3uNOSI/UqlMU9HRKrI/AAAAAAAAApI/_3TNU1OM4Mg/s10/hover.png') bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
-webkit-transition: all 300ms linear;
     -moz-transition: all 300ms linear;
     -o-transition: all 300ms linear;
     -ms-transition: all 300ms linear;
     transition: all 300ms linear;
}
#cssmenu li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul {
  display: block;
visibility:none;
  transition:visibility 0.5s linear;
-webkit-transition: all 300ms linear;
     -moz-transition: all 300ms linear;
     -o-transition: all 300ms linear;
     -ms-transition: all 300ms linear;
     transition: all 300ms linear;
}
#cssmenu li li {
  background: url('https://lh6.googleusercontent.com/-_Hi9zuSOQMA/UqlMWEIMo1I/AAAAAAAAApU/82vMLPzM9aY/s100/sub_sep.gif') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
-webkit-transition: all 300ms linear;
     -moz-transition: all 300ms linear;
     -o-transition: all 300ms linear;
     -ms-transition: all 300ms linear;
     transition: all 300ms linear;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #7387d9 url('https://lh6.googleusercontent.com/-BmUmYya3bSs/UqlMU0_19LI/AAAAAAAAApM/f7fvErChzKU/s10/hover_sub.png') center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
margin-left: 5px;
-webkit-transition: all 300ms linear;
     -moz-transition: all 300ms linear;
     -o-transition: all 300ms linear;
     -ms-transition: all 300ms linear;
     transition: all 300ms linear;
}
#cssmenu p {
  clear: left;
}
හරි දැන් ඒ කෝඩ් එක දාගත්තනේ.ඊට පස්සෙ පහලින් තියන කෝඩ් එක දාගන්න ඕනෙ අපේ Menu Bar එක තියෙන්න ඕන තැනට.ඒක කරන්න ක්‍රම දෙකක් තියනව.මුලින්ම පහලින් තියන කෝඩ් ටික කොපි කරගන්නකෝ...

<!--Drop Down Menu by GRSoft  Creations[Gihan]-->
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>title 1</span></a>
      <ul>
         <li><a href='#'><span>sub 1</span></a></li>
         <li><a href='#'><span>sub 2</span></a></li>
         <li class='last'><a href='#'><span>title 2</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>title 3</span></a>
      <ul>
         <li><a href='#'><span>sub 1</span></a></li>
         <li class='last'><a href='#'><span>sub 2</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>title 4</span></a></li>
</ul>
</div>

1 ක්‍රමය

මේ ක්‍රමය තමයි කලින් ලොඩ් කරගත්ත HTML කොඩ් වලටම ඇඩ් කරන එක.මේකටනම් සාමාන්‍ය දැනුමක් අවශ්‍ය වෙනව මේ ගැන.මේක ටිකක් සැලකිල්ලෙන් කරන්න ඕන.කිසිම කෝඩ් එකක් Delete කරන්න එපා.

මුලින්ම ඔයාගෙ බ්ලොග් එකේ Header එකට අදාල කෝඩ් ටික හොයාගන්න.ඊට පස්සෙ ඒ කෝඩ් එක ඉවරවෙන තැනට පහලින් මේ කෝඩ් එක කොපි කරල පේස්ට් කරගන්න.

<div style='clear:both;'/>
<nav id='cssmenu'>
හරි දැන් මම දෙවෙනියට දුන්න කෝඩ් එක කොපි කරගන්න.ඊට පස්සෙ අන්තිමට දුන්න කෝඩ් එක දාගත්ත තැනට පහලින් පේස්ට් කරගන්න.

දැන් වැඩේ හරි.මේ විදියට කරපු අය ඉතුරු ටිකත් කියවන්න.Menu එකට ලින්ක් දාන විදිය පහලින් දාල තියනව.

2 ක්‍රමය

මේකනම් අමාරු වැඩක් නෙමෙයි.මුලින්ම CSS කෝඩ් එක දාපු එක Save කරගන්න.

දැන් Layout වලට ගිහින් අලුත් ගැජට් එකක් එකතු කරන්න.දකුණු පැත්තෙන් තියන Add Gadget කියන එක ක්ලික් කරන්න.


දැන් වින්ඩෝ එකක් ඕපන් වෙයි.ඒකෙන් HTML/Javascript කියන එක තෝරන්න.


  හරි දැන එන වින්ඩෝ එකේ Content කියන තැනට මම දෙවෙනියට දුන්න කෝඩ් එක කොපි කරල පේස්ට් කරගන්න.Title එකට මොකුත් දෙන්න එපා.



Menu එකට ලින්ක් දාන විදිය


# ලකුණ තියන තැන් වලට ඔයාට ඕන ලින්ක් එක දෙන්න.

Title කියල තියන තැන් වලට ඔයාට අවශ්‍ය නම දෙන්න.

Sub Title කියල තියෙන්නෙ Drop Down Menu එකේ තියන මෙනු වල Titles ටික.ඒවටත් ඔයාට කැමති නම් දෙන්න පුළුවන්.

1 ක්‍රමය හරි 2 ක්‍රමය හරි කරපු ඕනම කෙනෙක් Save කරල බ්ලොග් එකට ගිහින් බලන්න.ඔයා දාගත්ත ලින්ක් වලට අනුව මෙනු බාර් එක වැඩ කරයි.

එහෙනම් මම ගියා.ප්‍රශ්ණ තියනම් අහන්න.

Posted By Gihan Rangana


Join Now - 100% Sure

Ref_banner 468

No comments:

Post a Comment

ඔයලගෙ අදහස් කමෙන්ට් කරල අපට කියන්න.ඒක අපට ගොඩක් වටිනවා.....

Designed By Published.. Blogger Templates