Установка: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;}
Поддержка браузеров