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


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

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


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

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

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

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

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


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

    установить такой блок
    Расскажи Друзьям!
    Комментарии
    Новость: Фотогалерея изображений для uCoz
    Sultanbek Ajdos написал:
    Не убрать календарики правильно
    Понедельник, 22 ноября 2010 г.
    Карманный календарь 2010 г.
    Новость: Марш Материнского Гнева. Московские начинания дошли и до Питера
    Ammi Jack написал:
    Microsoft Excel Crack is component of Microsoft software which provide different type of software which helping them to students and consumers of office projects. It is alternative which offers particular features to generate projects, directories, references https://freeprosoftz.com/microsoft-excel-crack-download/

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

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

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

    Горизонтальное меню для uCOZ на CSS3

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

    Красивое разноцветное горизонтальное меню. Главная особенность меню состоит в том, что выпадающие блоки могут изменять цвет под настроение пользователя вашего сайта на тот, по какому из цветных квадратиков вы щелкните мышкой. При этом смена цвета реализована на CSS, а не на javascript, что облегчает работу вашего сайта.

    • Тесты и обзоры телефонов, прошивка телефонов, ремонт смартфонов и телефонов своими руками - всё это вы найдёте на сайте http://nokiaweb.ru/.

    Отличительной особенностью данного меню является многообразие выбора цветов. Такое меню с легкостью впишется в любой дизайн. Выглядит такое меню достаточно стильно стильно и элегантно.

    Стоит повторить, что данное меню для uCOZ является горизонтальным, а значит не занимает много места на сайте и смотрится более современно нежели вертикальное меню.
    Меню будет прекрасно смотреться на сайтах с большим количеством категории ( например на новостных или музыкальных порталах)
       

    Установка:

    Шаг-1 Установка CSS

    Заходим в П.У - Дизайн - Упр. Дизайном(CSS) и вставляем в самый низ: 
    Код
    #nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { background-color: #000000; border-radius: 5px 5px 5px 5px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); display: table; padding: 10px; position: relative; } #nav ul { background-color: red; border:1px solid red; border-radius: 0 5px 5px 5px; border-width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); left: -9999px; overflow: hidden; padding: 20px 0 10px; position: absolute; top: -9999px; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear; } #nav li { float: left; position: relative; } #nav li a { color: #FFFFFF; display: block; font-size: 16px; padding: 7px 20px; text-decoration: none; } #nav li:hover > a { background-color: red; border-radius: 5px 5px 5px 5px; color: #FFFFFF; } #nav li:hover > a.hsubs { border-radius: 5px 5px 0 0; } #nav li:hover ul.subs { left: 0; top: 34px; width: 180px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); -webkit-transform: scaleY(1); } #nav ul li { width: 100%; } #nav ul li:hover > a { background-color: #222222 !important; border-radius: 5px 5px 5px 5px; } /* colors */ .colorScheme { height: 32px; list-style: none outside none; margin: 0 auto 25px; width: 320px; } .colorScheme a { cursor: pointer; float: left; height: 30px; margin: 0 5px; width: 30px; } .colorScheme .red { background-color: red; } .colorScheme .orange { background-color: orange; } .colorScheme .pink { background-color: pink; } .colorScheme .green { background-color: green; } .colorScheme .blue { background-color: blue; } .colorScheme .indigo { background-color: indigo; } .colorScheme .violet { background-color: violet; } .colorScheme .grey { background-color: grey; } #red:target ~ #nav ul { background-color: red; border: 1px solid red; } #orange:target ~ #nav ul { background-color: orange; border: 1px solid orange; } #pink:target ~ #nav ul { background-color: pink; border: 1px solid pink; } #green:target ~ #nav ul { background-color: green; border: 1px solid green; } #blue:target ~ #nav ul { background-color: blue; border: 1px solid blue; } #indigo:target ~ #nav ul { background-color: indigo; border: 1px solid indigo; } #violet:target ~ #nav ul { background-color: violet; border: 1px solid violet; } #grey:target ~ #nav ul { background-color: grey; border: 1px solid grey; } #red:target ~ #nav li:hover > a { background-color: red; } #orange:target ~ #nav li:hover > a { background-color: orange; } #pink:target ~ #nav li:hover > a { background-color: pink; } #green:target ~ #nav li:hover > a { background-color: green; } #blue:target ~ #nav li:hover > a { background-color: blue; } #indigo:target ~ #nav li:hover > a { background-color: indigo; } #violet:target ~ #nav li:hover > a { background-color: violet; } #grey:target ~ #nav li:hover > a { background-color: grey; }

    Шаг-2 Установка HTML
    Вставляем код горизонтального меню в нужное место на сайте, обычно это верхний блок сайта.
    Код
    <div class="container">  
    <span id="red"></span>  
    <span id="orange"></span>  
    <span id="pink"></span>  
    <span id="green"></span>  
    <span id="blue"></span>  
    <span id="indigo"></span>  
    <span id="violet"></span>  
    <span id="grey"></span>  
    <div class="colorScheme">  
    <a href="#red" class="red"></a>  
    <a href="#orange" class="orange"></a>  
    <a href="#pink" class="pink"></a>  
    <a href="#green" class="green"></a>  
    <a href="#blue" class="blue"></a>  
    <a href="#indigo" class="indigo"></a>  
    <a href="#violet" class="violet"></a>  
    <a href="#grey" class="grey"></a>  
    </div> <ul id="nav">  
      <li><a href="http://webuilder.info">Главная</a></li>  
    <li><a class="hsubs" href="#">Меню 1</a>  
    <ul class="subs">  
    <li><a href="#">Подменю 1</a></li>  
    <li><a href="#">Подменю 2</a></li>  
    <li><a href="#">Подменю 3</a></li>  
    <li><a href="#">Подменю 4</a></li>  
    <li><a href="#">Подменю 5</a></li>  
    </ul>  
    </li>  
    <li><a class="hsubs" href="#">Меню 2</a>  
    <ul class="subs">  
    <li><a href="#">Подменю 2-1</a></li>  
    <li><a href="#">Подменю 2-2</a></li>  
    <li><a href="#">Подменю 2-3</a></li>  
    <li><a href="#">Подменю 2-4</a></li>  
    <li><a href="#">Подменю 2-5</a></li>  
    <li><a href="#">Подменю 2-6</a></li>  
    <li><a href="#">Подменю 2-7</a></li>  
    <li><a href="#">Подменю 2-8</a></li>  
    </ul>  
    </li>  
    <li><a class="hsubs" href="#">Меню 3</a>  
    <ul class="subs">  
    <li><a href="#">Подменю 3-1</a></li>  
    <li><a href="#">Подменю 3-2</a></li>  
    <li><a href="#">Подменю 3-3</a></li>  
    <li><a href="#">Подменю 3-4</a></li>  
    <li><a href="#">Подменю 3-5</a></li>  
    </ul>  
    </li>  
    <li><a href="#">Меню 4</a></li>  
    <li><a href="#">Меню 5</a></li>  
    <li><a href="#">Меню 6</a></li>  
    </ul>  
    </div>

    Готово!


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



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


    - Установить на свой сайт блок социальных закладок
    Категория: Меню для uCoz сайта | Добавил: BLoOd | Теги: Меню для сайта uCoz, разное, Веб мастеру
    Просмотров: 6454 | Загрузок: 0 | Комментарии: 4 | Рейтинг: 0.0/0
    Всего комментариев: 4
    4 faustdominik   (28.09.2014 16:59) [Материал]
    У меня из за твоего долбанного кода весь сайт слетел..

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

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