Горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки
1-03-2011, 18:43. Разместил: Admin
Как сделать эффект нажатой кнопкиПредставляю вашему вниманию самый простой способ создания эффекта нажатия кнопки для навигации сайта. Код меню валидный DTD XHTML 1.0 Strict. Способ на столько прост, что и описывать нечего, приведу сразу пример готового кода.
Эффект создаётся путём изменения цвета рамки и смещения якоря ссылки при наведении курсора мыши на ссылку навигации.
Код горизонтального меню:
HTML код
<div id="vdknopka1">
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 1</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 2</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 3</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 4</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 5</a>
</div>CSS стили
#vdknopka1 {
text-align:center;
width:41em;
margin:0 auto;
}
#vdknopka1 a, #vdknopka1 a:visited {
position:relative;
text-decoration:none;
text-align:center;
background-color:#9ab;
color:#fff;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
padding:0.25em 2em;
margin:0.5em auto;
}
#vdknopka1 a:hover {
top:2px;
left:2px;
color:#fff;
border-color:#345 #cde #def #678;
}__________________________________________________________________________________________
Код вертикального меню (HTML) такой же, только другой идентификатор (id):
HTML код
<div id="vdknopka">
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 1</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 2</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 3</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 4</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 5</a>
</div>
CSS код
#vdknopka a, #vdknopka a:visited {
position:relative;
text-decoration:none;
text-align:center;
background-color:#9ab;
color:#fff;
display:block;
width:10em;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
padding:0.25em;
margin:0.5em auto;
}
#vdknopka a:hover {
top:2px;
left:2px;
color:#fff;
border-color:#345 #cde #def #678;
}Посмотреть пример горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки
Вот и всё.
Пользуйтесь на здоровье! Так же не забываем комментировать и добавлять новость в закладки.
Вернуться назад