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



Меню нумерованное с эффектом вращения

Меню нумерованное с вращающимися элементами




Меню с прономерованными списками пунктов и подпунктов, при наведении курсора номера вращаются.В качестве эффекта вращения применяется свойство:

  • transition
  • Ширину меню и его расцветку можно настроить как угодно, в местах регулировок сделаны комментарии.Для установки скопируйте код из примера и установите там где будет находиться менюшка, в нижней части материала есть редактор в котором можно поэкспериментировать с изменениями.Если возникнут вопросы или предложения воспользуйтесь формой комментариев.





    Меню в работе



    Код меню для установки


    <style>
    #dsblockmenu{
    /* - Меню по центру - */
    margin: 0px auto;
    /* - Ширина меню - */
    width:350px;
    border:0;
    }
    ol{
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    /* - Размер шрифта и его тип - */
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    }
    ol ol{
    margin: 0 0 0 2em;
    }
    .dsitemmenu a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    /* - Цвет фона пунктов и подпунктов - */
    background: #ddd;
    /* - Цвет текста пунктов и подпунктов - */
    color: #222222;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    }
    .dsitemmenu a:hover{
    /* - Цвет фона пунктов при наведении мышкой - */
    background: #eee;
    }
    .dsitemmenu a:hover:before{
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    .dsitemmenu a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    /* - Цвет фона вращающихся номеров - */
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    }
    </style>
    <div id="dsblockmenu">
    <ol class="dsitemmenu">
    <li><a href="">Пункт меню</a></li>
    <li><a href="">Пункт меню</a></li>
    <li><a href="">Пункт меню</a>
    <ol>
    <li><a href="">Подпункт меню</a></li>
    <li><a href="">Подпункт меню</a></li>
    <li><a href="">Подпункт меню</a></li>
    </ol>
    </li>
    <li><a href="">Пункт меню</a></li>
    <li><a href="">Пункт меню</a></li>
    </ol>
    </div>


    Поэкспериментируйте с кодом установки в редакторе









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



    Ссылка:
    BB code:




  • ©
  • | Просмотров: 2395 | Добавил: IZOTOP | Рейтинг: 0.0/0

    Всего комментариев: 8
    0   Спам
    7 moty   (03.07.2013 16:15)
    Аватар moty Вот что они мне ответили
    "конструктор не поддерживает никакие посторонние css"

    0   Спам
    8 IZOTOP   (05.07.2013 15:19)
    Аватар IZOTOP Валить надо с этого хостинга и не тратить время.
    Внешние стили в этом меню не применяются.

    0   Спам
    5 moty   (03.07.2013 13:40)
    Аватар moty Я не спец, если у вас есть возможность то можете описать как им задать подобный вопрос?

    0   Спам
    6 IZOTOP   (03.07.2013 15:48)
    Аватар IZOTOP У любого хостинга есть техподдержка, нужно узнать почему встроенный редактор сайта неверно отображает сценарий свойств CSS3.
    Укажите им на страницу с помещённым в неё кодом, они сами через исходник возьмут вариант кода и проверят.
    Скорее всего им известно о работе редактора и способе выхода из подобной ситуации.

    0   Спам
    3 moty   (03.07.2013 12:44)

    0   Спам
    4 IZOTOP   (03.07.2013 13:38)
    Аватар IZOTOP Надеюсь удалось получить ответ у хостера по поводу неверной интерпретации свойств на сайте?
    Это всё равно нужно сделать, иначе проблемы с подбором элементов останутся.

    0   Спам
    2 moty   (03.07.2013 12:43)
    Аватар moty Здрасти, попробовал что то оно не выпадает!

    0   Спам
    1 Admin0780   (01.06.2013 01:36)
    Аватар Admin0780 а как сделать так что бы подменю открывались только при наведении или клике по меню а изначально были скрыты?


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