Круглое css3 меню звезда
Автор: Admin Категория: Меню навигации Теги: Горизонтальное меню, Вертикальное меню, Круглое меню, CSS3 Дата: 18-04-2011, 18:45
Замечательный пример круглого CSS3 меню
Меню реализовано простым маркированным списком с плавающими элементами списка, в основе реализации точный расчёт размеров всех картинок таким образом чтобы картинки находились строго на своих местах без применения координатного позиционирования, картинки смещаются просто отступами сверху или снизу и таким образом располагаются вокруг основной картинки восьмиконечной звезды. Очень интересная реализация, это не просто круглое меню, а замечательный пример точного математического расчёта в CSS.
Меню реализовано простым маркированным списком с плавающими элементами списка, в основе реализации точный расчёт размеров всех картинок таким образом чтобы картинки находились строго на своих местах без применения координатного позиционирования, картинки смещаются просто отступами сверху или снизу и таким образом располагаются вокруг основной картинки восьмиконечной звезды. Очень интересная реализация, это не просто круглое меню, а замечательный пример точного математического расчёта в CSS.
Стильное фантастическое меню шапка на CSS3
Автор: Admin Категория: Меню навигации Теги: Горизонтальное меню, Вертикальное меню, CSS3 Дата: 18-03-2011, 17:03
Волшебство CSS3 или Стильное фантастическое меню шапка на CSS3
Просто фантастический пример волшебства CSS3 анимации.
Для реализации такого стильного эффекта используется CSS3 свойство transition.
Шапка меню выполнено маркированным списком с разным уровнем вложенности. При наведении на категорию меню происходит эффектная плавная смена заднего фона, состоящего из трёх картинок, которые плавно собираются в один фон и сверху плавно приесжает меню подкатегорий. При убирании курсора происходит обратная анимация. Ещё раз хочу заметить, что это всё реализовано только на CSS, никакого javascript!
Просто фантастический пример волшебства CSS3 анимации.
Для реализации такого стильного эффекта используется CSS3 свойство transition.
Шапка меню выполнено маркированным списком с разным уровнем вложенности. При наведении на категорию меню происходит эффектная плавная смена заднего фона, состоящего из трёх картинок, которые плавно собираются в один фон и сверху плавно приесжает меню подкатегорий. При убирании курсора происходит обратная анимация. Ещё раз хочу заметить, что это всё реализовано только на CSS, никакого javascript!
Вертикальное выпадающее CSS меню
Очередной пример простейшей реализации вертикального выпадающего CSS меню
Меню реализовано маркированным списком с разным уровнем вложенности, список обёрнут в DIV, вот и вся реализация.
В эту навигацию я не стал добавлять никакого графического оформления, всё чисто на CSS, при желании можно конечно украсить менюшку графикой на любой вкус, код меню предельно прост и никому не составит труда оформить всё под себя.
Меню корректно работает во всех браузерах.
Код меню валидный DTD XHTML 1.0 Strict
Меню реализовано маркированным списком с разным уровнем вложенности, список обёрнут в DIV, вот и вся реализация.
В эту навигацию я не стал добавлять никакого графического оформления, всё чисто на CSS, при желании можно конечно украсить менюшку графикой на любой вкус, код меню предельно прост и никому не составит труда оформить всё под себя.
Меню корректно работает во всех браузерах.
Код меню валидный 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 - цвет + прозрачность одним свойством
Одна кнопка вертикальное меню аккордеон CSS + javascript
Сложная очень эффектная вертикальная навигация на javascript в стиле аккордеон реализованная одной кнопкой
Меню реализовано списком определений, в описание определения вложен маркированный список и вся эта красота спрятана в одной кнопке. Раскрывающийся список меню абсолютно позиционирован и раскрывается поверх всех элементов на странице, что бывает очень удобно при нехватке или экономии места. Меню корректно работает во всех нормальных браузерах, код валидный DTD XHTML 1.0 Strict, валидацию можно проверить кнопочкой внизу справа на примере меню.
Меню реализовано списком определений, в описание определения вложен маркированный список и вся эта красота спрятана в одной кнопке. Раскрывающийся список меню абсолютно позиционирован и раскрывается поверх всех элементов на странице, что бывает очень удобно при нехватке или экономии места. Меню корректно работает во всех нормальных браузерах, код валидный DTD XHTML 1.0 Strict, валидацию можно проверить кнопочкой внизу справа на примере меню.
Горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки
Автор: Admin Категория: Меню навигации Теги: Горизонтальное меню, Вертикальное меню Дата: 1-03-2011, 18:43
Как сделать эффект нажатой кнопки
Представляю вашему вниманию самый простой способ создания эффекта нажатия кнопки для навигации сайта. Код меню валидный DTD XHTML 1.0 Strict. Способ на столько прост, что и описывать нечего, приведу сразу пример готового кода.
Эффект создаётся путём изменения цвета рамки и смещения якоря ссылки при наведении курсора мыши на ссылку навигации.
Представляю вашему вниманию самый простой способ создания эффекта нажатия кнопки для навигации сайта. Код меню валидный DTD XHTML 1.0 Strict. Способ на столько прост, что и описывать нечего, приведу сразу пример готового кода.
Эффект создаётся путём изменения цвета рамки и смещения якоря ссылки при наведении курсора мыши на ссылку навигации.
Простое круглое меню на CSS с описанием категории при наведении на иконку
Автор: Admin Категория: Меню навигации Теги: Горизонтальное меню, Вертикальное меню, Круглое меню Дата: 1-03-2011, 18:25
Пример простого круглого меню на CSS с описанием категории при наведении на иконку
Представляю вашему вниманию готовое решение - Простое круглое меню на CSS с описанием категории при наведении на иконку, которое я подсмотрел на замечательном сайте cssplay. Код меню валидный DTD XHTML 1.0 Strict будем потихоньку переходить на Строгий синтаксис XHTML.
Меню реализовано простым маркированным списком, при наведении курсора мышки на иконку - в центре меню появляется краткое описание категории, длина краткого описания ограничена! увидеть ограничение длины описания можно опытным путём
Картинки иконок должны быть с прозрачным фоном и того же размера что и в примере, рациональнее использовать PNG иконки с прозрачным фоном так как качество PNG иконок гораздо выше чем GIF.
Пожалуй, больше добавить тут нечего, меню замечательное, его нужно просто видеть, всё очень просто и понятно.
Представляю вашему вниманию готовое решение - Простое круглое меню на CSS с описанием категории при наведении на иконку, которое я подсмотрел на замечательном сайте cssplay. Код меню валидный DTD XHTML 1.0 Strict будем потихоньку переходить на Строгий синтаксис XHTML.
Меню реализовано простым маркированным списком, при наведении курсора мышки на иконку - в центре меню появляется краткое описание категории, длина краткого описания ограничена! увидеть ограничение длины описания можно опытным путём
Картинки иконок должны быть с прозрачным фоном и того же размера что и в примере, рациональнее использовать PNG иконки с прозрачным фоном так как качество PNG иконок гораздо выше чем GIF.
Пожалуй, больше добавить тут нечего, меню замечательное, его нужно просто видеть, всё очень просто и понятно.