Главная » Статьи » Меню

Красивое меню на чистом CSS by slavick

Посмотрите ДЕМО
В то место где будет меню
Код
<li id="hMenu"><a href="#" class="hmenuA">Главная</a></li>

<li id="hMenu"><a href="#" class="hmenuA">Каталог Файлов</a></li>

<li id="hMenu"><a href="#" class="hmenuA">Каталог Статей</a></li>

<li id="hMenu"><a href="#" class="hmenuA">Блог</a></li>


в CSS
Код
#hMenu {
  list-style-type:none;
  background:#EBEBEB;
  padding:3px;
  width:150px;
  text-align: left;
  border-radius:10px;
  margin: 5px;
  box-shadow: 0 0 5px 0 #000;
}
.hmenuA {

  padding:3px;
  display:block;  
  text-decoration:none;
  color:#323232;
}
.hmenuA:hover {
  padding:3.5px;
  display:block;
text-decoration:none;
  background:#BBBBBB;
  box-shadow: 0 0 5px 0 #000;
  border-radius:10px;
}


И вот CSS код с Внутренней Тенью

ДЕМО
Код
#hMenu {
  list-style-type:none;
  background:#EBEBEB;
  padding:3px;
  width:150px;
  text-align: left;
  border-radius:10px;
  margin: 5px;
  box-shadow: inset 0 0 5px 0 #000;
}
.hmenuA {

  padding:3px;
  display:block;  
  text-decoration:none;
  color:#323232;
}
.hmenuA:hover {
  padding:3.5px;
  display:block;
text-decoration:none;
  background:#BBBBBB;
  box-shadow: 0 0 5px 0 #000;
  border-radius:10px;
}
Категория: Меню | Добавил: slavick (27.08.2013)
Просмотров: 108 | Рейтинг: 2.0/4
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]