CSS3 навигация с эффектами

HTML5 и CSS3 навигация с эффектами

Безумно люблю какие-то изящные и интересные способы реализации разных менюшек, навигационных панеляк. Сегодня мы с вами сделаем навигационное меню (примерчик) с эффектами для сайта, которое очень здорово смотрится на любом сайте. :-)

Смотрится очень просто и интересно, но сделать такое меню еще проще, чем кажется на первый взгляд. Все что нам понадобится — дак это чистый CSS3 и HTML.

HTML код для навигация с эффектами

В меню используем типовую разметку с элементом HTML5 nav:

<nav>
  <ul>
    <li><a href="#">Домой</a></li>
    <li><a href="#">Разработка</a><span class="dropBottom"></span>
      <ul>
        <li><a href="#">Дизайн</a><span class="dropRight"></span>
          <ul>
            <li><a href="#">Фотошоп</a></li>
            <li><a href="#">Иллюстратор</a></li>
            <li><a href="#">Веб дизайн</a><span class="dropRight"></span>
              <ul>
                <li><a href="#">XTHML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Статьи</a></li>
        <li><a href="#">Интервью</a></li>
      </ul>
    </li>
    <li><a href="#">О сайте</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

CSS код для навигация с эффектами

CSS код тоже достаточно простой:

  nav {
    display:table;
    margin:50px auto;
    box-shadow:0px 2px 0px #023333;
  }
  ul {
    margin:0;
    padding:0;
    list-style:none;
  }
  ul ul {
    opacity:0;
    position:absolute;
    top:160%;
    visibility:hidden;
    transition:all .4s ease;
    -webkit-transition:all .4s ease;
  }
  ul ul ul {
    top:0%;
    left:160%;
  }
  ul ul li:hover > ul {
    top:0%;
    left:100%;
    opacity:1;
    visibility:visible;
  }
  ul li:hover > ul {
    opacity:1;
    top:100%;
    visibility:visible;
  }
  ul li {
    float:left;
    position:relative;
  }
  ul ul li {
    float:none;
  }
  ul li {
    background-color:#009C75;
    cursor: pointer;
  }
  ul a {
    text-decoration:none;
    display:block;
    color:#FF9;
    padding:10px 15px;
    width:6em;
    text-align:center;
    font-family: 'Open Sans', sans-serif;
    text-shadow: 0px -1px 0px rgba(0,0,0,.2);
  }
  ul li:hover {
    background-color:#007373;
  }
  ul li a:hover {
    background-color:#007373;
  }
  span.dropBottom,span.dropRight {
    display: block;
    box-shadow:inset 2px 0px 0px #FF9;
    position: absolute;
    left: 0px;
    width:100%;
    height: 100%;
    top: 0px;
  }
  span.dropBottom {
    box-shadow:inset 0px 2px 0px #FF9;
    position: absolute;
    width: 100%;
    bottom: 0px;
  }

Демо

Все вопросы, предложения, пишите в комментариях к статье. С радостью на них отвечу.

Похожие заметки
Последние заметки
Если вам понравилась статья, вы можете подписаться на RSS или e-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (доставка от SmartResponder):

8 комментариев

  1. Николай,
    1

    Люблю экспериментировать с дизайном сайта и всегда нравились меню с эффектами (выпадающие меню, изменение цвета...) Это сразу привлекает внимание и больше шансов завлечь человека стать постоянным посетителем твоего сайта.

  2. Евгений,
    2

    Это точно. :-)

  3. Татьяна,
    3

    Сейчас красивым сайтом удивить трудно, но с эффектами поиграть можно, главное не перестараться. И оказывается сделать это легко чуточку фантазии и вкуса, и вуаля все новые и новые посетители

  4. Ника,
    4

    Реализация различных менюшек меня очень привлекает. Использовала этот код на своем сайте, действительно смотрится очень прикольно, оригинально. Теперь дизайн сайта выглядит более привлекательно.

  5. Полина,
    5

    Наконец-то нашла меню с подобными эффектами. Коды простые и универсальные. Отличное дополнение к дизайну моего сайта. Придерживаюсь минимализма, поэтому такое оформление мне понравилось.

  6. Евгений Москаленко,
    6

    Буду стараться почаще выкладывать что-то простенькое.

  7. Александр,
    7

    Очень интересно! У самого сайта пока нет, нов вот присматриваюсь на различных сайтах к информации по сайтостроительству! Начинаю приходить к выводам, что создание сайта может быть очень даже интересным, хотелось бы побольше различных шаблонов и кодов для создания сайта.

  8. Евгений Москаленко,
    8

    Чуть под освобожусь и сделаю наверное акцент на таких постах.

Оставить комментарий