Красивое функциональное вертикальное меню для сайта uCoz


Красивое функциональное вертикальное меню для сайта uCoz

670
9.2 из 10
Проголосовало: 11






Красивое функциональное вертикальное меню для сайта uCoz с небольшой анимацией. Данное меню сделано при помощи HTML-кода и CSS3. Это меню адаптивно и используются иконки Font Awesome - это огромный плюс, т.к. вам не нужно будет заливать иконки к себе на сайт. Установка очень проста, с ней справится даже ребёнок}}

Установка:

1) Для начала мы установим CSS код, для этого переходим в Панель управления ---> Управление дизайном ---> Общие шаблоны Таблица стилей (CSS) и в самый низ вставляем данный код:

Код
.mcd-menu { list-style: none; padding: 0; margin: 0; background: #FFF; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; width: 250px; } .mcd-menu li { position: relative; } .mcd-menu li a { display: block; text-decoration: none; padding: 12px 20px; color: #777; text-align: left; height: 36px; position: relative; border-bottom: 1px solid #EEE; } .mcd-menu li a i { float: left; font-size: 20px; margin: 0 10px 0 0; } .mcd-menu li a p { float: left; margin: 0 ; } .mcd-menu li a strong { display: block; text-transform: uppercase; } .mcd-menu li a small { display: block; font-size: 10px; } .mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small { position: relative; transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -webkit-transition: all 300ms linear; } .mcd-menu li:hover > a i { opacity: 1; -webkit-animation: moveFromTop 300ms ease-in-out; -moz-animation: moveFromTop 300ms ease-in-out; -ms-animation: moveFromTop 300ms ease-in-out; -o-animation: moveFromTop 300ms ease-in-out; animation: moveFromTop 300ms ease-in-out; } .mcd-menu li:hover a strong { opacity: 1; -webkit-animation: moveFromLeft 300ms ease-in-out; -moz-animation: moveFromLeft 300ms ease-in-out; -ms-animation: moveFromLeft 300ms ease-in-out; -o-animation: moveFromLeft 300ms ease-in-out; animation: moveFromLeft 300ms ease-in-out; } .mcd-menu li:hover a small { opacity: 1; -webkit-animation: moveFromRight 300ms ease-in-out; -moz-animation: moveFromRight 300ms ease-in-out; -ms-animation: moveFromRight 300ms ease-in-out; -o-animation: moveFromRight 300ms ease-in-out; animation: moveFromRight 300ms ease-in-out; } .mcd-menu li:hover > a { color: #e67e22; } .mcd-menu li a.active { position: relative; color: #e67e22; border:0; box-shadow: 0 0 5px #DDD; -moz-box-shadow: 0 0 5px #DDD; -webkit-box-shadow: 0 0 5px #DDD; border-left: 4px solid #e67e22; border-right: 4px solid #e67e22; margin: 0 -4px; } .mcd-menu li a.active:before { content: ""; position: absolute; top: 42%; left: 0; border-left: 5px solid #e67e22; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .mcd-menu li a.active:after { content: ""; position: absolute; top: 42%; right: 0; border-right: 5px solid #e67e22; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } @-webkit-keyframes moveFromTop { from { opacity: 0; -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); } to { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes moveFromLeft { from { opacity: 0; -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes moveFromRight { from { opacity: 0; -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } .mcd-menu li ul, .mcd-menu li ul li ul { position: absolute; height: auto; min-width: 200px; padding: 0; margin: 0; background: #FFF; opacity: 0; visibility: hidden; transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -webkit-transition: all 300ms linear; z-index: 1000; left:280px; top: 0px; border-left: 4px solid #e67e22; } .mcd-menu li ul:before { content: ""; position: absolute; top: 25px; left: -9px; border-right: 5px solid #e67e22; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } .mcd-menu li:hover > ul, .mcd-menu li ul li:hover > ul { display: block; opacity: 1; visibility: visible; left:250px; } .mcd-menu li ul li a { padding: 10px; text-align: left; border: 0; border-bottom: 1px solid #EEE; height: auto; } .mcd-menu li ul li a i { font-size: 16px; display: inline-block; margin: 0 10px 0 0; } .mcd-menu li ul li ul { left: 230px; top: 0; border: 0; border-left: 4px solid #e67e22; } .mcd-menu li ul li ul:before { content: ""; position: absolute; top: 15px; left: -9px; border-right: 5px solid #e67e22; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } .mcd-menu li ul li:hover > ul { top: 0px; left: 200px; } .mcd-menu li a.search { padding: 10px 10px 15px 10px; clear: both; } .mcd-menu li a.search i { margin: 0; display: inline-block; font-size: 18px; } .mcd-menu li a.search input { border: 1px solid #EEE; padding: 10px; background: #FFF; outline: none; color: #777; width:170px; float:left; } .mcd-menu li a.search button { border: 1px solid #e67e22; background: #e67e22; outline: none; color: #FFF; margin-left: -4px; float:left; padding: 10px 10px 11px 10px; } .mcd-menu li a.search input:focus { border: 1px solid #e67e22; } .search-mobile { display:none !important; background:#e67e22; border-left:1px solid #e67e22; border-radius:0 3px 3px 0; } .search-mobile i { color:#FFF; margin:0 !important; } @media only screen and (min-width: 1200px) { .container { width: 1210px; } } @media only screen and (min-width: 960px) and (max-width: 1199px) { .container { width: 1030px; } .mcd-menu { margin-left:10px; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 682px; } .mcd-menu { width: 200px; } .mcd-menu li a { height:30px; } .mcd-menu li a i { font-size: 22px; } .mcd-menu li a strong { font-size: 12px; } .mcd-menu li a small { font-size: 10px; } .mcd-menu li a.search input { width: 120px; font-size: 12px; } .mcd-menu li a.search button{ padding: 8px 10px 9px 10px; } .mcd-menu li > ul { min-width:180px; } .mcd-menu li:hover > ul { min-width:180px; left:200px; } .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul { min-width:150px; } .mcd-menu li ul li:hover > ul { left:180px; min-width:150px; } .mcd-menu li ul li ul li:hover > ul { left:150px; min-width:150px; } .mcd-menu li ul a { font-size:12px; } .mcd-menu li ul a i { font-size:14px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 428px; margin: 0 auto; } .mcd-menu { width: 50px; } .mcd-menu li a { position: relative; padding: 12px 16px; height:20px; } .mcd-menu li a small, .mcd-menu li a strong, .mcd-menu li .search { display: none; } .mcd-menu li a:hover strong,.mcd-menu li a.active strong { display:block; font-size:10px; padding:3px 0; position:absolute; bottom:0px; left:0; background:#e67e22; color:#FFF; min-width:100%; text-transform:lowercase; font-weight:normal; text-align:center; } .mcd-menu li > ul { min-width:180px; left:70px; } .mcd-menu li:hover > ul { min-width:180px; left:50px; } .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul { min-width:150px; } .mcd-menu li ul li:hover > ul { left:180px; min-width:150px; } .mcd-menu li ul li ul li > ul { left:35px; top: 45px; border:0; border-top:4px solid #e67e22; } .mcd-menu li ul li ul li > ul:before { left:30px; top: -9px; border:0; border-bottom:5px solid #e67e22; border-left:5px solid transparent; border-right:5px solid transparent; } .mcd-menu li ul li ul li:hover > ul { left:30px; min-width:150px; top: 35px; } .mcd-menu li ul a { font-size:12px; } .mcd-menu li ul a i { font-size:14px; } } @media only screen and (max-width: 479px) { .container { width: 320px; margin: 0 auto; } .mcd-menu { width: 50px; } .mcd-menu li a { position: relative; padding: 12px 16px; height:20px; } .mcd-menu li a small, .mcd-menu li a strong, .mcd-menu li .search { display: none; } .mcd-menu li a:hover strong, .mcd-menu li a.active strong { display:block; font-size:10px; padding:3px 0; position:absolute; bottom:0px; left:0; background:#e67e22; color:#FFF; min-width:100%; text-transform:lowercase; font-weight:normal; text-align:center; } .mcd-menu li > ul { min-width:180px; left:70px; } .mcd-menu li:hover > ul { min-width:180px; left:50px; } .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul { min-width:150px; } .mcd-menu li ul li:hover > ul { left:180px; min-width:150px; } .mcd-menu li ul li ul li > ul { left:35px; top: 45px; border:0; border-top:4px solid #e67e22; } .mcd-menu li ul li ul li > ul:before { left:30px; top: -9px; border:0; border-bottom:5px solid #e67e22; border-left:5px solid transparent; border-right:5px solid transparent; } .mcd-menu li ul li ul li:hover > ul { left:30px; min-width:150px; top: 35px; } .mcd-menu li ul a { font-size:12px; } .mcd-menu li ul a i { font-size:14px; }


а это код все сюда же, но не в самый низ, а в самый верх:

Код
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");


Данный код служит для отображались иконки Font Awesome.

А если не хотите в css вставлять этот стиль Font Awesome, то можно в html-код между <head>и</head> вставить следующее:
Код

<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>


2) Ну а теперь вставляем сам каркас, а именно html-код, его вставляете в левый или правый блок, ну или куда вашей душе угодно:

