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

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

08.07.201515018

Данный вид меню построен на 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;
}

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




Сохраните в социальную сеть
Комментарии (8)
Что такое Параллелограммый? может всё таки Вид меню для uCoz в стиле параллелограмма
1
Deniss Lvov 08.07.2015 в 14:13Спам
Норм, спасибо
0
Кирилл 08.07.2015 в 16:59Спам
Спасибо что выложили такое меню
-4
STORM 08.07.2015 в 18:14Спам
Кирил ты считаешь что тут все идиоты?
0
Мне кажется в стандартных шаблонах менюшки намного лучше. Вместо этого шлака можно было что-нибудь действительно стоящее взять с codepen
0
Владислав 08.07.2015 в 19:08
Скрытая реклама? :D
0
ну мне бы еще за это платили)
0
Владислав 08.07.2015 в 19:23
А кто знает, может вы шпион:D
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт