Делаем меню как в nexus

Всем привет! Все видели меню на Nexus 7? Думаю, что да. Если честно, у меня у самого такой) Вот и захотелось воссоздать подобное меню на сайте. В демонстрации вы сможете увидеть наглядный пример работы скрипта. Изначально можно увидеть переключатель слева сверху, после наведения на него курсора видно иконки меню. После клика по переключателю или же после наведения на иконки внутреннего меню, становится доступным полноформатное меню. И так начнем!

HTML

Каркас меню будет примерно таким ("примерно" потому, что можно добавлять еще пункты которые будут в верхней части):

<ul id="gn-menu" class="gn-menu-main">
    <li class="gn-trigger">
        <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
        <nav class="gn-menu-wrapper">
			<div class="gn-scroller">
				<ul class="gn-menu">
					<li class="gn-search-item">
						<input placeholder="Поиск..." type="search" class="gn-search">
						<a class="gn-icon gn-icon-search"><span>Поиск</span></a>
					</li>
					<li>
						<a class="gn-icon gn-icon-download">Загрузки</a>
						<ul class="gn-submenu">
							<li><a class="gn-icon gn-icon-illustrator">Векторная графика</a></li>
							<li><a class="gn-icon gn-icon-photoshop">Photoshop файлы</a></li>
						</ul>
					</li>
					<li><a class="gn-icon gn-icon-cog">Настройки</a></li>
					<li><a class="gn-icon gn-icon-help">Помощь</a></li>
					<li>
						<a class="gn-icon gn-icon-archive">Архивы</a>
						<ul class="gn-submenu">
							<li><a class="gn-icon gn-icon-article">Статьи</a></li>
							<li><a class="gn-icon gn-icon-pictures">Изображения</a></li>
							<li><a class="gn-icon gn-icon-videos">Видео</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</nav>
    </li>
</ul>

CSS

Задаем свойства всем спискам.

.gn-menu-main,
.gn-menu-main ul {
    margin: 0;
    padding: 0;
    background: white;
    color: #5f6f81;
    list-style: none;
    text-transform: none;
    font-weight: 300;
    font-family: 'Lato', Arial, sans-serif;
    line-height: 60px;
}

Задаем свойства для главного списка:

.gn-menu-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    font-size: 13px;
}

Задаем стили ссылок меню:

.gn-menu-main a {
    display: block;
    height: 100%;
    color: #5f6f81;
    text-decoration: none;
    cursor: pointer;
}

Изменения цвета ссылок и полей при наведении:

.no-touch .gn-menu-main a:hover,
.no-touch .gn-menu li.gn-search-item:hover,
.no-touch .gn-menu li.gn-search-item:hover a {
    background: #5f6f81;
    color: white;
}

Стили для переключателя:

.gn-menu-main li.gn-trigger {
    position: relative;
    width: 60px;
    user-select: none;
}

Скрываем изначально меню и показываем его только при наведении на переключатель:

.gn-menu-wrapper {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 60px;
    border-top: 1px solid #c6d0da;
    background: white;
    transform: translateX(-60px);
    transition: transform 0.3s, width 0.3s;
}
 
.gn-scroller {
    position: absolute;
    overflow-y: scroll;
    width: 370px;
    height: 100%;
}
 
.gn-menu {
    border-bottom: 1px solid #c6d0da;
    text-align: left;
    font-size: 18px;
}

Задаем свойства для элемента "Поиск":

input.gn-search {
    position: relative;
    z-index: 10;
    padding-left: 60px;
    outline: none;
    border: none;
    background: transparent;
    color: #5f6f81;
    font-weight: 300;
    font-family: Arial, sans-serif;
    cursor: pointer;
}
 
.gn-search::-webkit-input-placeholder {
    color: #5f6f81
}
 
.gn-search:-moz-placeholder {
    color: #5f6f81
}
 
.gn-search::-moz-placeholder {
    color: #5f6f81
}
 
.gn-search:-ms-input-placeholder {
    color: #5f6f81
}

Свойства для атрибута placeholder:

.gn-search:focus::-webkit-input-placeholder,
.no-touch .gn-menu li.gn-search-item:hover .gn-search:focus::-webkit-input-placeholder {
    color: transparent
}
 
input.gn-search:focus {
    cursor: text
}
 
.no-touch .gn-menu li.gn-search-item:hover .gn-search::-webkit-input-placeholder {
    color: white
}
 
.no-touch .gn-menu li.gn-search-item:hover .gn-search:-moz-placeholder {
    color: white
}
 
.no-touch .gn-menu li.gn-search-item:hover .gn-search::-moz-placeholder {
    color: white
}
 
.no-touch .gn-menu li.gn-search-item:hover .gn-search:-ms-input-placeholder {
    color: white
}

Javascript

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

<script>
    new gnMenu( document.getElementById( 'gn-menu' ) );
</script>

Итог

Вот таким вот не хитрым образом мы сделали меню как в nexus. Всем добра!)