Over a million developers have joined DZone.

CSS List Menu With Feed Reader Icons

DZone's Guide to

CSS List Menu With Feed Reader Icons

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

This tutorial illustrates how to design a nice CSS menu with a list of feed reader icons. The result is something like this:


Download source code for the full code and icons.

Download this tutorial

Step 1: HTML Code
Create a <div> element with ID=rss-menu and add an header using <h2> tag and an unordered list using <ul> tag:

<div id="rss-menu">
<h2>Subscribe My Feeds</h2>

<li class="feed-xml">
<a href="http://feeds.feedburner.com/Woork">Subscribe to RSS Feed</a>

<li class="feed-yahoo">
<a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/Woork">Add to My Yahoo</a>

<li class="feed-newsgator">
<a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/Woork">Subscribe in NewsGator</a>

<li class="feed-bloglines">
<a href="http://www.bloglines.com/sub/ http://feeds.feedburner.com/Woork">Subscribe with Bloglines</a>

<li class="feed-netvibes">
<a href="http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/Woork">Add to Netvibes</a>

<li class="feed-google">
<a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/Woork">Add to Google</a>


How you can see from the code above, each feed reader link is contained into a <li> element:


I designed and used a background icon for each <li> element (using CSS), adding a short description. (ex. "Add to netvibes").

Step 2: CSS Code
I used a CSS class for each feed icons:

background:url(pic/feed-yahoo.png) no-repeat;
background:url(pic/feed-newsgator.png) no-repeat;
background:url(pic/feed-netvibes.png) no-repeat;
background:url(pic/feed-bloglines.png) no-repeat;
background:url(pic/feed-xml.png) no-repeat;
background:url(pic/feed-google.png) no-repeat;

Download source code for full CSS code.

Step 3: Show/Hide Menu with Javascript
You can also add a javascript function to show/hide this menu in your page adding this simple javascript code in the <head> tag:

function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
} else {

This function take in input a parameter which is the ID of the layer you want to show/hide (in this case "rss-menu"). So, create a button which you can use to show/hide your menu:

<a href="#" onclick="javascript:showlayer('rss-menu')" class="rss-button">Subscribe My Feed</a>

If you want your menu to be displayed above the content of your page set the CSS attribute position to absolute. That's it!

Original Author

Original Article By Antonio Lupetti

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}