Главная » Файлы » Скрипты плагины и дополнения » Разное

Создаём вертикальное меню для сайта на CSS

В данном уроке мы рассмотрим процесс создания весьма интересного концепта меню, мы создадим его вертикальным еще и минималистическим. Данная навигация будет содержать подпункты, то есть мы создадим иерархию выпадающих вкладок для навигации. Кроме этого будет установлена анимация при выборе пункта и добавлены иконки, которые будут существенно украшать нашу навигацию. Мы будем развивать данную тенденцию в сайтостроении и продолжать разрабатывать различные варианты данной навигации.
Преимущество данной навигации состоит в его компактности, кроме этого меню является полностью адаптивным, что играет важную роль в современном вопросе сайтостроения. Итак, давайте приступим.
Шаг 1. HTML
У нас будет контейнер в котором будет содержаться вся иерархия меню, также мы заключим в классы подпункты:
Код
<nav>
  <ul class="mcd-menu">
  <li>
  <a href="">
  <i class="fa fa-home"></i>
  <strong>Главная</strong>
  <small>вернуться домой</small>
  </a>
  </li>
  <li>
  <a href="" class="active">
  <i class="fa fa-edit"></i>
  <strong>О нас</strong>
  <small>краткая информация</small>
  </a>
  </li>
  <li>
  <a href="">
  <i class="fa fa-gift"></i>
  <strong>Избранное</strong>
  <small>любимые сайты</small>
  </a>
  </li>
  <li>
  <a href="">
  <i class="fa fa-globe"></i>
  <strong>Новости</strong>
  <small>только самые интересные</small>
  </a>
  </li>
  <li>
  <a href="">
  <i class="fa fa-comments-o"></i>
  <strong>Блог</strong>
  <small>все, о чем я думаю</small>
  </a>
  <ul>
  <li><a href="#"><i class="fa fa-globe"></i>Новости</a></li>
  <li>
  <a href="#"><i class="fa fa-group"></i>Наша команда</a>
  <ul>
  <li>
  <a href="#"><i class="fa fa-male"></i>Сергей Бондарь</a>
  <ul>
  <li><a href="#"><i class="fa fa-leaf"></i>Проекти</a></li>
  <li><a href="#"><i class="fa fa-tasks"></i>Контакты</a></li>
  </ul>
  </li>
  <li>
  <a href="#"><i class="fa fa-male"></i>Глеб Кавраский</a>
  <ul>
  <li><a href="#"><i class="fa fa-leaf"></i>Контакты</a></li>
  <li><a href="#"><i class="fa fa-tasks"></i>Работы</a></li>
  </ul>
  </li>
  <li><a href="#"><i class="fa fa-male"></i>Давид Барто</a>
  <ul>
  <li><a href="#"><i class="fa fa-leaf"></i>Реклама</a></li>
  </ul>
  </ul>
  </li>
  <li><a href="#"><i class="fa fa-trophy"></i>Награды</a></li>
  <li><a href="#"><i class="fa fa-certificate"></i>Контракты</a></li>
  </ul>
  </li>
  <li>
  <a href="">
  <i class="fa fa-picture-o"></i>
  <strong>Портфолио</strong>
  <small>мои работы</small>
  </a>
  </li>
  <li>
  <a href="">
  <i class="fa fa-envelope-o"></i>
  <strong>Контакты</strong>
  <small>оставайся с нами на связи</small>
  </a>
  </li>
  <li class="float">
  <a class="search">
  <input type="text" value="поиск ...">
  <button><i class="fa fa-search"></i></button>
  </a>
  <a href="" class="search-mobile">
  <i class="fa fa-search"></i>
  </a>
  </li>
  </ul>
  </nav>

