Почему мне вздумалось вдруг делать какое-то меню для блога - ведь есть вкладки? Дело в том, что на Blogger я либо показываю все вкладки, но тогда у меня не может быть скрытых страниц, которые можно было бы вызывать откуда-то по ссылкам из текста.
Либо вкладки не показываю, а тогда непонятно, как вести управление теми страницами, которые должны быть видимы посетителю. В общем, понадобилось мне убрать вкладки и сделать какое-то меню.
Вот тут и начались мои приключения. Вы скажете: собственно, а какие здесь проблемы-то, ведь и так все понятно? Казалось, что действительно все вроде просто, но повозиться все-таки пришлось.
Вначале я сделал элементарное меню на основе тегов <ul></ul> и <li></li>
Получилось что вроде вот этого:
Естественно, не понравилось, хотелось чего-то более оригинального.
Тогда я решил попробовать сделать флеш - меню, благо программы у меня для этого есть.
Получилось красиво, только вот беда(до меня поздно это дошло почему-то) - для того, чтобы посетитель видел это меню, необходимо, чтобы у него был установлен флеш - плееp от Adobe(Adobe Flash Player), что вообще-то неправильно.
Следующим этапом я решил сделать все нормально, для этого нарисовал по две 2 картинки на каждый пункт меню: основную и замещающую.
Покажу на примере главной страницы:
Основная картинка Замещающая картинка
Код, конечно, совсем простой получился, только мне не понравилось, что надо хранить 2 картинки, да и из-за двух обращений к серверу замедление некоторое получается при вызове замещающей картинки:(
Решил я обойтись одной картинкой. На самом-то деле их две, но только я их объединил к одну вот так:
Замена одного рисунка на другой по вертикали производится сдвигом за счет использования такого универсального свойства, как background-position.
Ну, то, что получилось, Вы видите на своем экране.
Приведу полный код своего меню.
<html>
<head>
<title>Меню блога</title>
<style type="text/css">
A.home {
background: url(images/glav.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 141px; /* Ширина рисунка в пикселах */
height: 41px; /* Высота рисунка */
}
A.home:hover {
background-position: 0 -41px; /* Смещение фона */
}
</style>
<style type="text/css">
A.karta {
background: url(images/karta.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 141px; /* Ширина рисунка в пикселах */
height: 41px; /* Высота рисунка */
}
A.karta:hover {
background-position: 0 -41px; /* Смещение фона */
}
</style>
<style type="text/css">
A.avtor {
background: url(images/avtor.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 141px; /* Ширина рисунка в пикселах */
height: 41px; /* Высота рисунка */
}
A.avtor:hover {
background-position: 0 -41px; /* Смещение фона */
}
</style>
</head>
<body>
<b>
<table width="423" align="left">
<tr>
<td>
<a href="http://sngsnick.blogspot.com/" class="home"></a>
</td>
<td>
<a href="http://sngsnick.blogspot.com/p/blog-page_21.html" class="karta"></a>
</td>
<td>
<a href="http://sngsnick.blogspot.com/p/blog-page_9637.html" class="avtor"></a>
</td>
</b>
</tr>
</table>
</body>
</html>
Надеюсь, что этот материал кому-то поможет. Удачи!
