Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, Вертикальное меню, CSS3    Дата: 1-03-2011, 21:59
Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимацииСтильная универсальная CSS3 навигация для сайта
Это универсальное меню - замечательный пример CSS3 анимации. Раньше такого эффекта можно было добиться только с помощью скриптов, теперь это элементарно реализуется благодаря новым CSS3 свойствам.
В эту навигацию вошли такие CSS3 свойства как:
box-shadow - тень
border-radius - скругление углов
transition - CSS3 анимация (основа реализации навигации)
opacity - прозрачность
rgba - цвет + прозрачность одним свойством
Реализация этой навигации, на первый взгляд, может показаться сложной, но, на самом деле всё очень просто. Меню реализовано маркированным списком, в элемент списка вложен контейнер(DIV) с ещё одним маркированным списком, вот и вся HTML реализация, а вот CSS реализация немного сложнее, тут в двух словах не обьяснить, так что качайте пример, разбирайте, изучайте, подругому никак.
Код меню валидный DTD XHTML 1.0 Strict меню корректно работает только в новейших браузерах - Opera 11, последние Google Chrome или Safari, этими браузерами и нужно просматривать пример. Для прикола можно посмотреть пример меню браузером IE
Смотреть пример универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
Скачать готовый пример универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
Пользуемся на здоровье!
Не забываем комментировать и добавлять новость в закладки!
Версия для печати
  • 100
     Просмотров: 7 049      Комментариев: 9   

Понравилась новость Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

№ 9 Автор: morff 2 января 2013 03:30

 Вот такой я - morff

morff
Гости
комментариев
публикаций

Статус:
благодарочка!!!все работает!спасибо что вы есть wink

  • Нравится
  • 0
    

№ 8 Автор: Admin 2 января 2013 02:54

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: morff
классная менюшка.ну вот HTML где он ?

Скачиваете пример, смотрите исходный код - вот и HTML


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 7 Автор: morff 1 января 2013 23:11

 Вот такой я - morff

morff
Гости
комментариев
публикаций

Статус:
классная менюшка.ну вот HTML где он ?

  • Нравится
  • 0
    

№ 6 Автор: Admin 18 апреля 2011 23:12

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: vic.tor
картинки в формате РNG пойдут?

Конечно пойдут
Цитата: vic.tor
растягивать горионтально нужно, чтоб было больше подкатегорий в категории?или растягивается по числу подкатегорий само (типа ре3ина) ?

Везде жёсткие размеры, поэтому чтоб что-то добавить надо расчитать на сколько что увеличится и пропорционально увеличить нужные размеры.
Цитата: vic.tor
увеличить про3рачность фона - 3адавать другой тон или исполь3овать rgba ??

RGBA - замечательное свойство, и цвет и прозрачность в одном, подробнее про rgba можно глянуть тут Свойство rgba а нужные цвета подсмотреть тут утилиты для работы с цветом
Менюшка не простая, но разобраться там реально.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 5 Автор: vic.tor 18 апреля 2011 21:02

 Вот такой я - vic.tor

vic.tor
Гости
комментариев
публикаций

Статус:
вопрос такого плана:
картинки в формате РNG пойдут?
растягивать горионтально нужно, чтоб было больше подкатегорий в категории?или растягивается по числу подкатегорий само (типа ре3ина) ?
увеличить про3рачность фона - 3адавать другой тон или исполь3овать rgba ??
честно говоря , думал проще будет, но уже отступать не хочется, ре3ультат интересно увидеть

  • Нравится
  • 0
    

№ 4 Автор: Admin 11 апреля 2011 18:18

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: vic.tor
спасибо, буду возиться, потом покажу что получилось

На здоровье, на результат очень интересно посмотреть


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 3 Автор: vic.tor 11 апреля 2011 18:13

 Вот такой я - vic.tor

vic.tor
Гости
комментариев
публикаций

Статус:
Admin,
спасибо, буду возиться, потом покажу что получилось

  • Нравится
  • 0
    

№ 2 Автор: Admin 11 апреля 2011 15:47

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: vic.tor
подключать отдельно CSS для меню?и куда сами файлы закидывать , в частности .HTML

HTML код меню в файл шаблона где должно быть меню, картинки к меню в отдельную папку(чтоб потом не путаться) папку с картинками меню в папку с картинками шаблона, CSS прям скопировать в свою таблицу шаблона и пути к картинкам поправить соответственно.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 1 Автор: vic.tor 11 апреля 2011 13:26

 Вот такой я - vic.tor

vic.tor
Гости
комментариев
публикаций

Статус:
не против поставить меню с такой фишкой для нового шаблона, картинки подходящие нашел, только вот пару вопросов есть, если админа не затруднит помочь, место для кнопки найдется в новом шаблоне.
подключать отдельно CSS для меню?и куда сами файлы закидывать , в частности .HTML

  • Нравится
  • 0
    

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус