Создаём административную панель на Bootstrap, CSS(LESS) и JavaScript. #3

2
9899

Всем привет! Продолжим создавать административную панель на Bootstrap, CSS и JavaScript.

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

 

<div class="navbar-toggle"><i class="fa fa-bars"></i></div> , это иконка, которая будет появляться, когда разрешение экрана устройства, на котором отображается сайт, будет как у планшета, а панель с меню не будет отображаться. Данная иконка будет раскрывать список меню. Самым главным элементом этой разметки является блок с классом .sidebar-logo, который мы опишем через правила CSS для отображения логотипа. Напишем ряд правил для этого класса и ссылки внутри его в файле main-content.less :

Изображение, использованное в качестве логотипа:

 

Ссылку внутри .sidebar-logo мы сделали абсолютно позиционированной, чтобы она покрывала всё свободное место, заданное в .sidebar-logo.

Меню навигации

Теперь создадим меню навигации, первым делом, сделаем разметку:

и добавим правила CSS в файл main-content.less:

В данных правилах CSS нет ничего сложного, установили нужные внешние и внутренние отступы, описали псевдоселектор :hover, описали активный пункт меню, поставили рамки и скорректировали по дизайну. В результате получили следующее:

 


Заключение

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

2 КОММЕНТАРИИ

  1. […] В третьем уроке мы создали область с логотипом и приступили к первому этапу создания пользовательской навигации, созданием которой мы займемся в этом уроке. […]

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя