Меню сайта
Категории раздела
| Скрипты для uCoz [582] |
| HTML коды для uCoz [58] |
| Шаблоны для uCoz [189] |
| Социальные сети и закладки [4] |
| Меню для uCoz сайта [30] |
| Опросы на uCoz [6] |
| Работа с Информерами [7] |
| Для Веб мастера [90] |
| CSS стили для uCoz [15] |
| Как это сделать? (для новичков с картинками) [11] |
| Видео Уроки по uCoz [2] |
| Полезное для пользователей [45] |
| Counter Strike мониторинг [5] |
| Регистрация и прикрепление своего домена к uCoz [1] |
| Новости сайта scripts-for-ucoz [47] |
| Учебник HTML [11] |
| Разное/Другое [12] |
Статьи про uCoz
Рекламко
Наш опрос
Статистика
Онлайн всего: 9
Гостей: 9
Пользователей: 0
Зарегистрировано 31229 (сегодня + 0 новых, вчера + 0 новых), В каталоге файлов 1130 материала(ов), Оставлено 5178 комментариев, На форуме создано тем и ответов.
установить такую статистику
Блок Программ
Установить себе такой Блок
Скрипты и HTML для uCOz
Блок CW результаты
Скачать Броузеры
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)
установить такой блок
Поиск
Рекламко
http://Dat-Games.ucoz.net
Добавить свой сайт в ТОП!
И он будет рекламироваться тут БЕСПЛАТНО!
стань модератором сайта и рекламируй свой сайт за бесплатно тут
Расскажи Друзьям!
Комментарии
Новость: Просмотры и посетители для вашего сайта БЕСПЛАТНО
написал:
написал:
В итоге получим в статистике целую кучу ботов, и отказов. Что само собой скажется на ПС
Новость: Фотогалерея изображений для uCoz
Sultanbek Ajdos написал:
Sultanbek Ajdos написал:
Не убрать календарики правильно
Понедельник, 22 ноября 2010 г.
Карманный календарь 2010 г.
Понедельник, 22 ноября 2010 г.
Карманный календарь 2010 г.
Читать все комментарии
Топ комментаторов
VKONTAKTE
FACEBOOK
Кто и Откуда Вы?
Мини-чат
| Главная страница » Помощь Вебмастеру » Категория Меню для uCoz сайта » Добавлено [04.11.2013, 20:45] |
Горизонтальное меню для uCOZ на CSS3
| Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!] | |||
Отличительной особенностью данного меню является многообразие выбора цветов. Такое меню с легкостью впишется в любой дизайн. Выглядит такое меню достаточно стильно стильно и элегантно. Стоит повторить, что данное меню для 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 Расскажи друзьям интересные новости: 
- Установить на свой сайт блок социальных закладок | |||
| Просмотров: 6459 | Загрузок: 0 | Комментарии: 4 | Рейтинг: 0.0/0 | |||
| Всего комментариев: 4 | ||
| ||
