Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS List Menu With Feed Reader Icons

DZone's Guide to

CSS List Menu With Feed Reader Icons

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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

[img_assist|nid=4319|title=|desc=|link=none|align=none|width=420|height=150]

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>
<ul>

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

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

<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>

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

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

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

</ul>
</div>

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

[img_assist|nid=4320|title=|desc=|link=none|align=none|width=265|height=228]

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:

.feed-yahoo{
background:url(pic/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(pic/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(pic/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(pic/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(pic/feed-xml.png) no-repeat;
}
.feed-google{
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;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else {
document.getElementById(layer).style.display="none";
}
}

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

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}