|
||
КУРОРТ У МОРЯ |
|
Offcanvas bootstrap: изучаем новый инструмент для создания менюОпубликовано: 16.04.2018 Приветствую всех, кто читает данную статью! Сегодня мы разберем с вами как с помощью пользовательского компонента Offcanvas Bootstrap создать удобное и нестандартное меню для мобильных устройств. Я расскажу вам, что это за шаблон, опишу его основные инструменты работы, предоставлю полезные ссылки для подробного изучения технологии и конечно же предоставлю конкретные примеры программного кода. Приступим же! Знакомство с Offcanvas menuOffcanvas menu разрабатывал Phil Hughes (более известный под логином iamphill) и пару лет назад выложил проект в своем профиле на GitHub. Найти его можно по ссылке [urlspan]https://github.com/iamphill/Bootstrap-Offcanvas[/urlspan]. Там же создатель разместил и документацию с подробным описанием технологии на английском языке. Благодаря изучаемому шаблону на вашем сайте под смартфоны можно разместить очень простое и легко реализуемое навигационное меню, работающее через Bootstrap 3 . Программный код компонента базируется на конструкции объявления встроенной в фреймворк навигационной панели, т.е. на Navigation Bar . Однако к ней добавляются специальные классы, определяющие, что в данном случае используется offcanvas. Установка компонентаДля использования изучаемого пользовательского шаблона, необходимо выполнить несколько действий: Скачать с указанной ссылки установочный пакет; Распаковать файлы в одну папку; Среди всех документов найти bootstrap.offcanvas.min.css и bootstrap.offcanvas.min.js и скопировать их в соответствующие каталоги вашего проекта; В хедере html-файла необходимо вставить следующие скрипты:<link rel="stylesheet" href="путь_к_нужной_папке/bootstrap.offcanvas.min.css"> |
|
|
(c)
Bartosh Dmitriy
22.05.2001
|