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 this tutorialStep 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>
<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>
</div>
How you can see from the code above, each feed reader link is contained into a <li> element:
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;
}
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";
}
}
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
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Old Comments
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.
Nice menu! Thanks
woa i really love this menu, i think it would be a niche plugin into my cms project
I need keep the menu hided and show when clicked, what should i do?
hi
it's really a nice CSS menu
but the link of tutorial doesn't work
please checkup it
Have a nice day
Hello i have traduced to Spanish this post in my blog
http://www.colordeu.es/BLOG/bonito-menu-css-para-lista-de-iconos
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!
where's the demo???
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.
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
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"
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+ */
Hay Antonio Lupetti,
Thanks allot for a nice writeup.
It helps me allot.
Keep doing the good things :)