Параллелограммный вид меню для uCoz

02015-07-0835458Денис Абдуллин

Данный вид меню построен на CSS и не использует никаких JavaScript. Само меню может вписаться во многие необычные дизайны сайта. Так же одно из его преимуществ это дополнительное выпадающие меню. Ну давайте не будем много говорить и перейдем непосредственно к установке.

Установка

Находим то место куда ходим установить меню и вставляем следующий HTML код:

Код

<ul class="menu">
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a>
     <ul>
         <li><a href="#" class="documents">ссылки</a></li>
         <li><a href="#" class="messages">ссылки</a></li>
         <li><a href="#" class="signout">ссылки</a></li>
     </ul>
</li>
<li><a href="#">Ссылка 3</a>
     <ul>
         <li><a href="#" class="documents">ссылки</a></li>
         <li><a href="#" class="messages">ссылки</a></li>
         <li><a href="#" class="signout">ссылки</a></li>
     </ul>
</li>
<li><a href="#">Ссылка 4</a>
     <ul>
         <li><a href="#" class="documents">ссылки</a></li>
         <li><a href="#" class="messages">ссылки</a></li>
         <li><a href="#" class="signout">ссылки</a></li>
         <li><a href="#" class="signout">ссылки</a></li>
         <li><a href="#" class="signout">ссылки</a></li>
         <li><a href="#" class="signout">ссылки</a></li>
     </ul>
</li>
<li><a href="#">Ссылка 5</a></li>
<li><a href="#">Ссылка 6</a></li>
</ul>

Меню мы установили. Давайте теперь перейдем к украшению и применению стилей.

Заходим в Панель управления » Управление дизайном » Таблица стилей CSS и вставим следующий код:

Код

/* Основное */
.menu, .menu ul, .menu li, .menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Редактор меню */
.menu {
display:block;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
/* Редактор ссылок */
.menu li a {
display: inline-block;
margin-top: 10px; margin-bottom: 10px;
margin-left: 3px; margin-right: 3px;
padding: 5px;
padding-left: 10px; padding-right: 10px;
background: #252322;
border: 1px solid #433E38;
-webkit-transform: skew(-30deg); /* Угол наклона, если убрать минус (-), то наклон будет в другую сторону.*/
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
font-size: 20px;
font-family: bold "OpenSans";
color: #fff;
text-transform: uppercase;
}
.menu li:first-child a {
border-left: none;
}
.menu li:last-child a {
border-right: none;
}
.menu li:hover > a {
color: #c9c9c9;
text-decoration: none;
}
/* Редактор для Sub-меню */
.menu ul {
position: absolute;
top: 45px;
}
.menu li:hover > ul {
opacity: 1;
}
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a {
border: none;
}

На этом установка меню закончилась. Те, кто хочет посмотреть какое оно имеет вид, но еще не устанавливали его себе на сайт, можете просмотреть демо страницу.

Демо страница

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Комментарии (8)

Порядок вывода комментариев: