Home » » Create and Edit Drop Down Menu in Blogspot

Create and Edit Drop Down Menu in Blogspot

Posted by Junky Posted on 01:35 with No comments
On this original blog template, there were a few drop down menu, as seen on the picture below. I want to

 1) change the menu and direct to another page within my blog
2) remove the ones that I do not need.



Original Menu. I intend to change the ones in the red box and remove the rest.


 1. To change the menu, I would need to locate a section of the html code as follows:
</div><!-- /header-wrapper -->
<div class='masmenu'>
<ul class='sf-menu'>
<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFasq97dLPyBsLd-f5g47y2jm3TyUnoYsgYeWqe_IbnxWEHH-VrjSNdEzpmn4T9mfFjfcRuiatsPBU4y9VoVpcXZLSCF1wDEdnfayxzPVed9duT1sH-_vGScHzmTRyXMUsV_4ZPWzP2Dk/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Drop Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Drop Menu 3</a>
<ul>
<li><a href='#'>Sub Drop Menu 3.1</a></li>
<li><a href='#'>Sub Drop Menu 3.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Drop Menu 2</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</ul>
 </div>

and change it to the following:

<div class='masmenu'>
<ul class='sf-menu'>
<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFasq97dLPyBsLd-f5g47y2jm3TyUnoYsgYeWqe_IbnxWEHH-VrjSNdEzpmn4T9mfFjfcRuiatsPBU4y9VoVpcXZLSCF1wDEdnfayxzPVed9duT1sH-_vGScHzmTRyXMUsV_4ZPWzP2Dk/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='http://modmyblogg.blogspot.sg/p/about-this-blog.html#'>About This Blog</a></li>
<li><a href='http://modmyblogg.blogspot.sg/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='#'>Drop Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Drop Menu 3</a>
<ul>
<li><a href='#'>Sub Drop Menu 3.1</a></li>
<li><a href='#'>Sub Drop Menu 3.2</a></li>
</ul>

I have created 2 static page on my blog. This would be for the 'About this Blog' information and the Privacy Policy, which I intend to fill up later. Blogger generates a URL created for these 2 pages. I have placed the 2 URLs to direct when the menu is clicked.

The '#' located in each line is for a URL to be placed. This means whenever the Sub Menu is selected, it is directed to the URL indicated.

There is also another code that works in a similar fashion which I have used before:

<li><a class='trigger' href='#'>New Items</a>
<ul>

But I do not see any difference if I use the trigger command or just a href line.

 Nevertheless, the result are as follows:




The 2 menus in the red box has been changed.











Next is to remove the rest of the menu selection. From the same code above, I would comment out the section that I want to remove.

<!-- COMMENT OUT
<li><a href='#'>Drop Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Drop Menu 3</a>
<ul>
<li><a href='#'>Sub Drop Menu 3.1</a></li>
<li><a href='#'>Sub Drop Menu 3.2</a></li>
-->

Final result are as follows:



I prefer using the Comment Out function as it leaves the code intact. I intend to use it at a later stage.

0 comments:

Post a Comment