Универсальное графическое меню
Учтя замечания моих уважаемых комменаторов к посту о графическом меню выкладываю код и исходник обновлённого варианта графического меню.
Униваерсально оно тем, что:
- Изображения кнопок соеденены в один файл, а значит не будут подгружаться при наведении на ссылку.
- Ссылки будут отображаться текстом при отключенных картинках
- Ссылки будут отображаться списком при отключенном css
- Меню проверено в браузерах: IE 5.5+, Firefox 2.0.0.6, Safari 3.0.3 (Win), Opera 9.23, Swift 0.2
Минус один: Приходится использовать две ссылки.
<style type="text/css">
ul#mainmenu, ul#mainmenu li, ul#mainmenu li a{
margin: 0;
padding: 0;
height: 32px;
display: block
}
ul#mainmenu, ul#mainmenu li{
list-style: none
}
ul#mainmenu li{
float: left;
position: relative
}
ul#mainmenu li a{
text-align: center;
width: 84px;
}
ul#mainmenu li a.img{
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat
}
ul#mainmenu li#mm_home a.img{
background-image: url(images/home.png)
}
ul#mainmenu li#mm_blog a.img{
background-image: url(images/blog.png)
}
ul#mainmenu li#mm_author a.img{
background-image: url(images/author.png)
}
ul#mainmenu li a.img:link{
background-position: 0 0
}
ul#mainmenu li a.img:hover{
background-position: 0 -32px
}
</style>
<ul id="mainmenu">
<li id="mm_home"><a href="home">Home</a><a class="img" href="home"></a></li>
<li id="mm_blog"><a href="blog">Blog</a><a class="img" href="blog"></a></li>
<li id="mm_author"><a href="author">Author</a><a class="img" href="author"></a></li>
</ul>
