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

2
7795

Добро пожаловать в 4-й урок, как и было обещано мы будем создавать многоуровневую навигацию, верхнее меню и пользовательскую панель.

Продолжая серию уроков по созданию административной панели используя Bootstrap, CSS и препроцессор LESS, а также JavaScript, давайте вспомним какие уроки мы уже прошли и что мы сделали.

  1. Первый урок был вводным, в нем мы определились с инструментами для создания будущей панели, а также подготовили рабочее пространство —  скачали нужные библиотеки, стили и определили расположение этих файлов в рабочей папке. Был представлен прототип админки и цветовая палитра.
  2. Во втором уроке мы начали реализовывать нашу административную панель — написали базовую разметку, установили базовые LESS переменные с основными цветовыми палитрами и установили базовые CSS правила для основных html тегов.
  3. В третьем уроке мы создали область с логотипом и приступили к первому этапу создания пользовательской навигации, созданием которой мы займемся в этом уроке.

Создаем пользовательскую панель

Пользовательская панель представляет из себя блок, где размещена небольшая информация о текущем пользователе — имя пользователя, аватар и некоторая информация о статусе.

Пользовательская панель будет размещена ниже логотипа. Выглядеть будет так:

Сделаем разметку между блоками sidebar-logo и left-navigation:

Я буду использовать вот эту аватарку:

Создадим еще один less файл в папке blocks, дадим ему название user-panel.less и сразу пропишем этот файл в файле style.less@import "blocks/user-panel.less";

Теперь будем писать правила для пользовательской панели в файле user-panel.less и они будут работать:

В результате получилось следующее, dropdown меню открывается при клике:

Чуть позже на Javascript мы напишем выбор состояния, а пока выбрать статус нельзя.

Создаем многоуровневое меню

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

То получим:

Добавим стили для элементов подменю, чтобы в дальнейшем уже скрыть их и показывать при клике на основной элемент меню. Открываем файл main-content.less и пишем:

Пока что мы закоментировали display: none;, позже уберем комментарий. В одном из вышеописанных правил есть строка content: "\f105"; это псевдокод иконки со стрелочкой вниз, который я взял с сайта FontAwesome, эта стрелочка будет означать что меню не открыто, когда меню будет открыто, стрелочка плавно повернется вправо.

Заходим в файл index.html и каждому элементу у которого будет подменю приписываем класс parent, в дальнейшем, с помощью javascript, мы будем добавлять этот класс всем элементам у которых будет подменю автоматически:

После применения правил CSS мы получили следующее:

Допилим многоуровневое меню через JavaScirpt

Пора сделать это меню красивее, в папке js создаем папку main, в ней создаем файл main.js, в котором мы пропишем наш скрипт. Не забудьте подключить этот файл внизу index.html, прописав <script src="js/main/main.js"></script>
Чтобы многоуровневое меню было более элегантным и «правильным», нам необходимо динамически прописывать каждому элементу меню внутри которого есть подменю класс parent и динамически изменять состояние через класс open. Ранее мы закоментировали строчку display: none;, уберите два слэша, пускай меню не будет видно. В файле main.js пишем:

Готово! Посмотрим что получилось, меню плавно открывается, стрелочка меняет положение, если подменю имеет класс active, то оно автоматически открыто при просмотре страницы, можете проверить. Вот так JavaScript помогает нам в разработке. Результат:

Раз мы создали наш файл javascript, давайте сразу же исправим проблему с статусом пользователя, сейчас работает только «Available», сделаем так, чтобы можно было выбирать статус из всплывающего окна. Открываем файл main.js и пишем там:

Теперь можно менять статус:

Немного про верхний сайдбар

В верхнем сайдбаре предполагается использовать некоторые хоткеи — элементы для быстрого доступа к чему либо. В этом (четвертом) уроке мы создадим один такой элемент, это пользовательское всплывающее меню с ссылками. Открываем файл index.html, находим наш блок с id top-nav и дописываем в нём следующее:

В папке css/blocks создаем файл top-nav.less, подключаем его в файле style.less и пишем внутри правила для верхней панели:

Вот картинка с хвостиком для меню, которую я сделал в photoshop’e, положите её в папку images. В результате получилось следующее:

Заключение

Следующий 5й урок по созданию административной панели на bootstrap&less.

Как и обещал, урок получился маштабным, сделали очень много. У нас получилась неплохая пользовательская панель и в левой навигации и верхнем баре, а также многоуровневое меню и смена статуса присутствия. Если у Вас возникли вопросы или есть пожелания можете задавать/оставлять их в комментариях ниже или в группе vkontakte. Вступайте в группу, так вы быстрее узнаете о выходе новой серии уроков. Спасибо за внимание!

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

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

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