Каждый новый подпункт у нас будем заключен тегом
    . С разметкой ничего сложно нет, теперь рассмотрим стили.

    Шаг 2. CSS
    Здесь все интересное, для начала у нас будет подключено две библиотеки стилей, первая из которых это иконки, небольшая анимация, и шрифты, а вторая нам необходима для сброса стилей. Мы добавляем медиа-запросы, что позволит нам сделать навигацию адаптивной под различные экраны, свойство animation позволит нам сделать небольшую анимацию при наведении курсора мыши:
    Код
    @media only screen and (min-width: 1200px) {
      .container {
      width: 1210px;
      }
    }
    @media only screen and (min-width: 960px) and (max-width: 1199px) {
      .container {
      width: 1030px;
      }
    }
    @media only screen and (min-width: 768px) and (max-width: 959px) {
      .container {
      width: 682px;
      }
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
      .container {
      width: 428px;
      margin: 0 auto;
      }
    }
    @media only screen and (max-width: 479px) {
      .container {
      width: 320px;
      margin: 0 auto;
      }
    }
    .mcd-menu {
      list-style: none;
      padding: 0;
      margin: 0;
      background: #FFF;
      /*height: 100px;*/
      border-radius: 2px;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      /* == */
      width: 250px;
      /* == */
    }
    .mcd-menu li {
      position: relative;
      /*float:left;*/
    }
    .mcd-menu li a {
      display: block;
      text-decoration: none;
      padding: 12px 20px;
      color: #777;
      /*text-align: center;
      border-right: 1px solid #E7E7E7;*/
      /* == */
      text-align: left;
      height: 36px;
      position: relative;
      border-bottom: 1px solid #EEE;
      /* == */
    }
    .mcd-menu li a i {
      /*display: block;
      font-size: 30px;
      margin-bottom: 10px;*/
      /* == */
      float: left;
      font-size: 20px;
      margin: 0 10px 0 0;
      /* == */
    }
    /* == */
    .mcd-menu li a p {
      float: left;
      margin: 0 ;
    }
    /* == */
    .mcd-menu li a strong {
      display: block;
      text-transform: uppercase;
    }
    .mcd-menu li a small {
      display: block;
      font-size: 10px;
    }
    .mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
      position: relative;
      transition: all 300ms linear;
      -o-transition: all 300ms linear;
      -ms-transition: all 300ms linear;
      -moz-transition: all 300ms linear;
      -webkit-transition: all 300ms linear;
    }
    .mcd-menu li:hover > a i {
      opacity: 1;
      -webkit-animation: moveFromTop 300ms ease-in-out;
      -moz-animation: moveFromTop 300ms ease-in-out;
      -ms-animation: moveFromTop 300ms ease-in-out;
      -o-animation: moveFromTop 300ms ease-in-out;
      animation: moveFromTop 300ms ease-in-out;
    }
    .mcd-menu li:hover a strong {
      opacity: 1;
      -webkit-animation: moveFromLeft 300ms ease-in-out;
      -moz-animation: moveFromLeft 300ms ease-in-out;
      -ms-animation: moveFromLeft 300ms ease-in-out;
      -o-animation: moveFromLeft 300ms ease-in-out;
      animation: moveFromLeft 300ms ease-in-out;
    }
    .mcd-menu li:hover a small {
      opacity: 1;
      -webkit-animation: moveFromRight 300ms ease-in-out;
      -moz-animation: moveFromRight 300ms ease-in-out;
      -ms-animation: moveFromRight 300ms ease-in-out;
      -o-animation: moveFromRight 300ms ease-in-out;
      animation: moveFromRight 300ms ease-in-out;
    }
    .mcd-menu li:hover > a {
      color: #e67e22;
    }
    .mcd-menu li a.active {
      position: relative;
      color: #e67e22;
      border:0;
      /*border-top: 4px solid #e67e22;
      border-bottom: 4px solid #e67e22;
      margin-top: -4px;*/
      box-shadow: 0 0 5px #DDD;
      -moz-box-shadow: 0 0 5px #DDD;
      -webkit-box-shadow: 0 0 5px #DDD;
      /* == */
      border-left: 4px solid #e67e22;
      border-right: 4px solid #e67e22;
      margin: 0 -4px;
      /* == */
    }
    .mcd-menu li a.active:before {
      content: "";
      position: absolute;
      /*top: 0;
      left: 45%;
      border-top: 5px solid #e67e22;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;*/
      /* == */
      top: 42%;
      left: 0;
      border-left: 5px solid #e67e22;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      /* == */
    }
    /* == */
    .mcd-menu li a.active:after {
      content: "";
      position: absolute;
      top: 42%;
      right: 0;
      border-right: 5px solid #e67e22;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }
    /* == */
    @-webkit-keyframes moveFromTop {
      from {
      opacity: 0;
      -webkit-transform: translateY(200%);
      -moz-transform: translateY(200%);
      -ms-transform: translateY(200%);
      -o-transform: translateY(200%);
      transform: translateY(200%);
      }
      to {
      opacity: 1;
      -webkit-transform: translateY(0%);
      -moz-transform: translateY(0%);
      -ms-transform: translateY(0%);
      -o-transform: translateY(0%);
      transform: translateY(0%);
      }
    }
    @-webkit-keyframes moveFromLeft {
      from {
      opacity: 0;
      -webkit-transform: translateX(200%);
      -moz-transform: translateX(200%);
      -ms-transform: translateX(200%);
      -o-transform: translateX(200%);
      transform: translateX(200%);
      }
      to {
      opacity: 1;
      -webkit-transform: translateX(0%);
      -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
      -o-transform: translateX(0%);
      transform: translateX(0%);
      }
    }
    @-webkit-keyframes moveFromRight {
      from {
      opacity: 0;
      -webkit-transform: translateX(-200%);
      -moz-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      -o-transform: translateX(-200%);
      transform: translateX(-200%);
      }
      to {
      opacity: 1;
      -webkit-transform: translateX(0%);
      -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
      -o-transform: translateX(0%);
      transform: translateX(0%);
      }
    }
     
    .mcd-menu li ul,
    .mcd-menu li ul li ul {
      position: absolute;
      height: auto;
      min-width: 200px;
      padding: 0;
      margin: 0;
      background: #FFF;
      /*border-top: 4px solid #e67e22;*/
      opacity: 0;
      visibility: hidden;
      transition: all 300ms linear;
      -o-transition: all 300ms linear;
      -ms-transition: all 300ms linear;
      -moz-transition: all 300ms linear;
      -webkit-transition: all 300ms linear;
      /*top: 130px;*/
      z-index: 1000;
      /* == */
      left:280px;
      top: 0px;
      border-left: 4px solid #e67e22;
      /* == */
    }
    .mcd-menu li ul:before {
      content: "";
      position: absolute;
      /*top: -8px;
      left: 23%;
      border-bottom: 5px solid #e67e22;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;*/
      /* == */
      top: 25px;
      left: -9px;
      border-right: 5px solid #e67e22;
      border-bottom: 5px solid transparent;
      border-top: 5px solid transparent;
      /* == */
    }
    .mcd-menu li:hover > ul,
    .mcd-menu li ul li:hover > ul {
      display: block;
      opacity: 1;
      visibility: visible;
      /*top: 100px;*/
      /* == */
      left:250px;
      /* == */
    }
    /*.mcd-menu li ul li {
      float: none;
    }*/
    .mcd-menu li ul li a {
      padding: 10px;
      text-align: left;
      border: 0;
      border-bottom: 1px solid #EEE;
      /* == */
      height: auto;
      /* == */
    }
    .mcd-menu li ul li a i {
      font-size: 16px;
      display: inline-block;
      margin: 0 10px 0 0;
    }
    .mcd-menu li ul li ul {
      left: 230px;
      top: 0;
      border: 0;
      border-left: 4px solid #e67e22;
    }
    .mcd-menu li ul li ul:before {
      content: "";
      position: absolute;
      top: 15px;
      /*left: -14px;*/
      /* == */
      left: -9px;
      /* == */
      border-right: 5px solid #e67e22;
      border-bottom: 5px solid transparent;
      border-top: 5px solid transparent;
    }
    .mcd-menu li ul li:hover > ul {
      top: 0px;
      left: 200px;
    }
     
    /*.mcd-menu li.float {
      float: right;
    }*/
    .mcd-menu li a.search {
      /*padding: 29px 20px 30px 10px;*/
      padding: 10px 10px 15px 10px;
      clear: both;
    }
    .mcd-menu li a.search i {
      margin: 0;
      display: inline-block;
      font-size: 18px;
    }
    .mcd-menu li a.search input {
      border: 1px solid #EEE;
      padding: 10px;
      background: #FFF;
      outline: none;
      color: #777;
      /* == */
      width:170px;
      float:left;
      /* == */
    }
    .mcd-menu li a.search button {
      border: 1px solid #e67e22;
      /*padding: 10px;*/
      background: #e67e22;
      outline: none;
      color: #FFF;
      margin-left: -4px;
      /* == */
      float:left;
      padding: 10px 10px 11px 10px;
      /* == */
    }
    .mcd-menu li a.search input:focus {
      border: 1px solid #e67e22;
    }
    .search-mobile {
      display:none !important;
      background:#e67e22;
      border-left:1px solid #e67e22;
      border-radius:0 3px 3px 0;
    }
    .search-mobile i {
      color:#FFF;
      margin:0 !important;
    }
    @media only screen and (min-width: 960px) and (max-width: 1199px) {
      .mcd-menu {
      margin-left:10px;
      }
    }
    @media only screen and (min-width: 768px) and (max-width: 959px) {
      .mcd-menu {
      width: 200px;
      }
      .mcd-menu li a {
      height:30px;
      }
      .mcd-menu li a i {
      font-size: 22px;
      }
      .mcd-menu li a strong {
      font-size: 12px;
      }
      .mcd-menu li a small {
      font-size: 10px;
      }
      .mcd-menu li a.search input {
      width: 120px;
      font-size: 12px;
      }
      .mcd-menu li a.search buton{
      padding: 8px 10px 9px 10px;
      }
      .mcd-menu li > ul {
      min-width:180px;
      }
      .mcd-menu li:hover > ul {
      min-width:180px;
      left:200px;
      }
      .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
      min-width:150px;
      }
      .mcd-menu li ul li:hover > ul {
      left:180px;
      min-width:150px;
      }
      .mcd-menu li ul li ul li:hover > ul {
      left:150px;
      min-width:150px;
      }
      .mcd-menu li ul a {
      font-size:12px;
      }
      .mcd-menu li ul a i {
      font-size:14px;
      }
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
      .mcd-menu {
      width: 50px;
      }
      .mcd-menu li a {
      position: relative;
      padding: 12px 16px;
      height:20px;
      }
      .mcd-menu li a small {
      display: none;
      }
      .mcd-menu li a strong {
      display: none;
      }
      .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
      display:block;
      font-size:10px;
      padding:3px 0;
      position:absolute;
      bottom:0px;
      left:0;
      background:#e67e22;
      color:#FFF;
      min-width:100%;
      text-transform:lowercase;
      font-weight:normal;
      text-align:center;
      }
      .mcd-menu li .search {
      display: none;
      }
      .mcd-menu li > ul {
      min-width:180px;
      left:70px;
      }
      .mcd-menu li:hover > ul {
      min-width:180px;
      left:50px;
      }
      .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
      min-width:150px;
      }
      .mcd-menu li ul li:hover > ul {
      left:180px;
      min-width:150px;
      }
      .mcd-menu li ul li ul li > ul {
      left:35px;
      top: 45px;
      border:0;
      border-top:4px solid #e67e22;
      }
      .mcd-menu li ul li ul li > ul:before {
      left:30px;
      top: -9px;
      border:0;
      border-bottom:5px solid #e67e22;
      border-left:5px solid transparent;
      border-right:5px solid transparent;
      }
      .mcd-menu li ul li ul li:hover > ul {
      left:30px;
      min-width:150px;
      top: 35px;
      }
      .mcd-menu li ul a {
      font-size:12px;
      }
      .mcd-menu li ul a i {
      font-size:14px;
      }
    }
    @media only screen and (max-width: 479px) {
      .mcd-menu {
      width: 50px;
      }
      .mcd-menu li a {
      position: relative;
      padding: 12px 16px;
      height:20px;
      }
      .mcd-menu li a small {
      display: none;
      }
      .mcd-menu li a strong {
      display: none;
      }
      .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
      display:block;
      font-size:10px;
      padding:3px 0;
      position:absolute;
      bottom:0px;
      left:0;
      background:#e67e22;
      color:#FFF;
      min-width:100%;
      text-transform:lowercase;
      font-weight:normal;
      text-align:center;
      }
      .mcd-menu li .search {
      display: none;
      }
      .mcd-menu li > ul {
      min-width:180px;
      left:70px;
      }
      .mcd-menu li:hover > ul {
      min-width:180px;
      left:50px;
      }
      .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
      min-width:150px;
      }
      .mcd-menu li ul li:hover > ul {
      left:180px;
      min-width:150px;
      }
      .mcd-menu li ul li ul li > ul {
      left:35px;
      top: 45px;
      border:0;
      border-top:4px solid #e67e22;
      }
      .mcd-menu li ul li ul li > ul:before {
      left:30px;
      top: -9px;
      border:0;
      border-bottom:5px solid #e67e22;
      border-left:5px solid transparent;
      border-right:5px solid transparent;
      }
      .mcd-menu li ul li ul li:hover > ul {
      left:30px;
      min-width:150px;
      top: 35px;
      }
      .mcd-menu li ul a {
      font-size:12px;
      }
      .mcd-menu li ul a i {
      font-size:14px;
      }
    }

    Кроме этого мы установим позиционирование на странице и окантовку для каждого элемента, код кажется достаточно огромным, но все достаточно просто в работе.

    На этом всё!
    Поделись ссылкой с друзьями:
Демо
Просмотров:
1562
12.04.2014, 21:30
Категория: Разное | Добавил: туссин | Теги: css, Веб-мастеру, разработка сайта, меню сайта
Просмотров: 1562 | Загрузок: 0 | Рейтинг: 5.0/1

Рекомендую к прочтению

Пак из макетов 50 бизнес визиток

Пак из макетов 50 бизнес визиток

 Страница технических работ для uCoz

Страница технических работ для uCoz

Простенькое красивое выпадающие меню на CSS3

Простенькое красивое выпадающие мен...

 Улучшаем функцию Кто Онлайн для uCoz

Улучшаем функцию Кто Онлайн для uCo...

Устанавливаем видео для фона сайта

Устанавливаем видео для фона сайта

 210 шаблонов визиток + 470 векторных иконок

210 шаблонов визиток + 470 векторны...

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
comments powered by HyperComments

Disqus comments

comments powered by Disqus
Гипер-ссылка на источник
HTML
BB-Code
Ссылка

Сообщить о неработающей ссылке

E-mail отправителя *:
Тема *:
Адрес материала *:
Адрес битой ссылки *:
Проверка *:

1
Свернуть
Развернуть чат
Необходима авторизация
0