Суббота, 23.11.2024, 11:05
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта
Статьи про uCoz
  • Антикварные магазины мебели становятся все более популярными в РФ
  • Ветеринары из Махачкалы отмечают рост заболеваний среди высокогорных овечек
  • В России возник дефицит терминалов сбора данных для складов
  • Продвижение с помощью «Site Ok‎»: Пакеты крауд-ссылок и их ценовая политика
  • В России стали популярными диджитал маркетологи
  • Флоат камера избавила москвичку от тревожности
  • Почему для каждого бренда важна красочная упаковка
  • Почему в ж/д сфере так важна нумерация опор
  • В Москве ветеринарам стали чаще приносить карликовых коз
  • Почему детей нужно перевозить на специальных автокреслах
  • Разработка сайта
  • Что влияет на стоимость сайта?
  • Как самостоятельно создать блог без усилий
  • Как добавить карту сайта в Wordpress
  • В чем заключается SEO-продвижение сайта?
  • Продвижение ссылками – будет ли работать в 2015 году?
  • Программы обработки, сравнения и анализа прайсов
  • Комплексное продвижение сайта как основа репутационного маркетинга
  • У кого заказывать разработку сайта
  • Как создать интернет-магазин?
  • Наш опрос
    Пользуетесь ли вы Поиском?


    Всего ответов: 1423

    установить такой вид опроса
    Статистика
    Яндекс.Метрика
    Онлайн всего: 9
    Гостей: 9
    Пользователей: 0


    Зарегистрировано 31229 (сегодня + 0 новых, вчера + 0 новых), В каталоге файлов 1130 материала(ов), Оставлено 5178 комментариев, На форуме создано тем и ответов.

    установить такую статистику

    Блок CW результаты

    Победы
    Победы(10)

    Поражения
    Поражения(5)


    Установить CW блок на свой сайт
    Внимание!
    Наш сайт адаптирован под браузер Mozilla Firefox
    скрипты для uCoz
    Скачать/Download
    В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

    установить такой блок
    Расскажи Друзьям!
    Комментарии
    Новость: Просмотры и посетители для вашего сайта БЕСПЛАТНО
    написал:
    В итоге получим в статистике целую кучу ботов, и отказов. Что само собой скажется на ПС
    Новость: Фотогалерея изображений для uCoz
    Sultanbek Ajdos написал:
    Не убрать календарики правильно
    Понедельник, 22 ноября 2010 г.
    Карманный календарь 2010 г.

    Читать все комментарии
    Топ комментаторов

    установить такой информер
    VKONTAKTE

    FACEBOOK
    Главная страница » Помощь Вебмастеру » Категория Меню для uCoz сайта » Добавлено [06.12.2013, 02:56]

    Горизонтальное выпадающее меню для uCoz

    Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

    Для любителей светлых тонов и стильных дизайнов мы нашли, и спешим представить новинку от Ucoz - привлекательное и очень,  по хай-тековски, современное выпадающее меню.  Написано на чистейшем CSS3, оно такое чистое, что не удивлюсь, если разработчик прежде чем писать трижды помыл руки.

    Ну а кроме шуток, очень даже не плохое горизонтально ориентированное меню для сайта. Я вот на пару своих такое поставлю. Так же имеет приятную систему анимации и меню - все просто, стильно и без лишних наворотив. Подойдет для сайтов почти что любой современной деловой тематики. Клиенты обычно ценят простую навигацию и хороший дизайнерский подход к оформлению сайтов. Кто не знал - записывайте, а мы на этом собаку съели. Плагин подразумевает два типа меню - первое, как мы уже говорили, выпадающее. Легко и непринужденно, при наведении мыши выпадают подпункты меню и так же легко сворачивается. Очень чувствительная система к наведению мыши - все без рывков и бросков. А  менюшка первого типа - элементы меню плавно прокручиваются и подсвечиваются не яркими цветами. Вообще пробовать и оставлять комментарии.

    Установка:

    В самый низ вашего css вставляйте:

    .ph-lift1 ul, .ph-lift1 li {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    list-style: none;
    }
    .ph-lift1 {
    min-width: 800px;
    }
    .ph-lift1 ul {
    position: relative;
    }
    .ph-lift1 > ul:after {
    content:"";
    position: absolute;
    width: 50%;
    border-radius: 40%;
    height: 40px;
    bottom: 0;
    left: 20%;
    box-shadow: 0 0 10px rgba(28, 110, 126, 0.5);
    z-index: -1;
    }
    .ph-lift1 > ul:hover:after {
    bottom: 5px;
    }
    nav.ph-lift1 {
    text-align: center;
    }
    nav.ph-lift1 ul {
    display: inline-block;
    }
    nav.ph-lift1 ul:after {
    box-shadow: 0 0 10px rgba(85, 107, 47, 0.5);
    }
    nav.ph-lift1 > ul > li {
    float: left;
    }
    nav.ph-lift1 ul li {
    height: 80px;
    line-height: 80px;
    background: white;
    -webkit-transition: all.6s ease;
    -moz-transition: all.6s ease;
    -o-transition: all.6s ease;
    -ms-transition: all.6s ease;
    transition: all.6s ease;
    }
    nav.ph-lift1 ul li ul {
    max-height: 0;
    -webkit-transition: all.6s ease;
    -moz-transition: all.6s ease;
    overflow: hidden;
    display: block;
    }
    nav.ph-lift1 ul li:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
    background: darkolivegreen;
    }
    nav.ph-lift1 ul li:hover ul {
    max-height: 300px;
    }
    nav.ph-lift1 ul li a {
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: #546a2f;
    height: 80px;
    }
    nav.ph-lift1 ul li ul li a {
    color: #7e7e00;
    }
    nav.ph-lift1 ul li ul li:hover {
    background: olive;
    }
    nav.ph-lift1 ul li a span {
    -webkit-transition: all.6s ease;
    -moz-transition: all.6s ease;
    -o-transition: all.6s ease;
    -ms-transition: all.6s ease;
    transition: all.6s ease;
    display: block;
    padding: 0 40px;
    }
    nav.ph-lift1 ul li:hover > a span {
    margin-top: -80px;
    color: white;
    text-shadow: 0 1px 2px black;
    }
    nav.ph-lift1 ul li a span:after {
    content: attr(data-title);
    display: block;
    }

    Следующий код в то место, где будет само меню:
    <nav class="ph-lift1">
    <ul>
    <li class="active">
    <a href="#home" data-title="Главная">
    <span data-title="Главная">Главная</span>
    </a>
    <ul>
    <li>
    <a href="#">
    <span data-title="Новости">Новости</span>
    </a>

    </li>
    <li>
    <a href="#">
    <span data-title="Top 10">Top 10</span>
    </a>
    </li>
    </ul>
    </li>
    <li>
    <a href="#portfolio">
    <span data-title="Портфолио">Портфолио</span>
    </a>
    <ul>
    <li>
    <a href="#">
    <span data-title="Веб-дизайн">Веб-дизайн</span>
    </a>
    </li>
    <li>
    <a href="#">
    <span data-title="Макеты">Макеты</span>
    </a>
    </li>
    <li>
    <a href="#">
    <span data-title="Фоны">Фоны</span>
    </a>
    </li>
    </ul>
    </li>
    <li>
    <a href="#">
    <span data-title="Обо мне">Обо мне</span>
    </a>
    </li>
    <li>
    <a href="#">
    <span data-title="Контакты">Контакты</span>
    </a>
    <ul>
    <li>
    <a href="#">
    <span data-title="Email">Email</span>
    </a>
    </li>
    <li>
    <a href="#about">
    <span data-title="Адрес">Адрес</span>
    </a>
    </li>
    </ul>
    </li>
    <ul>
    </nav>


    При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Горизонтальное выпадающее меню для uCoz



    Расскажи друзьям интересные новости:


    - Установить на свой сайт блок социальных закладок
    Категория: Меню для uCoz сайта | Добавил: scripts_for_ucoz | Теги: Горизонтальное, uCoz, меню, выпадающее
    Просмотров: 5456 | Загрузок: 0 | Комментарии: 2 | Рейтинг: 0.0/0
    Всего комментариев: 2
    2 Admin3411   (04.03.2015 11:45) [Материал]
    Меню выводится точно посередине.
    Просьба подсказать как его позиционировать слева ?

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Для добавления необходима авторизация

    По вопросам сотрудничества и рекламы пишите на почту rusalex11@live.com Хостинг от uCoz