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 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
No comments:
Post a Comment