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

Простенькое Выпадающие меня на CSS by slavick

Посмотрите ДЕМО

В то место где будет Меню
Код
<div class="tabs">
  <div class="content"><div class="text">
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
   
   
  </div></div>
  <div>Меню</div>
</div>  

<div class="tabs">
  <div class="content"><div class="text">
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
   
   
  </div></div>
  <div>Меню</div>
</div>

<div class="tabs">
  <div class="content"><div class="text">
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
   
   
  </div></div>
  <div>Меню</div>
</div>  

<div class="tabs">
  <div class="content"><div class="text">
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
   
   
  </div></div>
  <div>Меню</div>
</div>

<div class="tabs">
  <div class="content"><div class="text">
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
   
   
  </div></div>
  <div>Меню</div>
</div>  

<div class="tabs">
  <div class="content"><div class="text">
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
  <a href="#" class="submenua">Ссылка</a>
   
   
  </div></div>
  <div>Меню</div>
</div>


В CSS
Код
.tabs {
  cursor:pointer;
  border-radius:10px;
  padding:6px;
  background:#e3e3e3;
  min-width:90px;

  float: left; /* Все вкладки располагаем в одну строку */
  margin: 3px; /* Отступы вкладок друг от друга */

   
   
}

.content {
  display: none; /* Скрываем содержимое */
  padding-top: 50px; /* Чтобы название вкладки было ниже содержимого */
  position: absolute; /* Чтобы содержимое не двигало элементы на странице */
   
}
.tabs:active .content {
   
  display: block; /* Когда кликаем по вкладке, открываем содержимое content */
}
.content:hover {
  display: block; /* Пока курсор наведён на контент, не закрываем его */
}
.text {
  background:#e3e3e3;
  padding:15px;
  border-radius:10px;
  width:200px;
}
.submenua {
  border-radius:3px;
  background:#c7c7c7;
  padding:3px;
  text-decoration:none;
  margin:3px;
  display:block;
  color:#000;
  transition-duration:0.7s;
}

.submenua:hover {
  background:#fff;
   
}

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