Меню в виде разноцветных шаров - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Пятница, 09.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



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



Меню в виде разноцветных шаров

Менюшка с разноцветными шариками




Меню состоит из разноцветных шаров при наведении мышки на которые под шарами появляется тень, рисунки отсутствуют, для всех эффектов применяются свойства CSS3.В принципе само меню предоставлено как шаблон для использования применяемого эффекта, тоесть Вы сами можете произвести изменения для нужных параметров.В местах предполагаемых изменений сделаны комментарии выделенные зелёным цветом, на сайте есть все необходимые инструменты для редактирования.Могут понадобиться следующие инструменты:

  • Генератор фона для элементов
  • Генератор теней для элементов
  • Таблица цветов
  • Если Вам не знакомо используемое для работы свойство, достаточно ввести его название в верхней части сайта, на сайте есть описание с примерами для всех свойств CSS3.Если появились предложения используйте форму "ВКонтакте", при существующих вопросах по материалу подробнее опишите в форме комментариев материала.





    Установите код меню там где хотите видеть меню


    <style>
    #blockelement {
    margin:0 auto;
    /* - Ширина блока под шар - */
    width: 120px;
    /* - Высота блока под шар - */
    height: 120px;
    z-index: 100;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    }
    #blockelement a {
    position: absolute;
    /* - Положение названия в ссылке от левой части шара - */
    left: 23px;
    /* - Положение названия в ссылке от верхней части шара - */
    top: 45px;
    z-index: 12;
    /* - Цвет текста в ссылке - */
    color:#fff;
    text-decoration:none;
    /* - Размер шрифта текста в ссылке - */
    font-size:26px;
    /* - Тип шрифта текста в ссылке - */
    font-famaly:Tahoma;
    }
    #sharred {
    /* - Ширина шара - */
    width: 120px;
    /* - Высота шара - */
    height: 120px;
    border-radius: 50%;
    /* - Градиенты фона шара - */
    background-image: linear-gradient(182deg, Red 0%, White 100%);
    -o-background-image: linear-gradient(182deg, Red 0%, White 100%);
    -ms-background-image: linear-gradient(182deg, Red 0%, White 100%);
    position: absolute;
    top: 0;
        z-index: 11;
    cursor: pointer;
    }
    #sharblack {
    /* - Ширина шара - */
    width: 120px;
    /* - Высота шара - */
    height: 120px;
    border-radius: 50%;
    /* - Градиенты фона шара - */
    background-image: linear-gradient(182deg, Black 0%, White 100%);
    -o-background-image: linear-gradient(182deg, Black 0%, White 100%);
    -ms-background-image: linear-gradient(182deg, Black 0%, White 100%);
    position: absolute;
    top: 0;
    z-index: 11;
    cursor: pointer;
    }
    #sharblue {
    /* - Ширина шара - */
    width: 120px;
    /* - Высота шара - */
    height: 120px;
    border-radius: 50%;
    /* - Градиенты фона шара - */
    background-image: linear-gradient(182deg, blue 0%, White 100%);
    -o-background-image: linear-gradient(182deg, blue 0%, White 100%);
    -ms-background-image: linear-gradient(182deg, blue 0%, White 100%);
    position: absolute;
    top: 0;
        z-index: 11;
    cursor: pointer;
    }
    #shargreen {
    /* - Ширина шара - */
    width: 120px;
    /* - Высота шара - */
    height: 120px;
    border-radius: 50%;
    /* - Градиенты фона шара - */
    background-image: linear-gradient(182deg, green 0%, White 100%);
    -o-background-image: linear-gradient(182deg, green 0%, White 100%);
    -ms-background-image: linear-gradient(182deg, green 0%, White 100%);
    position: absolute;
    top: 0;
        z-index: 11;
    cursor: pointer;
    }
    #sharPurple {
    /* - Ширина шара - */
    width: 120px;
    /* - Высота шара - */
    height: 120px;
    border-radius: 50%;
    /* - Градиенты фона шара - */
    background-image: linear-gradient(182deg, Purple 0%, White 100%);
    -o-background-image: linear-gradient(182deg, Purple 0%, White 100%);
    -ms-background-image: linear-gradient(182deg, Purple 0%, White 100%);
    position: absolute;
    top: 0;
    z-index: 11;
    cursor: pointer;
    }
    /* - Начало вставки в шаре (можно убрать) - */
    #sharred::after,
    #sharblack::after,
    #sharblue::after,
    #shargreen::after,
    #sharyellow::after {
    content: "";
    width: 80px;
    height: 40px;
    position: absolute;
    left: 20px;
    top: 10px;
    background: rgba(255, 255, 255, .3);
    z-index: 10;
    border-radius: 40px / 20px;
    }
    /* - Конец вставки в шаре (можно убрать) - */
    #blockelement:hover ~ #elementfonred {
    margin:0 auto;
    width: 60px;
    height: 15px;
    /* - Общий фон тени - */
    background: rgba(255, 0, 0, .1);
    /* - Тень со свойствами - */
    box-shadow: 0px 0 20px 35px rgba(255,0,0,.1);
    -o-box-shadow: 0px 0 20px 35px rgba(255,0,0,.1);
    -ms-box-shadow: 0px 0 20px 35px rgba(255,0,0,.1);
    border-radius: 30px / 40px;-o-border-radius: 30px / 40px;
    -ms-border-radius: 30px / 40px;
        -webkit-transform: scaleY(.3);
    -moz-transform: scaleY(.3);
    -ms-transform: scaleY(.3);
    -o-transform: scaleY(.3);
    transform: scaleY(.3);
    }
    #blockelement:hover ~ #elementfonblack {
    margin:0 auto;
    width: 60px;
    height: 15px;
    /* - Общий фон тени - */
    background: rgba(0, 0, 0, .1);
    /* - Тень со свойствами - */
    box-shadow: 0px 0 20px 35px rgba(0,0,0,.1);
    -o-box-shadow: 0px 0 20px 35px rgba(0,0,0,.1);
    -ms-box-shadow: 0px 0 20px 35px rgba(0,0,0,.1);
    border-radius: 30px / 40px;
    -o-border-radius: 30px / 40px;
    -ms-border-radius: 30px / 40px;
        -webkit-transform: scaleY(.3);
    -moz-transform: scaleY(.3);
    -ms-transform: scaleY(.3);
    -o-transform: scaleY(.3);
    transform: scaleY(.3);
    }
    #blockelement:hover ~ #elementfonblue {
    margin:0 auto;
    width: 60px;
    height: 15px;
    /* - Общий фон тени - */
    background: rgba(0, 0, 255, .1);
    /* - Тень со свойствами - */
    box-shadow: 0px 0 20px 35px rgba(0,0,255,.1);
    -o-box-shadow: 0px 0 20px 35px rgba(0,0,255,.1);
    -ms-box-shadow: 0px 0 20px 35px rgba(0,0,255,.1);
    border-radius: 30px / 40px;
    -o-border-radius: 30px / 40px;
    -ms-border-radius: 30px / 40px;
        -webkit-transform: scaleY(.3);
    -moz-transform: scaleY(.3);
    -ms-transform: scaleY(.3);
    -o-transform: scaleY(.3);
    transform: scaleY(.3);
    }
    #blockelement:hover ~ #elementfongreen {
    margin:0 auto;
    width: 60px;
    height: 15px;
    /* - Общий фон тени - */
    background: rgba(0, 255, 0, .1);
    /* - Тень со свойствами - */
    box-shadow: 0px 0 20px 35px rgba(0,255,0,.1);
    -o-box-shadow: 0px 0 20px 35px rgba(0,255,0,.1);
    -ms-box-shadow: 0px 0 20px 35px rgba(0,255,0,.1);
    border-radius: 30px / 40px;
    -o-border-radius: 30px / 40px;
    -ms-border-radius: 30px / 40px;
        -webkit-transform: scaleY(.3);
    -moz-transform: scaleY(.3);
    -ms-transform: scaleY(.3);
    -o-transform: scaleY(.3);
    transform: scaleY(.3);
    }
    #blockelement:hover ~ #elementfonPurple {
    margin:0 auto;
    width: 60px;
    height: 15px;
    /* - Общий фон тени - */
    background: rgba(155,48,25, .1);
    /* - Тень со свойствами - */
    box-shadow: 0px 0 20px 35px rgba(155,48,25,.1);
    -o-box-shadow: 0px 0 20px 35px rgba(155,48,25,.1);
    -ms-box-shadow: 0px 0 20px 35px rgba(155,48,25,.1);
    border-radius: 30px / 40px;
    -o-border-radius: 30px / 40px;
    -ms-border-radius: 30px / 40px;
        -webkit-transform: scaleY(.3);
    -moz-transform: scaleY(.3);
    -ms-transform: scaleY(.3);
    -o-transform: scaleY(.3);
    transform: scaleY(.3);
    }
    .razmer {
    padding:auto 5px auto 5px;
    height:140px;
    }
    </style>
    <table border="0">
    <tr>
    <td class="razmer">
    <div id="blockelement">
    <div id="sharred"></div>
    <a href="">MENU</a>
                </div>
    <div id="elementfonred"></div>
    </td>
    <td class="razmer">
    <div id="blockelement">
    <div id="sharblack"></div>
    <a href="">MENU</a>
                </div>
    <div id="elementfonblack"></div>
    </td>
    <td class="razmer">
    <div id="blockelement">
    <div id="sharblue"></div>
    <a href="">MENU</a>
                </div>
    <div id="elementfonblue"></div>
    </td>
    <td class="razmer">
    <div id="blockelement">
    <div id="shargreen"></div>
    <a href="">MENU</a>
                </div>
    <div id="elementfongreen"></div>
    </td>
    <td class="razmer">
    <div id="blockelement">
    <div id="sharPurple"></div>
    <a href="">MENU</a>
                </div>
    <div id="elementfonPurple"></div>
    </td>
    </tr>
    </table>



    Меню в подключенном виде

    MENU           
    MENU           
    MENU           
    MENU           
    MENU           


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









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



    Ссылка:
    BB code:




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

    Всего комментариев: 1
    0   Спам
    1 Egishenc   (23.12.2013 01:39)
    Аватар Egishenc hi


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