Меню вертикальное разноцветное | Скрипт для сайта uCoz - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Вертикальное меню для сайта uCoz » Меню вертикальное разноцветное | Скрипт для сайта uCoz

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Меню вертикальное разноцветное | Скрипт для сайта uCoz


Меню вертикальное разноцветное на CSS3




Меню лёгкое и не будет нагружать страницы Вашего сайта.Для установки на страницу просто отредактируйте содержимое названий и ссылок.Можно устанавливать весь код в Верхней части сайта.Если Вам не понятна работа тегов или свойств,воспользуйтесь поиском сайта.Основные свойства в примере кода выделены ссылками,посмотрите материал чтобы быть в курсе.Проверьте код вставив его в HTML редактор который находится в нижней части страницы.




Пример кода меню


<style>
.menuHolder2 {position: relative; margin-left:10px; float:left; overflow:hidden; width:150px; height:400px; font:normal bold 11px/35px verdana, sans-serif;}
.menuHolder2 .shadow {width:10px; height:90%; top:5%; left:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
ul.menu2 {margin:0 0 0 1px; list-style: none; display:block; width: 150px; position:relative; padding:60px 0;}
ul.menu2 li {margin:5px 0 0 0;}
ul.menu2 li a {background:#aaa; color:#ddd; padding:0 15px; width:90px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul.menu2 li a.red {background:#a00;}
ul.menu2 li a.orange {background:#da0;}
ul.menu2 li a.yellow {background:#aa0;}
ul.menu2 li a.green {background:#060;}
ul.menu2 li a.blue {background:#00a;}
ul.menu2 li a.indigo {background:#2b0062;}
ul.menu2 li a.violet {background:#682bc2;}
ul.menu2 li a:hover {background:#aaa; color:#fff; padding:0 15px 0 40px;}
ul.menu2 li a.red:hover {background:#c00;}
ul.menu2 li a.orange:hover {background:#fc0;}
ul.menu2 li a.yellow:hover {background:#cc0;}
ul.menu2 li a.green:hover {background:#080;}
ul.menu2 li a.blue:hover {background:#00c;}
ul.menu2 li a.indigo:hover {background:#5b1092;}
ul.menu2 li a.violet:hover {background:#8a2be2;}
</style>
<div class="menuHolder2">
<ul class="menu2">
<li><a href="#url" class="red">М Е Н Ю 1</a></li>
<li><a href="#url" class="orange">М Е Н Ю 2</a></li>
<li><a href="#url" class="yellow">М Е Н Ю 3</a></li>
<li><a href="#url" class="green">М Е Н Ю 4</a></li>
<li><a href="#url" class="blue">М Е Н Ю 5</a></li>
<li><a href="#url" class="indigo">М Е Н Ю 6</a></li>
<li><a href="#url" class="violet">М Е Н Ю 7</a></li>
</ul>
<div class="shadow"></div>
</div>

Проверить код меню на месте

Вставьте код меню в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 2941 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: меню для юкоз, меню с двигающимися кнопками

    Всего комментариев: 13
    0   Спам
    13 IZOTOP   (24.09.2013 20:23)
    Аватар IZOTOP Ваш код не работоспособный, возьмите из примера.
    Устанавливать такое меню можно в любом месте поддерживающем HTML, то есть редактор добавления нового материала должен находиться в режиме "Панель HTML кодов" такая надпись есть в верхней части редактора страницы добавления нового материала, нажмите на неё перед добавлением.

    0   Спам
    11 moty   (30.05.2013 17:39)
    Аватар moty еще вот какая проблема http://clip2net.com/s/59aplJ
    как уменьшить расстояние между словами

    0   Спам
    12 IZOTOP   (30.05.2013 21:27)
    Аватар IZOTOP Меню не расщитано на установку с правой стороны, увеличение в ширину при наведении происходит естественно, без воздействия определённых значений.
    Другими словами чтобы оно так же работало на правой стороне его нужно полностью переделать.
    По поводу расстояния между словами, это действие переноса строки.
    Т.е оно не укладывается в установленную ширину и автоматом переносится, чтобы всё поместилось можно только увеличить ширину меню.
    Вот я в стилях изменил в 3 местах на 30, там вписаны комментарии:

    Код

    <style>
    .menuHolder2 {
    position: relative;  
    margin-left:0;  
    float:left;  
    overflow:hidden;  
    width:180px;/* - Добавление ширины -*/
    height:400px;  
    font:normal bold 11px/35px verdana, sans-serif;
    }
    .menuHolder2 .shadow {
    width:10px;  
    height:90%;  
    top:5%;  
    left:-9px;  
    position:absolute;  
    z-index:100;  
    background:#888;
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
    -o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
    }
    ul.menu2 {
    margin:0 0 0 1px;  
    list-style: none;  
    display:block;  
    width: 180px;/* - Добавление ширины -*/  
    position:relative;  
    padding:60px 0;
    }
    ul.menu2 li {margin:5px 0 0 0;}
    ul.menu2 li a {
    background:#aaa;  
    color:#ddd;  
    padding:0 15px;  
    width:120px;/* - Добавление ширины -*/  
    display:block;  
    text-decoration:none;
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius:0 10px 10px 0;
    -o-border-radius:0 10px 10px 0;
    border-radius:0 10px 10px 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
    ul.menu2 li a.red {background:#a00;}
    ul.menu2 li a.orange {background:#da0;}
    ul.menu2 li a.yellow {background:#aa0;}
    ul.menu2 li a.green {background:#060;}
    ul.menu2 li a.blue {background:#00a;}
    ul.menu2 li a.indigo {background:#2b0062;}
    ul.menu2 li a.violet {background:#682bc2;}
    ul.menu2 li a:hover {background:#aaa; color:#fff; padding:0 15px 0 40px;}
    ul.menu2 li a.red:hover {background:#c00;}
    ul.menu2 li a.orange:hover {background:#fc0;}
    ul.menu2 li a.yellow:hover {background:#cc0;}
    ul.menu2 li a.green:hover {background:#080;}
    ul.menu2 li a.blue:hover {background:#00c;}
    ul.menu2 li a.indigo:hover {background:#5b1092;}
    ul.menu2 li a.violet:hover {background:#8a2be2;}
    </style>


    Во всех 3 местах нужно увеличивать на одинаковое число.

    0   Спам
    10 moty   (30.05.2013 16:14)
    Аватар moty Здрасти есть такой вопрос а как поменять положение меню чтобы оно смотрело влево а не как сейчас в право

    0   Спам
    8 babusia4618   (15.01.2013 11:13)
    Аватар babusia4618 нет, всё отлично спасибо огромное!
    будет времечко посмотри что получилось
    http://текстиль-продукт.рф/

    0   Спам
    9 IZOTOP   (15.01.2013 14:13)
    Аватар IZOTOP Посмотрел,вот что значит видеть цель и добиваться её!
    Поздравляю!!!
    Получилось неплохо,http://текстиль-продукт.рф/index/0-2.
    Желаю удачи,Вам нужно создать свои группы в соцсетях для привлечения потенциальных клиентов (это совет)

    0   Спам
    6 babusia4618   (14.01.2013 13:06)
    Аватар babusia4618 Спасибо уже исправила!
    .dszoomimg {
    display:table;
    margin:0 auto;
    padding:0px; нужно было убрать 20, наверное из за переделки меню так получилось!

    0   Спам
    7 IZOTOP   (14.01.2013 20:06)
    Аватар IZOTOP Привет!
    Ну что,проблемы остаются?

    0   Спам
    5 babusia4618   (14.01.2013 13:00)
    Аватар babusia4618 ТОлько теперь что то с картинками произошло при наведении для увеличения прыгают вниз может большой размер меню ??незнамо!

    0   Спам
    4 babusia4618   (14.01.2013 12:58)
    Аватар babusia4618 Большое при большое спасибо!! Получилось!!! tongue tongue tongue

    0   Спам
    3 babusia   (22.12.2012 15:31)
    Аватар babusia если я убираю точку перед .menuHolder2 то оно работает если нет соответственно нет!
    ну а .shadow и с точкой и без не работает!
    Ну я так понимаю не воспринимается точка, http://текстиль-продукт.рф/
    если есть возможность посмотреть (исследовать элемент через правую кнопку мышки) будет понятно что точка стоит, но она не воспринимается может есть другой код так как всё прогуглила и ни чего подходящева не нашла.

    0   Спам
    1 babusia   (19.12.2012 12:40)
    Аватар babusia .menuHolder2 .shadow не работает как ещё можно сделать помогите пожалуйста, убрала точку перед menu заработало но вот . shadow ни как не воспринимает wacko wacko wacko

    0   Спам
    2 IZOTOP   (20.12.2012 21:25)
    Аватар IZOTOP Привет!
    Прошу прощения,мне не совсем понятен вопрос по поводу не работоспособности классов .menuHolder2 .shadow
    При каких условиях они теряют работоспособность?
    Только более объективное описание проблемы позволит её решить.


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