Monday, November 10, 2014

HOW TO CREATE DROPDOWN MENU / SUB PAGES IN BLOG?


See the blog that I created for kumbla dub district youth festival. This blog contains many tabs . Too many tabs make the blog less attractive.
As you you all Tabs are html pages. If I create drop down menu for certain pages,I can reduce the number of tabs. For eg: UP GENERAL, UP ARABIC , UP SANSKRIT come under UP Section.The same is the case of HS and L.P
So I did the following activities.
Step1: I copied the code given below to a text editor or word processor page.
<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"> <a href=''#'>Home</a>
</li>
<li>
<a href='#'>HISTORY</a>
</li>
<li>
<a href='#'>SCHOOLS</a>
</li>
<li>
<a href='#'>COMMITTES</a>
</li>
<li>
<a href='#'>MANUAL</a>
</li>
<li>
<a href='#'>ITEM CODES </a>
</li>
<li>
<a href='#'>ITEM CODES KANNADA</a></li>
<li>
<a href='#'>L.P SECTION</a>
<ul>
<li><a href='#'>L.P GENERAL</a></li>
<li><a
href='#'>L.P ARABIC</a></li></ul>
<li> <a href='#'>U.P SECTION</a>
<ul>
<li><a href='#'>U.P GENERAL</a></li>
<li><a href='#'>U.P SANSKRIT</a></li>
<li><a href='#'>U.P ARABIC</a></li>
</ul>
<li> <a href='#'>H.S.SECTION</a>
<ul>
<li><a href='#'>H.S GENERAL</a></li>
<li><a href='#'>H.S.SANSKRITL</a></li>
<li><a href='#'>H.S ARABIC</a></li></ul>
<li> <a href='#'>H.S.S GENERAL </a>
</li>
<!-- end navmenu --></li></li></li></ul>

2.Then I changed the codes as shown below.
<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"> <a href=''http://kalolsavamkumbla2014.blogspot.in'>Home</a>
</li>
<li>
<a href='http://kalolsavamkumbla2014.blogspot.in/p/history.html'>HISTORY</a>
</li>
<li>
<a href='http://kalolsavamkumbla2014.blogspot.in/p/schools_10.html'>SCHOOLS</a>
</li>
<li>
<a href='http://kalolsavamkumbla2014.blogspot.in/p/committees.html'>COMMITTES</a>
</li>
<li>
<a href='http://kalolsavamkumbla2014.blogspot.in/p/manual.html'>MANUAL</a>
</li>
<li>
<a href='http://kalolsavamkumbla2014.blogspot.in/p/item-codes-kannada.html'>ITEM CODES </a>
</li>
<li>
<a href='http://kalolsavamkumbla2014.blogspot.in/p/item-codes-kannada.html'>ITEM CODES KANNADA</a></li>
<li>
<a href='#'>L.P SECTION</a>
<ul>
<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/lp-general.html'>L.P GENERAL</a></li>
<li><a
href='http://kalolsavamkumbla2014.blogspot.in/p/lp-arabic.html'>L.P ARABIC</a></li></ul>
<li> <a href='#'>U.P SECTION</a>
<ul>
<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/lp-general.html'>U.P GENERAL</a></li>
<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/up-sanskrit.html'>U.P SANSKRIT</a></li>
<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/up-arabic.html'>U.P ARABIC</a></li>
</ul>
<li> <a href='#'>H.S.SECTION</a>
<ul>
<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/hs-general.html'>H.S GENERAL</a></li>
<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/hs-sanskrit.html'>H.S.SANSKRITL</a></li>
<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/hs-arabic.html'>H.S ARABIC</a></li></ul>
<li> <a href='http://kalolsavamkumbla2014.blogspot.in/p/h-s-s-section.html'>H.S.S GENERAL </a>
</li>
<!-- end navmenu --></li></li></li></ul>
* to get the url of the html page (for eg.a href='http://kalolsavamkumbla2014.blogspot.in/p/hs-general.html') I clicked design --> pages. Then I clicked on view option just below the particular page.copied it and pasted it after < a href=''>.
3. Then I Added a HTML/JAVASCRIPT gadget by clicking design--> layout.Then I clicked the ‘add a gadget’ box underneath the blog header add HTML / Java Script.Selected Edit html option of the gadget and pasted the code in which I made changes (serial no:2.)
4. Next step I did was opened add css option by clicking design-->template-->customize-->advanced-->add css. I pasted the codes given below to the css and clicked apply to blog.

 /* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1140px;  /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 15px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}


#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}


 Marvellous. Dropdown menus have been created for the tabs LP SECTION, U.P SECTION and HS SECTION .

4 comments:

  1. Sir
    Congratulations. You done a great job
    JOJO

    ReplyDelete
  2. Sir,
    Thank you for the information. I'll try this in our blog. Continue prompting like this.

    ReplyDelete
  3. well done sir.....
    krishnan am,ghss kottodi

    ReplyDelete
  4. Sir,
    Marquee -can be read. Please stop the shivering(trembling heading). Reading a News paper in a moving bus is difficult- HM., Padre

    ReplyDelete