Код
<nav> <ul class="mcd-menu"> <li> <a href=""> <i class="fa fa-home"></i> <strong>Главная</strong> <small>вернуться домой</small> </a> </li> <li> <a href="" class="active"> <i class="fa fa-edit"></i> <strong>О нас</strong> <small>краткая информация</small> </a> </li> <li> <a href=""> <i class="fa fa-gift"></i> <strong>Избранное</strong> <small>любимые сайты</small> </a> </li> <li> <a href=""> <i class="fa fa-globe"></i> <strong>Новости</strong> <small>только самые интересные</small> </a> </li> <li> <a href=""> <i class="fa fa-comments-o"></i> <strong>Блог</strong> <small>все, о чем я думаю</small> </a> <ul> <li><a href="#"><i class="fa fa-globe"></i>Новости</a></li> <li> <a href="#"><i class="fa fa-group"></i>Наша команда</a> <ul> <li> <a href="#"><i class="fa fa-male"></i>Сергей Бондарь</a> <ul> <li><a href="#"><i class="fa fa-leaf"></i>Проекти</a></li> <li><a href="#"><i class="fa fa-tasks"></i>Контакты</a></li> </ul> </li> <li> <a href="#"><i class="fa fa-male"></i>Глеб Кавраский</a> <ul> <li><a href="#"><i class="fa fa-leaf"></i>Контакты</a></li> <li><a href="#"><i class="fa fa-tasks"></i>Работы</a></li> </ul> </li> <li><a href="#"><i class="fa fa-male"></i>Давид Барто</a> <ul> <li><a href="#"><i class="fa fa-leaf"></i>Реклама</a></li> </ul> </ul> </li> <li><a href="#"><i class="fa fa-trophy"></i>Награды</a></li> <li><a href="#"><i class="fa fa-certificate"></i>Контракты</a></li> </ul> </li> <li> <a href=""> <i class="fa fa-picture-o"></i> <strong>Портфолио</strong> <small>мои работы</small> </a> </li> <li> <a href=""> <i class="fa fa-envelope-o"></i> <strong>Контакты</strong> <small>оставайся с нами на связи</small> </a> </li> <li class="float"> <a class="search"> <input type="text" value="поиск ..."> <button><i class="fa fa-search"></i></button> </a> <a href="" class="search-mobile"> <i class="fa fa-search"></i> </a> </li> </ul> </nav>


На этом установка шайтанама мЭню окончена:}
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://uguide.ru/
  • Всего комментариев: 1

k43
+1
k43 написал: Написано 20 Октября 2015 в 11:17
Комментарий №1
Шайтанама мЭню teehee

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    432
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: