Главная » Файлы » Прочие скрипты » CSS
Простенькое Выпадающие меня на CSS
24.06.14, 17:03:42


Я не стал сильно совершенствовать вид меню т.к я его сделал чтобы показать как можно легко сделать меню на CSS выпадающим

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

В то место где будет Меню
Код
<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;

  }

Категория: CSS | Добавил: Apocalypse | Теги: CSS, меня, на, Простенькое, выпадающие
Просмотров: 567 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: