Каталог файлов

Главная » Файлы » Меню » Вертикальное

Уникальное выпадающее вертикальное меню


Установка:
1) Скачайте архив.
2) Зайдите в Файловый менеджер и создайте папку (если ее нету) "image".
3) Скиньте все картинки в эту папку.

Минус в том, что нельзя просто вставить ссылку, потому что она не повернется на 90 градусов, поэтому сделайте пункты меню в фотошопе и поверните картинку так как повернуты мои картинки.

Вставьте туда где будет ваше меню:
Код
<div class="menu_2" tabindex="1">Текст меню<br><br>
<a href="#"><img src="/image/bez_imeni-1.png"></a>
<a href="#"><img src="/image/bez_imeni-2.png"></a>
<a href="#"><img src="/image/bez_imeni-3.png"></a></div>
<div class="menu_2" tabindex="1">Текст меню2<br><br>
<a href="#"><img src="/image/bez_imeni-1.png"></a>
<a href="#"><img src="/image/bez_imeni-2.png"></a>
<a href="#"><img src="/image/bez_imeni-3.png"></a></div>
<a href="#" class="menu_3" tabindex="1">Текст меню3</a>
<a href="#" class="menu_3" tabindex="1">Текст меню4</a>
<a href="#" class="menu_3" tabindex="1">Текст меню5</a>

Вставьте в таблицу стилей CSS:
Код
.menu_2 {
display: block; width: 180px; height: 25px;margin-top: 2px;padding-left: 7px;padding-top: 7px;font-size: 15px; font-weight: bold; background:#0071D0;
  -webkit-transition-property:transform;
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: linear;
  -o-transition-property:transform background box-shadow;
  -o-transition-duration: 0.3s;
  -o-transition-timing-function: linear;
  -ms-transition-property:transform background box-shadow;
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: linear;
  -moz-transition-property:transform background box-shadow;
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: linear;
  overflow: hidden;color: #fff; cursor: pointer;
}
.menu_2:link {color: #fff; text-decoration: none;}
.menu_2:active {color: #fff; text-decoration: none;}
.menu_2:visited {color: #fff; text-decoration: none;}
.menu_2:hover {color: #fff; text-decoration: none; background:#1B8CEB; box-shadow: 0 0 7px #000;}
.menu_2:focus {outline: none; -webkit-transform: rotate(90deg); height: 180px;background:#1B8CEB; box-shadow: 0 0 7px #000;
}
.menu_3 {
display: block; background:#0071D0; width: 180px; height: 25px;margin-top: 2px;padding-left: 7px;padding-top: 7px;font-size: 15px; font-weight: bold;
  overflow: hidden;color: #fff; cursor: pointer;outline: none;
  -webkit-transition-property:background box-shadow;
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: linear;
  -o-transition-property:transform background box-shadow;
  -o-transition-duration: 0.3s;
  -o-transition-timing-function: linear;
  -ms-transition-property:transform background box-shadow;
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: linear;
  -moz-transition-property:transform background box-shadow;
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: linear;
}
.menu_3:link {color: #fff; text-decoration: none;}
.menu_3:active {color: #fff; text-decoration: none;}
.menu_3:visited {color: #fff; text-decoration: none;}
.menu_3:hover {color: #fff; text-decoration: none; background:#1B8CEB; box-shadow: 0 0 7px #000;}

Поддержка браузеров   

Категория: | | 752 | 140 | Дата: 29/07/2026
Всего комментариев: 1
Najlepsze oferty w sieci: http://partyautobus.pl/gazetka-obi - obigazetka
ThomasDrove
Имя *:
Email:



Код *:

Copyright MyCorp © 2012-2026