Создание меню с помощью CSS

Posted on Сентябрь 15, 2007
Filed Under menu, image replacement, ie, bug, css, html |

Создаем меню

исходный HTML:<ul class="menu">
<li><a class="home" href="#"></a></li>
<li><a class="blog" href="#"></a></li>
<li><a class="autor" href="#"></a></li>
</ul>

Изображения кнопок в двух состояних:

Для того,чтобы избежать моргания изображений, связаное с загрузкой изображения, обьеденим два состояния кнопки в один файл:

Преврашаем наши ссылки в кнопки:*{
margin:0;
padding:0;
}
.menu{
list-type-style:none;
}
.menu li,.menu a{
width:114px;
height:36px
}
.menu a{
display:block;
background-repeat:no-repeat;
background-position: 0 0;
}
.menu a:hover{
background-position:0 -36px;
}
.menu .home{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-home.gif);
}
.menu .blog{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-blog.gif);
}
.menu .autor{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-avtor.gif);
}
пример

Проблема при отключении стилей

Певая проблема которую я предлагаю решить: при отключенных стилях пользователь не увидит вообще никакого меню.

Исправляем HTML:<ul class="menu">
<li><a class="home" href="#">Главная</a></li>
<li><a class="blog" href="#">Блог</a></li>
<li><a class="autor" href="#">Автор</a></li>
</ul>

Поработаем над стилями. Для того чтобы спрятать текст используем один из методов image replace, в частности LIR :.menu li{
width: 114px;
height:36px
}
.menu a{
padding: 36px 0 0 0;
overflow: hidden;
background:url() no-repeat 0 0;
height: 0px !important;
height /**/:33px;
display:block;
}
.menu a:hover{
background-position:0 -36px;
}
Теперь пользователь увидет текстовое меню с отключенными стилями. пример.

Проблема при включённых стилях и отключённых изображениях

Следующим шагом предлагаю решить проблему, возникающую когда пользователь просматривает сайт с отключенными картинками и включенными стилями. В таком случаее пользователь также не увидит меню. Самым подходящим вариантом считаю метод с использованием дополнительного элемента.

Исправляем HTML:<ul class="menu">
<li><a class="home" href="#">Главнаяgt;<span></span></a&</li>
<li><a class="blog" href="#">Блогgt;<span></span></a></li>
<li><a class="autor" href="#">Авторgt;<span></span></a></li>
</ul>

Изменяем CSS :.menu li{
width: 84px;
height:32px;
}
.menu a{
height:32px;
position:relative;
display:block;
}
.menu span{
display:block;
height:32px;
position:absolute;
top:0;
left:0;
background:url() no-repeat 0 0;
}
.menu :hover span{
background-position:0 -32px;
}
Теперь пользователь увидет текстовое меню с отключёнными изображениями и выключеными стилями. пример.

В IE6 наблюдаеться небольшой баг). Он не меняет положение бекграунда после события :hover. Единственный выход, который я вижу, использовать csshover.htc

CSS тогда примет вид:body {
behavior: url("csshover.htc");
}
.menu li,.menu a,.menu span{
width: 114px;
height:36px;
}
.menu a{
position:relative;
display:block;
z-index:1;
}
.menu span{
display:block;
position:absolute;
top:0;
left:0;
z-index:2;
background-repeat:no-repeat
background-position:0 0;
}
* html .menu span{
cursor:hand;
}
.menu span:hover{
background-position:0 -36px;
}
.menu .home span{
background-image:url(menu-home.gif);
}
.menu .blog span{
background-image:url(menu-blog.gif);
}
.menu .autor span{
background-image:url(menu-avtor.gif);
}

Повышаем доступность

Последние штрихи - добавим accesskey к ссылке на главную страницу и атрибут title ко всем ссылкам.
<a class="home" href="#" accesskey="1" title="главная страница сайта" >Главная</a>

Comments

Leave a Reply




Please copy the string zT1Hta to the field below: