Данный туториал расскажет вам, как сделать замечательное, валидное(!) меню со ссылками на подписку на ваш RSS поток. Вот что получится на выходе:

1-ый шаг: HTML код

Создаем <div> с ID rss-menu.Внуть кладем заголовок <h2> с заголовком блока и список <ul>. Вот как-то так:

<div id="rss-menu">
<h2>Subscribe My Feeds</h2>
<ul>
	<li class="feed-xml"> <a href="http://feeds.feedburner.com/rsboarder">Subscribe to RSS Feed</a></li>
	<li class="feed-yahoo"> <a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/rsboarder">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/rsboarder">Subscribe in NewsGator</a></li>
	<li class="feed-bloglines"> <a href="http://www.bloglines.com/sub/ http://feeds.feedburner.com/rsboarder">Subscribe with Bloglines</a></li>
	<li class="feed-netvibes"> <a href="http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/rsboarder">Add to Netvibes</a></li>
	<li class="feed-google"> <a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/rsboarder">Add to Google</a></li>
</ul>
</div>

Как вы видите,каждая ссылка лежит в элементе <li>. Вот так:

Я решил каждому <li> сделать бэкграунд с логотипом того, или иного просмоторщика RSS потока. И, соответственно ссылку на добавление RSS-потока.

2-ой шаг: Описываем классы для каждого ридера.

.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;}

Вот так.

3-ий шаг(последний ). Создаем JS который будет прятать/показывать наш блок.

Впринципе,я не стал изменять код автора данной статьи,но на мой взгляд на jQuery было бы проще реализовать данный функционал. И так код:

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

}

}

Думаю тут все предельно ясно что происходит. Собственно функция применяет к блоку,переданному ей либо display:none, либо block.

И теперь надо создать кнопку что соответственно показывать или прятать блок.Допустим так:

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

Тут мы вызываем ранее созданную функцию showlayer и передаем ей IDнашего блока,то есть rss-menu. Вот впринципе и все

Если хотите что б блок показывался поверх контента, то просто замените значени position на absolute.

Можете посмотреть пример тут, или скачать исходник тут.

Ах, чуть не забыл. В данном туториале используются изображения png формата. Что б не было проблем с отображение в браузере IE6 советую воспользоватся фиксом, описанным тут.