Горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, Вертикальное меню    Дата: 1-03-2011, 18:43
Горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопкиКак сделать эффект нажатой кнопки
Представляю вашему вниманию самый простой способ создания эффекта нажатия кнопки для навигации сайта. Код меню валидный 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; 
 }


Посмотреть пример горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки

Вот и всё.
Пользуйтесь на здоровье! Так же не забываем комментировать и добавлять новость в закладки.
Версия для печати
  • 100
     Просмотров: 7 546      Комментариев: 1   

Понравилась новость Горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

Другие новости по теме

Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки из категории Меню навигации

№ 1 Автор: nthanter 9 августа 2012 16:15

 Вот такой я - nthanter

nthanter
Гости
комментариев
публикаций

Статус:
very old version

  • Нравится
  • 0
    

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус