Yamm3 - адаптивное Bootstrap мегаменю

yamm3 menu



Легкий и чистый CSS, использует стандартную NavBar разметку и ликвидные системные классы сетки из Bootstrap 3.

Работа для фиксированной и гибкой планировки и имеет возможность включать любые элементы Bootstrap:

панели навигации, картинки, аккордеона, список, сетки, таблицы, формы.



Сетка Bootstrap внутри меню Yamm3


yamm3 menu grid



Accordion внутри меню Yamm3


yamm3 accordion

 


Классическое меню

 

yamm3 menu

 


Меню с картинками

 

yamm3 menu

 


Yamm3 меню адаптированно под все гаджеты с разными разрешениями экрана.
Настройка происходитом фреймворком Bootstrap3 автоматически.


Установка и подключение Yamm3


Для начала необходимо подключение. Подключаем CSS стили в секции Head сайта:

<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/yamm.css" rel="stylesheet">
</head>
 
Далее подключаем библиотеки Query и Bootstrap в раздел Head или Body:
 
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

 

Есть дополнительный JavaScript-код используется для предотвращения неожиданного закрыт в меню некоторых компонентов, таких как аккордеон, формы и др. Просто включите следующий код в вашу голову или тело раздел:

<script> 
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()})
</
script>

 

* Будьте внимательны: используется библиотека Bootstrap3 и jQuery, версией старше 1.9.0+

 


Yamm3 - разметка в HTML файле


Для базового использования необходимо добавить .yamm класс в верхней части навигационной панели разметки.Затем  добавить свои меню в разметке .dropdown-menu класса.Вы так-же можете использовать .yamm-content как опцию обертки контента с padding'ом.


Ниже приведен простой пример.

<nav class="navbar yamm navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
<!-- Контент меню -->
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>

 

Для примера, давайте попробуем добавить аккордеон меню внутри нашей разметки меню. Вызываем #id accordion и используем класс .panel-group  для группировки. 

Вставляем  вместо комментария <!-- Контент меню -->  следующий код:

 <div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Accordion 1</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">Развернутый текст Accordion 1</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Accordion 2</a></h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">Развернутый текст Accordion 2</div>
        </div>
    </div>
</div>

 

Есть много других компонентов (таблицы, акции, формы), которые можно добавить в навигационную панель. Изучение и применение этих компонентов можно реализовать самостоятельно.


Вам нужно скачать полный архив Yamm3 с офицального сайта и открыть index.html файл редактором кода.



 

yamm3 menu

ОФИЦАЛЬНАЯ страничка с примерами

РЕПОЗИТОРИЙ на GitHub 

 



Скажите спасибо - поделитесь:

 




Комментарии (0)