Боковая фиксированная панель на CSS
 | |
| Это фиксированная панель под навигацию, которая создана на CSS. Что будет установлена с левой стороны на шрифтовых иконках. Где вы можете поставить тематическую кнопку, что при наведение появятся категорий под нее. Ее можно применять для различных функций, это как выставить обратную связь или разбить на разделы, что по кнопкам можно будет понять, какие категорий в каких разделах находятся. Можно разместить самую актуальную на нем информацию, так как оно будет показывать на всех страницах, если поместить код в низ сайта. Если хотите, чтоб оно было на какой то одной странице, то делаем его под операторы, что только на той станице можно будет визуально наблюдать, которую вы укажите. Чтоб понимали как на сайте будет смотреться, то как пример фиксированная панель, что ранее размещал на сайте, но на этом безусловно больше можно возможностей сделать в плане навигаций на интернет ресурсе. Здесь нужно будет подключить кнопки от Font Awesome, если у вас уже подключены, то вам останется только установить код и стили, если на сайте нет, то вверх сайта ставим стиль, что после установки нужно почистить кэш браузера, если не появятся. Это в них сайта в самый вверх ставим. Код <nav id="sidebar-menu"> <ul> <li> <i class="fa fa-user"></i> <b class="fa fa-caret-left"></b> <ul> <li><a href="">Здесь надпись под ссылку на переход</a></li> <li><a href="">Здесь надпись под ссылку на переход</a></li> <li><a href="">Здесь надпись под ссылку на переход</a></li> </ul> </li> <li> <i class="fa fa-cog"></i> <b class="fa fa-caret-left"></b> <ul> <li><a href="">Сайт zornet.ru</a></li> <li><a href="">Сайт zornet.ru скрипты</a></li> <li><a href="">Сайт zornet.ru шаблоны</a></li> </ul> </li> <li> <i class="fa fa-life-ring"></i> <b class="fa fa-caret-left"></b> <ul> <li><a href="">Переход по ссылке</a></li> <li><a href="">Переход по ссылке</a></li> <li><a href="">Переход по ссылке</a></li> </ul> </li> </ul> </nav> CSS: Код #sidebar-menu { position: fixed; /* фиксируем наше меню */ top: 200px; /* положение меню относительно верхнего края браузера */ left: 0; /* прилипили меню к левому краю */ padding: 10px; background: #323A45; color: #FFF; border-radius: 0 8px 8px 0; } #sidebar-menu li { position: relative; cursor: pointer; list-style: none; } #sidebar-menu li i { /* Задаем иконкам фиксированный размер, height и line-height должны быть одинаковыми */ width: 27px; height: 27px; line-height: 27px; border-radius: 4px; background: #3CB7E7; text-align: center; } #sidebar-menu li+li {margin-top: 4px;} #sidebar-menu b { display: none; position: absolute; /* позиция относительно левого края равна ширине эл-та li */ left: 27px; top: 0; height: 27px; /* ширина равна зазору между блоком меню и подменю */ width: 16px; line-height: 27px; background: transparent; color: #323A45; /* саму иконку позиционируем вправо, чтобы визуально она смотрелась вместе с блоком подменю */ text-align: right; } #sidebar-menu li > ul { display: none; position: absolute; top: -10px; left: 42px; width: 120px; padding: 10px; background: #323A45; border-radius: 8px; } #sidebar-menu li:hover b, #sidebar-menu li:hover ul {display: block;} #sidebar-menu li a { display: block; padding: 4px 8px; border-radius: 4px; color: #FFF; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; } #sidebar-menu li a:hover { display: block; background: #3CB7E7; } #sidebar-menu ul {-webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0;} Как из название можно понять, что дизайн полностью создан на CSS, то если оттенок цвета вам нужно сменить, то все это делается просто в стилях, так как возможно у кого то по стилистике цвета не подходит, то в стилях выставляем на свой. Источник: d-melochi.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
