CSS3 меню с анимацией

Верстка

Рисунок CSS3 меню с анимацией
CSS3 меню с анимацией CSS3 меню с анимацией
оценка: 5.0 из 5
оценок: 4

Предлагаю ознакомиться с анимированным меню на основе CSS3. В этом меню не используются скрипты. Все реализовано только на CSS3. Поддерживаются большинством популярных браузеров. В тех браузерах, которые не поддерживают CSS3 меню будет так же работать, но без эффектов и анимации. Считаю нецелесообразным делать заплатки для старых браузеров. Уже давно пора переходить на современные.

Данное меню на основе CSS3 полноценно работает в следующих браузерах: Opera 11 и выше, Firefox 4 и выше, Google Chrome, Internet Explorer 10. Остальные браузеры полноценно отображают меню, но нет анимации и эффектов.

Живой пример меню ниже:






Это меню состоит из двух составляющих: верстка самого меню и, собственно, CSS и CSS3 стили. Меню может состоять из двух уровней. Меню первого уровня всегда отображается на странице. Меню второго уровня скрыто, и появляется только после наведении курсора на соответствующий пункт меню первого уровня.

Цветовое оформление CSS3 меню можно задать любое через стили.

Верстку меню можнео разместить в любом месте вашего сайта. Выглядит она так:

Code
<ul class="spmenu">
  <li><a href="">Пункт 1</a></li>
  <li><a href="">Пункт 2</a>
    <ul class="spsubmenu">
      <li><a href="">Подпункт 2.1</a></li>
      <li><a href="">Подпункт 2.2</a></li>
      <li><a href="">Подпункт 2.3</a></li>
    </ul>
  </li>
  <li><a href="">Пункт 3</a>
    <ul class="spsubmenu">
      <li><a href="">Подпункт 3.1</a></li>
      <li><a href="">Подпункт 3.2</a></li>
      <li><a href="">Подпункт 3.3</a></li>
    </ul>
  </li>
  <li><a href="">Пункт 4</a>
    <ul class="spsubmenu">
      <li><a href="">Подпункт 4.1</a></li>
      <li><a href="">Подпункт 4.2</a></li>
      <li><a href="">Подпункт 4.3</a></li>
      <li><a href="">Подпункт 4.4</a></li>
      <li><a href="">Подпункт 4.5</a></li>
    </ul>
  </li>
  <li><a href="">Пункт 5</a></li>
</ul>
<br style="clear:both;">

Элемент <br style="clear:both;"> нужен для того, чтобы меню не обтекалось другими элементами страницы.

Далее в теле HEAD страницы нужно прописать следующий код:

Code
<style type="text/css">
  /* === Основные стили для меню === */
  .spmenu, .spsubmenu {
    list-style-type: none; /* убираем маркеры */
    padding: 0; /* убираем отступы внутри */
    margin: 0; /* убираем отступы снаружи */
  }
  .spmenu li a {
    text-decoration: none; /* убираем подчеркивание ссылок */
    color: #000000; /* задаем цвет текста */
    padding: 5px 10px; /* задаем отступы */
    display: inline-block; /* задаем стиль отображения ссылок */
  }
  .spmenu>li {
    float: left; /* выстраиваем элементы меню по горизонтали */
    text-align: center; /* выравниваем текст по центру */
    margin: 1px; /* внешний отступ */
    border: 1px solid #009900; /* границы элементов меню I уровня */
  }
  .spmenu>li {
    background: #bbffbb; /* цвет фона элементов меню I уровня */
  }
  .spsubmenu {
    clear: both; /* запрет обтекания */
    position: absolute; /* делаем элемент плавающим */
    visibility: hidden; /* скрываем элемент меню II уровня */
    opacity: 0.0; /* даем меню II уровня полную прозрачность */
  }
  .spsubmenu>li {
    background: #ccffcc; /* цвет фона элементов меню II уровня */
  }
  .spmenu>li:hover {
    background: #fafffa; /* цвет фона элементов меню I уровня после наведения курсора */
  }
  .spmenu>li:hover .spsubmenu {
    visibility: visible; /* отображаем элементы меню II уровня */
    opacity: 1.0; /* убираем прозрачность элементов меню II уровня */
  }
  .spsubmenu {
    border: 1px solid #009900; /* границы меню II уровня */
  }
  .spsubmenu>li:hover {
    background: #fafffa; /* цвет фона подменю при наведении курсора */
  }
  
  /* === Тень на CSS3 === */
  .spsubmenu, .spmenu>li {
    box-shadow: 5px 5px 10px #999999; /* CSS3 */
    -o-box-shadow: 5px 5px 10px #999999; /* Opera 11- */
    -moz-box-shadow: 5px 5px 10px #999999; /* Mozilla-браузеры (Firefox) */
    -webkit-box-shadow: 5px 5px 10px #999999; /* Webkit-браузеры (Chrome) */
    -khtml-box-shadow: 5px 5px 10px #999999; /* Khtml-браузеры (Konqueror)*/
    -ms-box-shadow: 5px 5px 10px #999999; /* IE 10+ */
  }
  /* === Анимация на CSS3 === */
  .spsubmenu, .spmenu li {
    transition: all 500ms; /* CSS3 */
    -o-transition: all 500ms; /* Opera 11- */
    -moz-transition: all 500ms; /* Mozilla-браузеры (Firefox) */
    -webkit-transition: all 500ms; /* Webkit-браузеры (Chrome) */
    -khtml-transition: all 500ms; /* Khtml-браузеры (Konqueror)*/
    -ms-transition: all 500ms; /* IE 10+ */
  }
</style>

Для чего нужен тот или иной пункт CSS описано в комментариях кода. Думаю, сможете разобраться. Для работы CSS3 меню этого будет достаточно.

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




CSS3 меню с анимацией
Верстка
Скрипты, инструкции, справочники

rss
Категория:Верстка
Просмотрено:4907
Рейтинг:5.0/4
Дата добавления:2012-07-23 17:45, Понедельник
Добавил:Szen
Теги:меню, анимация, CSS3

Мини-форум

№ 02012-07-23 17:45
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "CSS3 меню с анимацией".
Гость
Учавствовать в обсуждении "CSS3 меню с анимацией" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Как вы используете файл-хостинги?
Всего ответов: 170
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 4
Гостей: 4
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz