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

Открывающиеся Меню на чистом CSS by slavick

Посмотрите ДЕМО
В этом Примере используется обработка click на CSS
Через checkbox

В то место где будет меню
Код
<input type="checkbox" id="toggle">
<label for="toggle">МЕНЮ</label>
  <p class="to-be-changed">
   
  <a href="#" class="aaa">subМеню</a>
  <a href="#" class="aaa">subМеню</a>
  <a href="#" class="aaa">subМеню</a>
  <a href="#" class="aaa">subМеню</a>
   
   
   
  </p>


В CSS
Код
.to-be-changed {
  display:none;
   
  transition-duration:0.5s;
  border-radius:20px 10px 20px 10px;
   
}
   
input[type=checkbox]:checked ~ .to-be-changed {
  display:block;
  transition-duration:0.5s;
}
input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
   
label {
  display: block;
  background: #08C;
  padding: 5px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 2px;
  color: white;
  font-weight: bold;
  width:150px;
  height:20px;
  transition-duration:0.5s;
}
   
input[type=checkbox]:checked ~ .to-be-changed {
  color: red;
}
.aaa {
  margin-top:3px;
  display: block;
  background: #e3e3e3;
  padding: 5px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 2px;
  color: black;
  font-weight: bold;
  width:150px;
  height:20px;
  transition-duration:0.5s;
}
.aaa:hover {
  background:#AFAFAF;

}
Категория: Меню | Добавил: slavick (10.09.2013)
Просмотров: 164 | Теги: css, slavick, Открывающиеся, чистом, меню, By, на | Рейтинг: 1.0/3
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]