Стильное фантастическое меню шапка на CSS3
Автор: Admin Категория: Меню навигации Теги: Горизонтальное меню, Вертикальное меню, CSS3 Дата: 18-03-2011, 17:03
Волшебство CSS3 или Стильное фантастическое меню шапка на CSS3
Просто фантастический пример волшебства CSS3 анимации.
Для реализации такого стильного эффекта используется CSS3 свойство transition.
Шапка меню выполнено маркированным списком с разным уровнем вложенности. При наведении на категорию меню происходит эффектная плавная смена заднего фона, состоящего из трёх картинок, которые плавно собираются в один фон и сверху плавно приесжает меню подкатегорий. При убирании курсора происходит обратная анимация. Ещё раз хочу заметить, что это всё реализовано только на CSS, никакого javascript!
Просто фантастический пример волшебства CSS3 анимации.
Для реализации такого стильного эффекта используется CSS3 свойство transition.
Шапка меню выполнено маркированным списком с разным уровнем вложенности. При наведении на категорию меню происходит эффектная плавная смена заднего фона, состоящего из трёх картинок, которые плавно собираются в один фон и сверху плавно приесжает меню подкатегорий. При убирании курсора происходит обратная анимация. Ещё раз хочу заметить, что это всё реализовано только на CSS, никакого javascript!
Горизонтальное Lavalamp меню на CSS3
Стильное эффектное горизонтальное Lavalamp меню чисто на CSS3
Мне, как и многим очень нравится LavaLamp эффект в навигации, раньше такой эффект можно было реализовать только на javascript.
И вот теперь это стало возможным с применением только CSS. Для достижения эффекта используется CSS3 хак -webkit-animation и правило @-webkit-keyframes
Свойство -webkit-animation — сокращенный способ задать свойства анимации -webkit-animation-name, -webkit-animation-duration, -webkit-animation-timing-function, -webkit-animation-delay, -webkit-animation-iteration-count, -webkit-animation-direction, позволяет одновременно задать имя анимации, время анимации, способ определения промежуточных значений изменяющихся параметров, задержку анимации, количество циклов анимации и возможность ее проигрывания в обратную сторону.
Правило @-webkit-keyframes — позволяет пользователю описать анимацию CSS свойств в виде перечня ключевых кадров.
Данный хак поддерживается только браузерами на движке WebKit - это Safari 4.0 и выше, Chrome 3.0 и выше, меню корректно работает только в этих браузерах!!!(хотя Опера тоже что-то там пытается изобразить)
Мне, как и многим очень нравится LavaLamp эффект в навигации, раньше такой эффект можно было реализовать только на javascript.
И вот теперь это стало возможным с применением только CSS. Для достижения эффекта используется CSS3 хак -webkit-animation и правило @-webkit-keyframes
Свойство -webkit-animation — сокращенный способ задать свойства анимации -webkit-animation-name, -webkit-animation-duration, -webkit-animation-timing-function, -webkit-animation-delay, -webkit-animation-iteration-count, -webkit-animation-direction, позволяет одновременно задать имя анимации, время анимации, способ определения промежуточных значений изменяющихся параметров, задержку анимации, количество циклов анимации и возможность ее проигрывания в обратную сторону.
Правило @-webkit-keyframes — позволяет пользователю описать анимацию CSS свойств в виде перечня ключевых кадров.
Данный хак поддерживается только браузерами на движке WebKit - это Safari 4.0 и выше, Chrome 3.0 и выше, меню корректно работает только в этих браузерах!!!(хотя Опера тоже что-то там пытается изобразить)
Горизонтальная раздвижная CSS3 навигация
Горизонтальное раздвижное CSS3 меню одна кнопка
Эффектный пример CSS3 навигации реализованный одной кнопкой.
При наведении на кнопку меню - навигация раздвигается в разные стороны по горизонтали благодаря новому свойству CSS3 анимации transition
Меню реализовано маркированным списком вложенным в DIV. Пример меню корректно работает только в современных браузерах последних версий, поддерживающих CSS3 свойство transition - Opera, Google Chrome, Safari, Mozilla Firefox(начиная с версии 4)
Код меню валидный DTD XHTML 1.0 Strict
Эффектный пример CSS3 навигации реализованный одной кнопкой.
При наведении на кнопку меню - навигация раздвигается в разные стороны по горизонтали благодаря новому свойству CSS3 анимации transition
Меню реализовано маркированным списком вложенным в DIV. Пример меню корректно работает только в современных браузерах последних версий, поддерживающих CSS3 свойство transition - Opera, Google Chrome, Safari, Mozilla Firefox(начиная с версии 4)
Код меню валидный DTD XHTML 1.0 Strict
Вертикальное выпадающее CSS меню
Очередной пример простейшей реализации вертикального выпадающего CSS меню
Меню реализовано маркированным списком с разным уровнем вложенности, список обёрнут в DIV, вот и вся реализация.
В эту навигацию я не стал добавлять никакого графического оформления, всё чисто на CSS, при желании можно конечно украсить менюшку графикой на любой вкус, код меню предельно прост и никому не составит труда оформить всё под себя.
Меню корректно работает во всех браузерах.
Код меню валидный DTD XHTML 1.0 Strict
Меню реализовано маркированным списком с разным уровнем вложенности, список обёрнут в DIV, вот и вся реализация.
В эту навигацию я не стал добавлять никакого графического оформления, всё чисто на CSS, при желании можно конечно украсить менюшку графикой на любой вкус, код меню предельно прост и никому не составит труда оформить всё под себя.
Меню корректно работает во всех браузерах.
Код меню валидный DTD XHTML 1.0 Strict
Простое горизонтальное выпадающее javascript меню
Простое и стильное горизонтальное выпадающее javascript clickMenu
Древняя горизонтальная менюшка, свёрстана маркированным списком, выпадение реализовано на javascript.
Выпадает при клике по категории, закрывается так же при клике.
Чтоб меню заработало тегу body нужно дописать onload="ieFix('menu')" как в примере.
Меню корректно работает во всех браузерах, особенно должно понравиться любителям древних браузеров.
Код меню валидный DTD XHTML 1.0 Strict
Древняя горизонтальная менюшка, свёрстана маркированным списком, выпадение реализовано на javascript.
Выпадает при клике по категории, закрывается так же при клике.
Чтоб меню заработало тегу body нужно дописать onload="ieFix('menu')" как в примере.
Меню корректно работает во всех браузерах, особенно должно понравиться любителям древних браузеров.
Код меню валидный DTD XHTML 1.0 Strict
Стильное вертикальное выпадающее css меню
Стильная вертикальная выпадающая css навигация для сайта
Простейшая реализация вертикальной выпадающей CSS навигации.
Меню реализовано маркированным списком с разным уровнем вложенности, всё легко и просто.
Код меню валидный DTD XHTML 1.0 Strict.
Меню корректно работает во всех браузерах.
Простейшая реализация вертикальной выпадающей CSS навигации.
Меню реализовано маркированным списком с разным уровнем вложенности, всё легко и просто.
Код меню валидный DTD XHTML 1.0 Strict.
Меню корректно работает во всех браузерах.
Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
Автор: Admin Категория: Меню навигации Теги: Горизонтальное меню, Вертикальное меню, CSS3 Дата: 1-03-2011, 21:59
Стильная универсальная CSS3 навигация для сайта
Это универсальное меню - замечательный пример CSS3 анимации. Раньше такого эффекта можно было добиться только с помощью скриптов, теперь это элементарно реализуется благодаря новым CSS3 свойствам.
В эту навигацию вошли такие CSS3 свойства как:
box-shadow - тень
border-radius - скругление углов
transition - CSS3 анимация (основа реализации навигации)
opacity - прозрачность
rgba - цвет + прозрачность одним свойством
Это универсальное меню - замечательный пример CSS3 анимации. Раньше такого эффекта можно было добиться только с помощью скриптов, теперь это элементарно реализуется благодаря новым CSS3 свойствам.
В эту навигацию вошли такие CSS3 свойства как:
box-shadow - тень
border-radius - скругление углов
transition - CSS3 анимация (основа реализации навигации)
opacity - прозрачность
rgba - цвет + прозрачность одним свойством
Стильное горизонтальное меню навигации для сайта с применением CSS3 анимации
Стильное горизонтальное меню навигации для сайта с применением CSS3 анимации
Свойство - transition в CSS3 слайдинг меню
Стильное горизонтальное меню навигации для сайта с применением CSS3 анимации, всё очень просто и эффектно.
Я решил всё больше отдавать предпочтение новым свойствам CSS3, благо, приход этих новых свойств в жизнь веб мастера уже не за горами. Браузеры Google Chrome и Safari последних версий уже понимают новые CSS3 свойства, благодаря этому можно хотябы посмотреть живые примеры а не картинки примеров. Пример работы CSS3 слайдинг меню нужно смотреть именно этими браузерами!
Свойство - transition в CSS3 слайдинг меню
Стильное горизонтальное меню навигации для сайта с применением CSS3 анимации, всё очень просто и эффектно.
Я решил всё больше отдавать предпочтение новым свойствам CSS3, благо, приход этих новых свойств в жизнь веб мастера уже не за горами. Браузеры Google Chrome и Safari последних версий уже понимают новые CSS3 свойства, благодаря этому можно хотябы посмотреть живые примеры а не картинки примеров. Пример работы CSS3 слайдинг меню нужно смотреть именно этими браузерами!