This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Sunday, June 29, 2008

Nice CSS menu with feed reader icons list

This tutorial illustrates how to design a nice CSS menu with a list of feed reader icons.

I added to this menu the following links: standard reader (your browser), My Yahoo, NewsGator, Bloglines, Netvibes and Google Reader. 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>
<ul>

<li class="feed-xml">
<a href=
"http://feeds.feedburner.com/Woork">Subscribe to RSS Feed</a&gt;
</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:


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 is displayed above the content of your page set CSS attribute position to absolute

It's all!

Download this tutorial

blog comments powered by Disqus
Andy said...

A nice writeup, I'd say, although it has it's quirks.

For instance, the li-classes shouldn't be classes at all, but rather id's (assuming they're going to be unique items).
The article rolls on nicely until it reaches Step 3 where things become very ugly. In my opinion, a A-link should never point to "#" but rather point to a real URL, whereas additional functionality should be applied through JavaScript (not by hardcoding it into the HTML source). This is the basics of progressive enhancement and graceful degradation. Furthermore, I see an error in the article itself where it states that the JavaScript code should be put into the head-tag (it should actually be placed in the script-tag and does not really matter if it's in the head or the body. it's a matter of preference).

Despite those little quirks, it's an overall nice article. Keep up the good work.

Anonymous said...

Nice menu! Thanks

Luca said...

woa i really love this menu, i think it would be a niche plugin into my cms project

Rafael said...

I need keep the menu hided and show when clicked, what should i do?

khammami said...

hi
it's really a nice CSS menu
but the link of tutorial doesn't work
please checkup it
Have a nice day

danideu said...

Hello i have traduced to Spanish this post in my blog

http://www.colordeu.es/BLOG/bonito-menu-css-para-lista-de-iconos

Jordan Wollman said...

Great looking output! Although I would certainly have done a few things differently myself, what you cannot argue with is the quality the communication at the end. It is absolutely clear what this is intended to do.

I think I may very well use a bit of this myself.

Thanks for the article!

Anonymous said...

where's the demo???

Daniel said...

A very nice implementation of a RSS menu, There are a few things that I would have included. As mentioned before, the LI elements should probably be id's or a combination of a class and ID's. The images for the RSS aggregator logos could of been one image and place into the LI using a sprite technique. Lastly although not as important your javascript logic is mixed in with presentation. Use of a framework such as Jquery or Mootools could help this.

Again Overall a wonderful article, keep up the great work and I look forward to your next article.

Fede777 said...

Hey, I followed the tutorial and it works fine, but I can't get the hide thing to work.

I put this code between the head tags in my header.php

Is there something wrong?

script type="text/javascript"
function showlayer('rss-menu'){
var myLayer = document.getElementById('rss-menu').style.display;
if(myLayer=="none"){
document.getElementById('rss-menu').style.display="block";
} else {
document.getElementById('rss-menu').style.display="none";
}
}
/script

Fede777 | Geekspot said...

Well I solved it, I don't know if this is the right way but it works for me.

I removed the hole function stuff in the head tags and just added

style="display:none;" to the div id="rss-menu"

Felicity said...

Great tut, though I notice you have some wrapping issues with your blocks of code. Might want to try something like the following to stop the ugly overflow in your styled code blocks:

white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

Pratik said...

Hay Antonio Lupetti,

Thanks allot for a nice writeup.

It helps me allot.

Keep doing the good things :)

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News