Меню как на Маке

Как тебе такое меню для сайта?

Вставь этот код в <head>:

Теперь подбери для меню картинки в формате .png и одного размера.
Здесь используются иконки 128 на 128
Вообщем, замени эти картинки своими и вставь этот код в нужное место <body>:

<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="#"><img src="/images/home.png" alt="home" /><span>Home</span></a> 
  <a class="dock-item" href="#"><img src="/images/email.png" alt="contact" /><span>Contact</span></a> 
  <a class="dock-item" href="#"><img src="/images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 
  <a class="dock-item" href="#"><img src="/images/music.png" alt="music" /><span>Music</span></a> 
  <a class="dock-item" href="#"><img src="/images/video.png" alt="video" /><span>Video</span></a> 
  <a class="dock-item" href="#"><img src="/images/history.png" alt="history" /><span>History</span></a> 
  <a class="dock-item" href="#"><img src="/images/calendar.png" alt="calendar" /><span>Calendar</span></a> 
  <a class="dock-item" href="#"><img src="/images/rss.png" alt="rss" /><span>RSS</span></a>
</div>
</div>
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth: 100,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)
		}
	);

</script>

Хочешь, чтобы меню было приклеено внизу страницы?

Тогда в <head> то же самое, а в <body> немного иначе:

<div class="dock" id="dock2">
  <div class="dock-container2">
          <a class="dock-item2" href="#"><span>Home</span><img src="/images/home.png" alt="home" /></a> 
	  <a class="dock-item2" href="#"><span>Contact</span><img src="/images/email.png" alt="contact" /></a> 
	  <a class="dock-item2" href="#"><span>Portfolio</span><img src="/images/portfolio.png" alt="portfolio" /></a> 
	  <a class="dock-item2" href="#"><span>Music</span><img src="/images/music.png" alt="music" /></a> 
	  <a class="dock-item2" href="#"><span>Video</span><img src="/images/video.png" alt="video" /></a> 
	  <a class="dock-item2" href="#"><span>History</span><img src="/images/history.png" alt="history" /></a> 
	  <a class="dock-item2" href="#"><span>Calendar</span><img src="/images/calendar.png" alt="calendar" /></a> 
	  <a class="dock-item2" href="#"><span>Links</span><img src="/images/link.png" alt="links" /></a> 
	  <a class="dock-item2" href="#"><span>RSS</span><img src="/images/rss.png" alt="rss" /></a> 
	  <a class="dock-item2" href="#"><span>RSS2</span><img src="/images/rss2.png" alt="rss" /></a> 
  </div>

</div>
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
				$('#dock2').Fisheye(
				{
					maxWidth: 60,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container2',
					itemWidth: 40,
					proximity: 80,
					alignment : 'left',
					valign: 'bottom',
					halign : 'center'
				}
			)
		}
	);

</script>