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


  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=""> Guide To Make Blog</a>

</li><li><a href=""> Remove Label Number</a>

</li><li><a href=""> Create Read More </a>

</li><li><a href=""> Widget Translator</a>

</li><li><a href=""> Create Search Engine</a>

</li><li><a href=""> Create Page Navigation</a>

</li><li><a href=""> Make related Posts</a>

</li><li><a href=""> Disable Right Click</a>

</li><li><a href=""> Recent Posts and Recent Comments</a>

</li><li><a href=""> Alexa Widget</a>

</li><li><a href=""> Create Meta Tag</a>

</li><li><a href=""> Free Web Directory</a>

</li><li><a href=""> Dummy Blog</a>

</li><li><a href=""> Check Quality Backlink</a>

</li><li><a href=""> Submit Url To Google</a>

</li><li><a href=""> How to Make a Label Cloud</a>

</li><li><a href=""> 100 Backlinks One-Way</a>

</li><li><a href=""> Make a Posting Separate Box</a>


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