Create Menu With Scroll

For a beginner blogger like me, create a menu with the scroll may look difficult. But to create a menu with the scroll is in fact very easy, you just need a little HTML code. In addition to saving space, the scroll menu is also seen quite interesting. If you have a long list of menu, you can overcome this by using the scroll menu, as you see at the top of my blog.<

To create a menu with the scroll, you only need the HTML code as below:

<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee">

contents menu your blog

</div>


Description:
  1. Width -> width of the menu

  2. Height -> height of the menu

  3. Padding -> distance between any posts with the edge

  4. Border -> line thickness fringe
You can set it according to your wishes, if you want the menu with a height of 400px, you change the height:400px. Similarly, the breadth, if you want the menu with width 300px, then you change the width:300px.

Example I have a scroll menu, such as the code below:

<div style="overflow:auto;width:280px;height:250px;padding:5px;border:1px solid #CCCCCC; background:transparent; text-align:Left">

<ul><li><a href="http://mindauthor.blogspot.com/2009/07/guide-to-make-blog.html"> Guide To Make Blog</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/02/how-to-remove-label-numbers.html"> Remove Label Number</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/how-to-create-read-more-new-template.html"> Create Read More </a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/how-to-install-translator-widget.html"> Widget Translator</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/how-to-create-search-engine.html"> Create Search Engine</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/how-to-create-page-navigation.html"> Create Page Navigation</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/how-to-make-related-posts.html"> Make related Posts</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/disable-right-click.html"> Disable Right Click</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/make-recent-posts-and-recent-comments.html"> Recent Posts and Recent Comments</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/how-to-install-alexa-widget-in-blog.html"> Alexa Widget</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/place-meta-tag-in-blog.html"> Create Meta Tag</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/free-web-directory.html"> Free Web Directory</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/dummy-blog.html"> Dummy Blog</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/check-quality-backlink.html"> Check Quality Backlink</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/07/submit-url-to-google.html"> Submit Url To Google</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/08/how-to-make-label-cloud.html"> How to Make a Label Cloud</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/08/100-backlink-one-way.html"> 100 Backlinks One-Way</a>

</li><li><a href="http://mindauthor.blogspot.com/2009/08/how-to-make-posting-separate-box.html"> Make a Posting Separate Box</a>
</li></ul>

</div>


The result is as below :



If you want to change the numbers, you can change the code ul, replace with ol. Or can write the number manually.

Happy Testing ..!

 

 

Technorati Tags: ,




Related Posts

Post a Comment

 

Recent Comments

Reader Community

Recent Posts