Совсем недавно известный гигант Гугл недавно обновил свой ресурс Гугл Плей, внимание специалистов привлекло новое многоуровневое меню для навигации, подробнее узнать можете посетив аккаунт разработчика google play. Прекрасный плавный переход, качественная анимация – вот что привлекло пользователей, собственно это и вдохновило на идею создать похожее меню при помощи html, CSS, jQuery.
Для демо версии решено использовать веб-шрифт Elusive Icons. Этот шрифт был разработан одним из пользователей ресурса GitHub, однако работа с ним подразумевает включение в работу библиотеки jQuery. В общем-то, html код прост для любого из специалиста, и написать его не составит особого труда. В коде есть ссылка по умолчанию на ярлык Home, которая будет помогать возвращаться к основному уровню меню. Однако ссылка не будет работать, если пользователь уже находится на основном навигационном уровне, именно поэтому html код включает в себя символ «#».
Ссылку ни в коем случае нельзя изменять и удалять, так как она является очень важным элементом всего кода и помогает вернуться в начало меню. Вторая ссылка в коде, и все что за ней, это ссылка для отправки на следующий уровень навигации. Тег «div», который является одним из элементов кода, помогает скрыть некоторые элементы навигации, и выявляет их тогда. Когда пользователь кликнет по нему. Внутри этого элемента находится другой тег «back», который помогает в случае надобности вернуться на предыдущий уровень навигации, либо с его помощью можно переместиться на остальные части единым кликом. В целом в код необходимо добавить еще несколько тегов, который помогут полноправно использовать навигационное меню.
Следующая часть рабочего процесса – это CSS-код, его можно свободно отредактировать. Js-часть отредактировать намного сложнее. В целом можно переместить все функции под тег «клик», тогда основной уровень меню будет скрыт, и покажет пользователю следующий пункт. Вторая часть Js-код, используют для того, чтобы прикрепить к нему все кнопки возврата во втором уровне меню. Как только курсор мыши наводится на, основная часть меню отображается поверх второго уровня меню. На словах это значительно проще, чем на самом деле. Ведь каждую ссылку нужно проработать, и понимать, как каждая ссылка будет действовать по отдельности.
Похожие статьи:
Библиотека → Молчи, собака!
