Автор

14 05.2013
Вертикальное фиксированное меню для сайта

Вертикальное фиксированное меню для сайта


 

В последнее время стали весьма популярны неординарные решения к построению сайта, зачастую веб-мастера стали отказываться от привычного построения ресурса и разрабатывать новые концепции верстки. Большое влияние на современный веб дизайн оказал дизайн metro ui который покорил своим минимализмом и простотой решений, что дизайнеры принялись разрабатывать сайты под данный интерфейс. В данном уроке мы рассмотрим как создать фиксированное вертикальное меню в стиле metro ui.

 

ДЕМО
ИСХОДНИКИ

 

Основная идея состоит в том, что меню зафиксировано в левой стороне сайта, и состоит только из иконок, заключенные в небольшой стилизованный контейнер. Кроме этого мы не забываем об адаптации для различных разрешений экрана.  Шрифт и значки, были созданы IcoMoon, а иконки разработал Matthew Skiles.

Шаг 1. HTML

У нас будут ui и li к которым будут присвоенные классы, разделяющие навигацию на несколько сегментов.

<ul class="cbp-vimenu">
 <li><a href="#" class="icon-logo">Лого</a></li>
 <li><a href="#" class="icon-archive">Файлы</a></li>
 <li><a href="#" class="icon-search">Поиск</a></li>
 <li><a href="#" class="icon-pencil">Редактор</a></li>
 <!-- Если нужно установить активную вкладку:
 <li class="cbp-vicurrent"><a href="#" class="icon-pencil">Редактор</a></li>
 -->
 <li><a href="#" class="icon-location">Навигация</a></li>
 <li><a href="#" class="icon-images">Изображения</a></li>
 <li><a href="#" class="icon-download">Загрузки</a></li>
 </ul>

Кроме этого присутствует возможность подсветки активной вкладки.

Шаг 2. CSS

Несмотря что стили достаточно объемные на самом деле все просто, нам необходимо подключить шрифты и SVG графику, и установить фиксированное значение для навигационной панели. Также мы устанавливаем градиентную заливку для активного элемента и трансформацию перехода в 0.1s.

@font-face {
 font-family: 'ecoico';
 src:url('../fonts/ecoico.eot');
 src:url('../fonts/ecoico.eot?#iefix') format('embedded-opentype'),
 url('../fonts/ecoico.woff') format('woff'),
 url('../fonts/ecoico.ttf') format('truetype'),
 url('../fonts/ecoico.svg#ecoico') format('svg');
 font-weight: normal;
 font-style: normal;
}

.cbp-vimenu {
 position: fixed;
 overflow: hidden;
 top: 0;
 left: 0;
 height: 100%;
 list-style-type: none;
 margin: 0;
 padding: 0;
 background: #f7f7f7;
}

.cbp-vimenu li a {
 display: block;
 text-indent: -500em;
 height: 5em;
 width: 5em;
 line-height: 5em;
 text-align: center;
 color: #999;
 position: relative;
 border-bottom: 1px solid rgba(0,0,0,0.05);
 -webkit-transition: background 0.1s ease-in-out;
 -moz-transition: background 0.1s ease-in-out;
 transition: background 0.1s ease-in-out;
}

.cbp-vimenu li a:hover,
.cbp-vimenu li:first-child a{
 background: #47a3da;
 color: #fff;
}

/* класс активного элемента */
.cbp-vimenu li.cbp-vicurrent a {
 background: #fff;
 color: #47a3da;
}

.cbp-vimenu li a:before {
 font-family: 'ecoico';
 speak: none;
 font-style: normal;
 font-weight: normal;
 text-indent: 0em;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 font-size: 1.4em;
 -webkit-font-smoothing: antialiased;
}

.cbp-vimenu li a.icon-logo:before {
 content: "C";
 font-weight: 700;
 font-size: 300%;
 font-family: 'Lato', Calibri, Arial, sans-serif;
}

.icon-search:before {
 content: "\e004";
}

.icon-archive:before {
 content: "\e005";
}

.icon-download:before {
 content: "\e006";
}

.icon-location:before {
 content: "\e007";
}

.icon-images:before {
 content: "\e009";
}

.icon-pencil:before {
 content: "\e008";
}

/* Пример изменения меню для небольших экранов (зависит от общей высоты меню) */
@media screen and (max-height: 34.9375em) {

 .cbp-vimenu {
 font-size: 70%;
 }

}

Обратите внимание, что мы добавили медиа-запросы для трансформации панели в зависимости от высоты активного окна.

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

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


vk.com/club.ssdru

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


Статьи по темеdiv верстка сайта

12 05.2017
Вертикальное фиксированное меню для сайта

Удобная и легко настраиваемая навигация для мегасайтов, обогащенная тонкой анимацией CSS и поддержкой устройств с отключенным javascript.


05 04.2013
Вертикальное фиксированное меню для сайта

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


20 09.2013
Вертикальное фиксированное меню для сайта

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


25 08.2017
Вертикальное фиксированное меню для сайта

Эффект погружения, основанный на масках изображений и CSS-преобразованиях.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close