Поиск
Меню сайта
Бесплатная раскрутка Игры для PC Форум Скачать Услуги сайта uCoz Слушать RadioRecord
World Of Warcraft
Аддоны для WoW Читы Программы Патчи Сайты / WWW для Mangos Готовый сервер
Категории раздела
Шаблоны [6]
Скрипты [11]
Новости сайта [2]
Каталог Файлов [2]
Меню [4]
PSD Шапки [3]
Мини-чат
Новые файлы
Просмотров: 754
Дата: 20.11.2015
Категория: Сайты / WWW для Mangos
Просмотров: 205
Дата: 19.11.2015
Категория: Online
Наш Сервер CS:S
Главная » Файлы » Ucoz » Меню

Параллелограммный вид меню для uCoz
19.11.2015, 15:33

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

Установка

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

Код

</p>

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

<p>

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

Заходим в Панель управления » Управление дизайном » Таблица стилей 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;
}
Категория: Меню | Добавил: seniora-bodya
Просмотров: 99 | Загрузок: 0 | Рейтинг: 5.0/4
Всего комментариев: 0
avatar
Витрина
Купить ссылку здесь
(Цена: 1 руб)


Поставить к себе на сайт
Вход на сайт
Вы вошли как, Гость

Моя страница | Настроить

Мои сообщения | Новых

Покинуть сайт
Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
Друзья сайта
Счетчик посещений сайта Каталог сайтов Стать партнером
Наши баннеры
Популярные темы
Софт
Статистика
Тиц,пр

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Онлайн всего: 1
Гостей: 1
Пользователей: 0
[ Полный Список ]


Карта сайта |
шаблоны для UCOZ
. uCoz
Поисковое продвижение сайта 200stran.ru: показано число посетителей за сегодня, онлайн, из каждой страны и за всё время
С архива шаблонов playroom.do.am можно скачать бесплатно шаблоны для UCOZ с рабочим конструктором на любую тематику.
Если вы ищите другие рабочие шаблоны UCOZ , то на truetemplates.ru вы найдете много оригинальных и адаптированных дизайнов.
Если тема для UCOZ не нашлась и там, то на promowebber.ru вы легко найдете красивые шаблоны для UCOZ и быстро скачаете их без регистрации и ожидания.
Если вам не нужен УКОЗ, а нужна joomla! то шаблоны joomla 2.5 помогут воплотить вам мечту о своем сайте в жизнь.
Тем же кто делает сайты на DLE я рекомендую скачать Ucoz шаблоны с сайта playroom.do.am.
Не будет забыт нами и вордпресс.С сайта playroom.do.am я всегда скачивая шаблоны для wordpress без скрытых ссылок и на русском языке.