Среда, 24.04.2024, 09:44
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта
Статьи про uCoz
  • Почему кофемашины часто покупают в офисы
  • Можно ли починить айфон при разбитом дисплее
  • Когда могут пригодиться рации
  • Заказать отзывы на АВИТО у компании Upgrating
  • Что чаще всего рекламируют на билбордах в Санкт-Петербурге
  • Преимущества взрывозащитных тепловентиляторов
  • Интересные факты о майнинге криптовалют
  • Как производится регистрация прав интеллектуальной собственности
  • 5 типичных неисправностей ноутбуков
  • Многофакторная аутентификация как сервис
  • Разработка сайта
  • Что влияет на стоимость сайта?
  • Как самостоятельно создать блог без усилий
  • Как добавить карту сайта в Wordpress
  • В чем заключается SEO-продвижение сайта?
  • Продвижение ссылками – будет ли работать в 2015 году?
  • Программы обработки, сравнения и анализа прайсов
  • Комплексное продвижение сайта как основа репутационного маркетинга
  • У кого заказывать разработку сайта
  • Как создать интернет-магазин?
  • Наш опрос
    Лайкнули наши группы в соц-ых сетях?


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

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


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

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

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

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

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


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

    установить такой блок
    Расскажи Друзьям!
    Комментарии
    Новость: Простое серое меню для uCoz
    NataliShaman написал:
    Приветствую!
    кнопочки мне понравились... только совсем не понимаю - куда именно конкретно вставлять? в какое место в CSS? на каждой странице это делать или один раз установится для всего сайта? у меня шаблон 1088... помогите с установкой, пожалуйста...
    Новость: Простой слайдер новостей и фото изображений на uCoz
    Светлана Кулешова написал:
    Скажите, пожалуйста, а где прикрепленный архив со скриптами?
    Новость: Современные казино онлайн. Как можно выигрывать деньги?
    папап папап написал:
    зарабатывать в интернете может каждый, хочу порекомендовать статью где Вы научитесь это делать играя в казино , заходи смотри http://podshipnik-servis.ru/forum/pyat-prichin-zachem-nuzhno-poprobovat-onlayn-kazino
    Новость: Максимальные выигрыши в казино
    Максим Леонков написал:
    Добрый день, хочу поделиться информацией которая мне помогла зарабатывать в онлайн казино.http://www.rpgarea.ru/news-2890-kakie-bonusi-onlayn-kazino-bivayut-i-gde-ih-nayti.html Например какие какие бонусы онлайн казино бывают и где их найти? где найти казино с лучшими бонусами, Виды бонусов в онлайн казино, какие подарки в клубах бывают для новичков – выдают за регистрацию и активных посетителей – различные акции и пр.Заходи, читай,зарабатывай!

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

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

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

    Блок меню с выпадающими ссылками для uCoz

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

    Как всегда, новыми интересными скриптами для uCoz нас радует веб-мастер Apocalypse и на этот раз он смог модифицировать код под систему uCoz. Код симпатичной кнопки меню, при нажатии на которую выпадают красивые ссылки. Весь CSS к этому выпадающему списку из блока меню прописан отдельно в своём файле. Не забудьте, что для идеальной работы этого скрипта требуется jQuery 1.7.2 или выше, который можно установить в общих настройках в админ панели вашего сайта укоз. Но если всё работает отлично, то и не парьтесь с этим - значит всё уже установлено как надо у вас, но в редких случаях нужно будет изменить в общих настроек версию jQuery.


    Залогиньтесь на наш сайт, чтобы вы могли загрузить прикреплённый архив со стилями, который необходимо загрузить в папку css.

    Установка:

    Сначала подключим css стиль, отвечающий за прорисовку иконок на css3

    На нужных страницах после < /head > вставляйте:
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.css" />


    В самый низ вашего css вставляйте:
    *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    }
    .wrapper-dropdown-3 {
    /* Size and position */
    position: relative;
    width: 200px;
    padding: 10px;
    /* Styles */
    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
    cursor: pointer;
    outline: none;
    /* Font settings */
    font-weight: bold;
    color: #8AA8BD;
    }
    .wrapper-dropdown-3:after {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
    }
    .wrapper-dropdown-3 .dropdown {
    /* Size & position */
    position: absolute;
    top: 140%;
    left: 0;
    right: 0;
    /* Styles */
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0, 0, 0, 0.17);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    font-weight: normal;
    transition: all 0.5s ease-in;
    list-style: none;
    /* Hiding */
    opacity: 0;
    pointer-events: none;
    }
    .wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #8aa8bd;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.3s ease-out;
    }
    .wrapper-dropdown-3 .dropdown li i {
    float: right;
    color: inherit;
    }
    .wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
    }
    .wrapper-dropdown-3 .dropdown li:last-of-type a {
    border-radius: 0 0 7px 7px;
    border: none;
    }
    /* Hover state */
    .wrapper-dropdown-3 .dropdown li:hover a {
    background: #f3f8f8;
    }
    .wrapper-dropdown-3 .dropdown:after {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;
    }
    .wrapper-dropdown-3 .dropdown:before {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.1) transparent;
    }
    .wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
    }


    Следующий код в то место, где должен быть выпадающий список:
    <div id="dd" class="wrapper-dropdown-3" tabindex="1"> <span>Переслать</span>
    <ul class="dropdown">
    <li><a href="#"><i class="icon-envelope icon-large"></i>Почтой</a></li>
    <li><a href="#"><i class="icon-truck icon-large"></i>В грузовике</a></li>
    <li><a href="#"><i class="icon-plane icon-large"></i>На специально обученных дятлах - курьерах</a></li>
    </ul>
    </div>


    Следующий код в самый низ после закрывающего тега < /body >:
    <script>
    function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
    }
    DropDown.prototype = {
    initEvents: function () {
    var obj = this;

    obj.dd.on('click', function (event) {
    $(this).toggleClass('active');
    return false;
    });

    obj.opts.on('click', function () {
    var opt = $(this);
    obj.val = opt.text();
    obj.index = opt.index();
    obj.placeholder.text(obj.val);
    });
    },
    getValue: function () {
    return this.val;
    },
    getIndex: function () {
    return this.index;
    }
    }

    $(function () {
    var dd = new DropDown($('#dd'));
    $(document).click(function () {
    // all dropdowns
    $('.wrapper-dropdown-3').removeClass('active');
    });
    });
    <script>



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



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


    - Установить на свой сайт блок социальных закладок
    Категория: Меню для uCoz сайта | Добавил: scripts_for_ucoz | Теги: Выпадающее меню, Меню для ucoz, блок, выпадающие ссылки, меню
    Просмотров: 6887 | Загрузок: 50 | Комментарии: 3 | Рейтинг: 0.0/0
    Всего комментариев: 3
    3 RSO   (02.07.2014 15:49) [Материал]
    smile

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

    Хостинг от uCoz