Горизонтальное меню с применением свойств анимации - Скрипты для 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



Горизонтальное меню с применением свойств анимации


Горизонтальное меню с применением свойств анимации CSS3




Очень эффектное меню,особое внимание советую уделить динамическому расширению пунктов и подпунктов при наведении на них курсора мышки.В меню применяются свойства анимации для достижения существующего эффекта.Никаких JS скриптов не применяется,это делает менюшку лёгкой для загрузки.Основные настройки для работы на сайте uCoz сделаны.Не нужно разделять код примера помещая стили отдельно в таблицу стилей сайта uCoz,поместите весь код по месту установки,разумеется предварительно отредактировав его под себя.Ниже в этом материале находится "Редактор HTML",он предназначен для проверки,настройки и экспериментирования любых скриптов,стилей CSS и любых других компановок.Скопируйте код из примера в редактор и нажмите проверить,Вы увидите работу меню.Если Вам не понятна работа применяемых свойств,воспользуйтесь поиском сайта введя в него название требуемого свойства или тега.Рассматриваются любые вопросы и предложения по поводу этой менюхи,в нижней части материала есть 2 формы комментариев,воспользуйтесь любой удобной для Вас.




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


<style>
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
font-size: 13px;
height: 36px;
list-style: none outside none;
margin:0px auto;
text-shadow: 0 -1px 3px #202020;
width: 980px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}
#nav ul {
left: -9999px;
position: absolute;
top: -9999px;
z-index: 2;
}
#nav li {
border-bottom: 1px solid #575757;
border-left: 1px solid #929292;
border-right: 1px solid #5d5d5d;
border-top: 1px solid #797979;
display: block;
float: left;
height: 34px;
position: relative;
width: 105px;
}
#nav li:first-child {
border-left: 0 none;
margin-left: 5px;
}
#nav li a {
color: #FFFFFF;
display: block;
line-height: 34px;
outline: medium none;
text-align: center;
text-decoration: none;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}
@-webkit-keyframes animation1 {
0% {
-webkit-transform: scale(1);
}
30% {
-webkit-transform: scale(1.3);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes animation1 {
0% {
-moz-transform: scale(1);
}
30% {
-moz-transform: scale(1.3);
}
100% {
-moz-transform: scale(1);
}
}
#nav li > a:hover {
-moz-animation-name: animation1;
-moz-animation-duration: 0.7s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: animation1;
-webkit-animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#nav li:hover > a {
z-index: 4;
}
#nav li:hover ul.subs {
left: 0;
top: 34px;
width: 150px;
}
#nav ul li {
background: none repeat scroll 0 0 #838383;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
opacity: 0;
width: 100%;
/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/}
@-webkit-keyframes animation2 {
0% {
margin-left:185px;
}
100% {
margin-left:0px;
opacity:1;
}
}
@-moz-keyframes animation2 {
0% {
margin-left:185px;
}
100% {
margin-left:0px;
opacity:1;
}
}
#nav li:hover ul li {
-moz-animation-name: animation2;
-moz-animation-duration: 0.3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: animation2;
-webkit-animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/
}
#nav li:hover ul li:nth-child(1) {
-moz-animation-delay: 0;
-webkit-animation-delay: 0;
}
#nav li:hover ul li:nth-child(2) {
-moz-animation-delay: 0.05s;
-webkit-animation-delay: 0.05s;
}
#nav li:hover ul li:nth-child(3) {
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
#nav li:hover ul li:nth-child(4) {
-moz-animation-delay: 0.15s;
-webkit-animation-delay: 0.15s;
}
#nav li:hover ul li:nth-child(5) {
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
#nav li:hover ul li:nth-child(6) {
-moz-animation-delay: 0.25s;
-webkit-animation-delay: 0.25s;
}
#nav li:hover ul li:nth-child(7) {
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
#nav li:hover ul li:nth-child(8) {
-moz-animation-delay: 0.35s;
-webkit-animation-delay: 0.35s;
}
</style>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
 <li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Back</a></li>
</ul>

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

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









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



Ссылка:
BB code:




  • ©
  • | Просмотров: 4587 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: меню с анимацией, скрипт меню для юкоз

    Всего комментариев: 6
    0   Спам
    6 ERO   (07.12.2013 00:50)
    Аватар ERO Подскажите,вставил горизонтальное меню на сайт,как изменить название кнопок я понял,а вот сделать переходы не понимаю как.
    Как привязать переходы к данным кнопкам?(с уважением,чайник)
    Спасибо всё уже понял...

    0   Спам
    4 IZOTOP   (06.08.2013 16:30)
    Аватар IZOTOP Привет!
    Это меню нельзя "подогнать" под IE и Opera, для работы меню применяются свойства не поддерживающиеся в этих браузерах.
    Единственным актуальным способом выхода их ситуации является установка двух меню через условные операторы.
    То есть получится так что если пользователь зайдёт с ИЕ или Оперы то будет видеть одно меню, а если с других браузеров тогда другое.

    Выглядит это так:

    Код

    <?if($USER_AGENT$='opera' or $USER_AGENT$='ie')?>
    Здесь код меню для оперы и ie
    <?else?>
    Здесь код меню этого материала
    <?endif?>


    Подыщи для IE и Opera меню попроще, хотя Опера скоро будет иметь движок WEBKIT что позволит ей подтянуться к возможностям таких лидеров как Mozila и Chrome, вот тут материал.

    0   Спам
    5 gefest35   (06.08.2013 16:47)
    Аватар gefest35 Опера NEXT подойдёт уже . она как хром и мозила в одном

    0   Спам
    3 gefest35   (05.08.2013 22:32)
    Аватар gefest35 попробуй поменять библиотеку в общих настройках

    0   Спам
    1 Славок   (29.05.2013 19:11)
    Аватар Славок Добрый день.Есть сайт на Юкоз http://www.taxi998.ru/ Хочу воспользоваться вашими услугами для подгонки и установки меню http://delaisait.ucoz.ru/html/html-redactor.html на сайт.Важно:цвет,не яркий и вписывающийся в дизайн.Пункты выпадающего меню добавлю сам.Можно все в HTML установлю сам,просто с CSS не дружу wacko
    Спасибо

    0   Спам
    2 IZOTOP   (30.05.2013 00:33)
    Аватар IZOTOP Привет Славок!
    Так как будет выглядеть меню на одном HTML думаю тебя не устроит. Если только стили CSS вписать в сами теги.
    У тебя нормальное меню просто как я понял тебе нужно его опустить, то что я напишу ниже вставиш в блок поместишь меню в месте где написано:

    Код

    <table border="0" style="margin-top:40px;">
    <tr>
    <td>
    СЮДА ВЕСЬ КОД МЕНЮ
    </td>
    </tr>
    </table>


    Потом меняя значение 40 свойства margin-top:40px; подгоняешь как надо.

    -----/-----


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