இந்த வலைப்பூவை விரும்புகிறீர்களா?

வியாழன், 26 ஜூலை, 2012

பிளாக்கரில் டிராப் டவுன் மெனு

Horizontal Navigation drop menu for Blogger
ஒரு நண்பர் எனது blog http://arasan.info விலும், http://graphics.arasan.info விலும் உள்ள Horizotal Navigation Menu எப்படிச் செய்வது? அதற்கான வழிமுறை என்ன? என்று கேட்டிருந்தார்.
நான் www.mybloggertricks என்ற வலைத்தளத்தில் இருந்து, அவர்கள் கொடுத்திருந்த ஒரு html Code-ஐ எடுத்து, அதில் தேவையான திருத்தங்களைச் செய்து எனது blogger ல் Gadgetஆக சேர்த்தேன் அவ்வளவுதான்.

அந்த  html Code-ஐ கீழே பெட்டிக்குள் கொடுத்திருக்கிறேன்.
Horizontal dropdown Menu -வை உங்கள் blogger-ல் சேர்க்க
  1. உங்கள் blogger -க்குள் Sign in செய்யுங்கள்.
  2. HTML/Javascript Widget -ஐ தேர்ந்தெடுங்கள். எப்போதும் நாம் Header க்கு கீழேயே இடுவோம், ஆகையால் Header க்கு கீழ் உள்ள Add gadget ஐயே தேர்ந்தெடுங்கள்.
  3. கீழ்க்கண்ட Html Code-Paste செய்யுங்கள்.
<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
<style>
/* ######### Drop Down Menu by
www.MyBloggerTricks.com ######### */

.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
background-color: black;
color: white;
}
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}
.mattblackmenu li{
display: inline;
margin: 0;
}
.mattblackmenu li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141;
}
.mattblackmenu li a:visited{
color: white;
}
.mattblackmenu li a:hover{
background: black; /*background of tabs for hover state */
}
.mattblackmenu a.selected{
background: black; /*background of tab with "selected" class assigned to its LI */
}
</style>

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#" rel="ddsubmenu1">LINK2</a></li>
<li><a href="#" rel="ddsubmenu2">LINK3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#" rel="ddsubmenu3">LINK5</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li><a href='#'>LINK2 ITEM 1</a></li>
<li><a href='#'>LINK2 ITEM 2</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 2.1</a></li>
  <li><a href='#'>LINK2 ITEM 2.2</a></li>
  </ul>
</li>
<li><a href='#'>LINK2 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 3.1</a></li>

    </ul>
</li>

<li><a href='#'>LINK2 ITEM 4</a></li>
</ul>

<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li><a href='#'>LINK3 ITEM 1</a></li>
<li><a href='#'>LINK3 ITEM 2</a></li>
<li><a href='#'>LINK3 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK3 ITEM 3.1</a></li>
<li><a href='#'>LINK3 ITEM 3.2</a></li>
  <li><a href='#'>LINK3 ITEM 3.3</a></li>
  <li><a href='#'>LINK3 ITEM 3.4</a></li>
  </ul>
</li>
<li><a href='#'>LINK3 ITEM 4</a></li>
<li><a href='#'>LINK3 ITEM 5</a>
  <ul>
  <li><a href='#'>LINK3 ITEM 5.1</a></li>
  <li><a href='#'>LINK3 ITEM 5.2</a>
    <ul>
    <li><a href='#'>LINK3 ITEM 5.2 1</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 2</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 3</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href='#'>LINK3 ITEM 6</a></li>
</ul>

<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li><a href='#'>LINK5 ITEM 1</a></li>
<li><a href='#'>LINK5 ITEM 2</a></li>
<li><a href='#'>LINK5 ITEM 3</a></li>
<li><a href='#'>LINK5 ITEM 4</a></li>
<li><a href='#'>LINK5 ITEM 5</a></li>
</ul>

இந்த Html Code-ஐ சரியாக நீங்கள் புரிந்து கொண்டு திருத்த வேண்டும்.
  • # குறி எங்கெல்லாம் உள்ளதோ அங்கெல்லாம் உங்கள் Page Link குகளை Replace செய்யுங்கள்.
  • bolded black texts (அதாவது Link என்று ஆரம்பிக்கும் எல்லா கருப்பு போல்ட் டெக்ஸ்டுகள்) எல்லாவற்றிலும் Page Title (உங்கள் பக்கங்களின் தலைப்புகளை இட்டு நிரப்புங்கள்.
  • கருப்புப் பட்டையிலிருந்து Drop Down ஐ உருவாக்க rel="ddsubmenu1 என்ற rel attributeஐ சேர்த்துக்கொள்ளுங்கள். உங்கள் Drop Down உருவாகிவிடும்.
  • சாதாரணமாகப் பயன்படுத்தும் li and ul சட்டங்களே sub menu மற்றும் sub sub menu link களை உருவாக்கப் பயன்படும்.
  • எப்போதுமே Main linkகள் முதலில் drop down menu  - JavaScript call function க்கு அடுத்தவரும்படியாகவுமே இருக்கும்.
  • உங்கள் பட்டையின் நிறத்தை மாற்ற  background: #414141;  என்பதை மாற்றிக் கொள்ளுங்கள்.
www.mybloggertricks ல் உள்ள வழிமுறைகளைக் கூடுமானவரை மொழி பெயர்த்திருக்கிறேன் என்றே எண்ணுகிறேன். இருந்தாலும் சாதாரண ஆங்கில அறிமுகம் (அறிவு அல்ல) இருந்தாலே www.mybloggertricksக்கே சென்று ஆங்கிலத்திலேயே படித்தால் இன்னும் சற்று Easy ஆக இருக்கும் என்று நினைக்கிறேன்.

2 கருத்துகள்:

  1. மிகவும் நன்றி அரசன். செய்து பார்த்தேன். ஏதோ தவறு செய்திருப்பேன் போல் தெரிகிறது. சரியாக வரவில்லை. மீண்டும் முயற்சி செய்து கொண்டு இருக்கிறேன். தொடரட்டும் உங்கள் தொண்டு

    பதிலளிநீக்கு

உங்கள் கருத்தையும் சொல்லுங்க. முடிந்தால் மறுமொழி கொடுக்கிறேன்.