Автор

06 06.2014
Как создать вертикальное меню для сайта на CSS

Как создать вертикальное меню для сайта на 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%);
 }
}
&nbsp;
.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;
}
&nbsp;
/*.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;
 }
}

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

21 04.2013
Как создать вертикальное меню для сайта на CSS

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


08 02.2017
Как создать вертикальное меню для сайта на CSS

Еще один красивый фон для сайта, и в данном уроке мы рассмотрим еще один замечательный пример реализации объемного фона. Идея состоит в построении сетки из кубиков, которые будут двигаться в бесконечном цикле, при этом постепенно изменяя угол вращение и блика на них, что будет создавать масштабный эффект, такой эффект отлично подойдет для портфолио или заглушки для сайта. Такой фон явно не оставит равнодушным Ваших посетителей.


23 04.2013
Как создать вертикальное меню для сайта на CSS

Галерея всегда отыгрывает весомую роль в дизайне портфолио или фотосайта. Но каждый веб-мастер хочет уникально оформить свой ресурс придав ему эксклюзивности в дизайне. В данном уроке мы рассмотрим процесс создания замечательной карусель-галереи с помощью JQuery.  Эта галерея очень проста и в то же время эффектная. Такую мини галерею на JQuery можно применить у себя на сайте или блоге, для показа последних постов или фото – работ, вообще, где бы Вы ее не применили, она всегда впишется просто замечательно. Вот что у нас с этого получилось..


06 06.2017
Как создать вертикальное меню для сайта на CSS

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close