Автор

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

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

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Красивый фон для сайта всегда трудно подобрать, ведь всегда можно найти что-то лучше, красивая графика или простой оттенок это конечно хорошо, но что делать, если вы не хотите вписываться в эти рамки, а создать нечто более уникальное, к примеру, вам необходимо оформить свое портфолио, но при этом поразить посетителя оригинальностью подхода, тогда вы читаете нужный урок. В данном примере мы рассмотрим построение замечательной анимации для сайта с помощью js. Ранее мы уже не однократно приводили примеры различной анимации.


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

Слайдер с различными эффектами переходов (7 различных эффектов, в том числе 3D). Адаптер представляет собой легкий контент-слайдер, простой интерфейс для разработчиков и создания 2D или 3D слайд анимации переходов.
Добавлена поддержка 3D для webkit и Mozilla, всех других браузерах будет запасной вариант изящно простой fade перехода при использовании 3D-эффекты.
Все 2D переходы между слайдами были протестированы в IE6+, и всех других современных браузерах.


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

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


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

В данном уроке мы рассмотрим слайдер изображений с анимированными подписи, отзывчивым интерфейсом и HTML элементами, как видео, IFrame и регулятора. При этом легко добавить неограниченное количество слайдов и заголовков. Используйте его в качестве слайдера изображений, галереи фотографий, ротатора для баннерной рекламы, или даже презентации. Чтобы существенно сократить время загрузки страницы, предварительная загрузка доступна для каждого слайдера, так что изображение будут загружаться постепенно.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close