<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="http://bootstraptema.ru/snippets/menu/menu-generator/style.css">
<script src="http://bootstraptema.ru/snippets/menu/menu-generator/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<style id="tbstyles"></style>
<div class="main-wrapper">
<div class="container">
<div class="col-sm-12 col-md-12">
<h2 class="text-center"><a href="http://bootstraptema.ru/stuff/snippets_bootstrap/generators/generator_menju_bootstrap_3/19-1-0-1556" target="_blank">BootstrapTema</a></h2>
</div>
</div>
<div class="container nopadding">
<div class="col-md-8 nopadding example-wrapper">
<div class="builder-heading">
<div id="expand" class="btn-toolbar pull-right visible-md visible-lg" role="toolbar">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default" title="Изменить вид">
<i class="glyphicon glyphicon-resize-full">
</i>
</button>
</div>
</div>
<div id="example-tabs" class="btn-group btn-group-sm pull-right">
<button type="button" data-rel="example-builder" class="btn btn-default active" title="Редактировать настройки">Редактор
</button>
<button type="button" data-rel="example-preview" class="btn btn-default open-lightbox" title="Смотреть результат">Смотреть
</button>
<button type="button" data-rel="example-html" class="btn btn-default" title="HTML код для установки">HTML
</button>
<button type="button" data-rel="example-css" class="btn btn-default" title="CSS стили для установки">CSS
</button>
</div>
</div>
<div class="example">
<div id="example-builder" class="example-source active">
<i class="fa fa-spinner fa-spin">
</i> Загрузка...
</div>
<div id="example-html" class="example-source">
<pre style="border: none; margin: 0;">HTML код
</pre>
</div>
<div id="example-css" class="example-source">
<pre style="border: none; margin: 0;">CSS стили
</pre>
</div>
</div>
</div>
<div class="col-md-4 nopadding builder-wrapper">
<div class="builder-heading">
<div id="builder-tabs" class="btn-group btn-group-sm pull-right">
<button type="button" data-rel="menu-styles" class="btn btn-default active" title="Настроить стили">Стили
</button>
<button type="button" data-rel="menu-items" class="btn btn-default" title="Настроить пункты">Пункты
</button>
<button type="button" data-rel="menu-extras" class="btn btn-default" title="Дополнительные настройки">Разное
</button>
</div>
</div>
<div class="panel-group accordion active" id="menu-styles">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#menu-styles" href="#background-styles">Стили фона
</a>
</h4>
</div>
<div id="background-styles" class="panel-collapse collapse in">
<div class="panel-body">
<div class="form-group">
<label for="bgcolor">Цвет фона
</label>
<div class="input-group">
<input type="text" id="bgcolor" class="form-control color-picker" value="#f8f8f8" data-default-value="#f8f8f8" data-rgba="rgba(248, 248, 248, 1)">
</div>
</div>
<div class="form-group">
<label>
<input type="checkbox" value="gradient" id="bggradient" class="gradient" data-rel="gradient"> Добавить градиент
</label>
</div>
<div class="form-group" id="gradient" style="display: none;">
<label for="bggradientcolor">Цвет градиента
</label>
<div class="input-group">
<input type="text" id="bggradientcolor" class="form-control color-picker" value="#f8f8f8" data-default-value="#f8f8f8" data-rgba="rgba(248, 248, 248, 1)">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#menu-styles" href="#default-styles">Базовые стили
</a>
</h4>
</div>
<div id="default-styles" class="panel-collapse collapse">
<div class="panel-body">
<div class="form-group">
<label for="defaultbgcolor">Цвет фона
</label>
<div class="input-group">
<input type="text" id="defaultbgcolor" class="form-control color-picker" value="#f8f8f8" data-default-value="#f8f8f8" data-rgba="rgba(248, 248, 248, 0)">
</div>
</div>
<div class="form-group">
<label>
<input type="checkbox" value="gradient" id="defaultbggradient" class="gradient" data-rel="defaultgradient"> Добавить градиент
</label>
</div>
<div class="form-group" id="defaultgradient" style="display: none;">
<label for="defaultbggradientcolor">Цвет градиента
</label>
<div class="input-group">
<input type="text" id="defaultbggradientcolor" class="form-control color-picker" value="#f8f8f8" data-default-value="#f8f8f8" data-rgba="rgba(248, 248, 248, 0)">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#menu-styles" href="#hover-styles">Стили наведения
</a>
</h4>
</div>
<div id="hover-styles" class="panel-collapse collapse">
<div class="panel-body">
<div class="form-group">
<label for="hoverbgcolor">Цвет фона
</label>
<div class="input-group">
<input type="text" id="hoverbgcolor" class="form-control color-picker" value="#f8f8f8" data-default-value="#f8f8f8" data-rgba="rgba(248, 248, 248, 0)">
</div>
</div>
<div class="form-group">
<label>
<input type="checkbox" value="gradient" id="hoverbggradient" class="gradient" data-rel="hovergradient"> Добавить градиент
</label>
</div>
<div class="form-group" id="hovergradient" style="display: none;">
<label for="hoverbggradientcolor">Цвет градиента
</label>
<div class="input-group">
<input type="text" id="hoverbggradientcolor" class="form-control color-picker" value="#f8f8f8" data-default-value="#f8f8f8" data-rgba="rgba(248, 248, 248, 0)">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#menu-styles" href="#active-styles">Стили активности
</a>
</h4>
</div>
<div id="active-styles" class="panel-collapse collapse">
<div class="panel-body">
<div class="form-group">
<label for="activebgcolor">Цвет фона
</label>
<div class="input-group">
<input type="text" id="activebgcolor" class="form-control color-picker" value="#e7e7e7" data-default-value="#e7e7e7" data-rgba="rgba(231, 231, 231, 1)">
</div>
</div>
<div class="form-group">
<label>
<input type="checkbox" value="gradient" id="activebggradient" class="gradient" data-rel="activegradient"> Добавить градиент
</label>
</div>
<div class="form-group" id="activegradient" style="display: none;">
<label for="activebggradientcolor">Цвет градиента
</label>
<div class="input-group">
<input type="text" id="activebggradientcolor" class="form-control color-picker" value="#e7e7e7" data-default-value="#e7e7e7" data-rgba="rgba(231, 231, 231, 1)">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#menu-styles" href="#font-styles">Стили шрифта
</a>
</h4>
</div>
<div id="font-styles" class="panel-collapse collapse">
<div class="panel-body">
<div class="form-group">
<label for="brandcolor">Цвет названия
</label>
<div class="input-group">
<input type="text" id="brandcolor" class="form-control color-picker" value="#777777" data-default-value="#777777" data-rgba="rgba(119, 119, 119, 1)">
</div>
</div>
<div class="form-group">
<label for="fontcolor">Цвет шрифта
</label>
<div class="input-group">
<input type="text" id="fontcolor" class="form-control color-picker" value="#777777" data-default-value="#777777" data-rgba="rgba(119, 119, 119, 1)">
</div>
</div>
<div class="form-group">
<label for="hoverfontcolor">Цвет шрифта при наведении
</label>
<div class="input-group">
<input type="text" id="hoverfontcolor" class="form-control color-picker" value="#333333" data-default-value="#333333" data-rgba="rgba(51, 51, 51, 1)">
</div>
</div>
<div class="form-group">
<label for="activefontcolor">Цвет шрифта при активности
</label>
<div class="input-group">
<input type="text" id="activefontcolor" class="form-control color-picker" value="#555555" data-default-value="#555555" data-rgba="rgba(85, 85, 85, 1)">
</div>
</div>
<div class="form-group">
<label>Размер шрифта
</label>
<input type="text" id="fontsize" class="ui-slider-value" readonly="readonly" data-min="12" data-max="48" value="14">px
</div>
<div class="form-group">
<label>Русские шрифты
</label>
<a href="http://rus-shrift.ru/blog" target="_blank" class="btn btn-sm btn-success">Скачать Русские шрифты</a>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#menu-styles" href="#border-styles">Стили границ
</a>
</h4>
</div>
<div id="border-styles" class="panel-collapse collapse">
<div class="panel-body last">
<div class="form-group">
<label>Ширина границ
</label>
<input type="text" id="brwidth" class="ui-slider-value" readonly="readonly" data-min="0" data-max="10" value="1">px
</div>
<div class="form-group">
<label>Округлость границ
</label>
<input type="text" id="brradius" class="ui-slider-value" readonly="readonly" data-min="0" data-max="50" value="4">px
</div>
</div>
</div>
</div>
</div>
<div class="panel-group accordion" id="menu-items">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-parent="#builder-elements" href="#menu-item-builder" class="link-disabled">Пункты меню
</a>
</h4>
</div>
<div id="menu-item-builder" class="panel-collapse collapse in">
<div class="panel-body last">
<form class="form-inline" id="add-menu-item" role="form">
<div class="form-group">
<label for="mlabel" class="sr-only">Название
</label>
<input type="text" id="mlabel" class="form-control input-sm" placeholder="Впишите название" tabindex="1">
</div>
<div class="form-group">
<label for="murl" class="sr-only">Адрес
</label>
<input type="text" id="murl" class="form-control input-sm" placeholder="Впишите адрес" tabindex="2">
</div>
<button type="submit" class="btn btn-default btn-sm" tabindex="4">
<i class="glyphicon glyphicon-plus">
</i>
</button>
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" id="mtarget" value="_blank" tabindex="3"> Открыть ссылку в новом окне
</label>
</div>
</form>
<div id="menu-list" class="dd">
<ol class="dd-list">
<li class="dd-item" data-label="Главная" data-url="/" data-target="">
<div class="dd-handle dd3-handle">
</div>
<div class="dd3-content">Главная
<a href="#" class="remove-menu-item">
<i class="glyphicon glyphicon-remove">
</i>
</a>
</div>
</li>
<li class="dd-item" data-label="Продукт" data-url="/products" data-target="">
<div class="dd-handle dd3-handle">
</div>
<div class="dd3-content">Продукт
<a href="#" class="remove-menu-item">
<i class="glyphicon glyphicon-remove">
</i>
</a>
</div>
</li>
<li class="dd-item" data-label="О сайте" data-url="/about-us" data-target="">
<div class="dd-handle dd3-handle">
</div>
<div class="dd3-content">О сайте
<a href="#" class="remove-menu-item">
<i class="glyphicon glyphicon-remove">
</i>
</a>
</div>
</li>
<li class="dd-item" data-label="Контакты" data-url="/contact" data-target="">
<div class="dd-handle dd3-handle">
</div>
<div class="dd3-content">Контакты
<a href="#" class="remove-menu-item">
<i class="glyphicon glyphicon-remove">
</i>
</a>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="panel-group accordion" id="menu-extras">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-parent="#menu-extras" href="#extra" class="link-disabled">Разное
</a>
</h4>
</div>
<div id="extra" class="panel-collapse collapse in">
<div class="panel-body last">
<form class="form-horizontal" id="menu-misc" role="form">
<div class="form-group">
<label for="mid" class="col-xs-4 control-label">Меню ID
</label>
<div class="col-xs-8">
<input type="text" id="mid" class="form-control input-sm" placeholder="Меню ID" value="mymenu">
</div>
</div>
<div class="form-group">
<label for="mbrand" class="col-xs-4 control-label">Название
</label>
<div class="col-xs-8">
<input type="text" id="mbrand" class="form-control input-sm" placeholder="Название" value="Название">
</div>
</div>
<div class="form-group">
<label for="mbrandurl" class="col-xs-4 control-label">Название URL
</label>
<div class="col-xs-8">
<input type="text" id="mbrandurl" class="form-control input-sm" placeholder="Ссылка на название" value="#">
</div>
</div>
<div class="form-group">
<label for="mtype" class="col-xs-4 control-label">Тип меню
</label>
<div class="col-xs-8">
<select id="mtype" class="form-control">
<option value="">Default
</option>
<option value="navbar-static-top">Static Top
</option>
<option value="navbar-fixed-top">Fixed Top
</option>
</select>
</div>
</div>
<div class="form-group">
<label for="mpos" class="col-xs-4 control-label">Положение
</label>
<div class="col-xs-8">
<select id="mpos" class="form-control">
<option value="navbar-left">Слева
</option>
<option value="navbar-right">Справа
</option>
</select>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container content">
<div class="col-sm-12 col-md-12">
<blockquote>
Используя функционал настроек генератора доведите желаемый визуальный результат меню до актуального состояния, получите готовый HTML код и стили CSS.
</blockquote>
</div>
</div>
</div>
<script type="text/template" id="navbar-template">
<div id="{{navbarID}}" class="navbar {{inverse}} {{menu-type}}" role="navigation"><div class="container-fluid"><div class="navbar-header">{{#if brand-name}}<a class="navbar-brand" href="{{#if preview}}#{{/if}}{{brand-url}}">{{brand-name}}</a>{{/if}}<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div class="collapse navbar-collapse navbar-menubuilder"><ul class="nav navbar-nav {{position}}">{{#if preview}}{{#menu-items}}<li{{#children}} class="dropdown"{{/children}}><a href="#{{url}}"{{#if children}} class="dropdown-toggle" data-toggle="dropdown"{{/if}}{{#if target}} target="_blank"{{/if}}>{{label}}{{#if children}} <b class="caret"></b>{{/if}}</a>{{#if children}}<ul class="dropdown-menu" role="menu">{{#each children}}<li><a href="#{{url}}">{{label}}</a></li>{{/each}}</ul>{{/if}}</li>{{/menu-items}}{{else}}{{#menu-items}}<li{{#children}} class="dropdown"{{/children}}><a href="{{url}}"{{#if children}} class="dropdown-toggle" data-toggle="dropdown"{{/if}}{{#if target}} target="_blank"{{/if}}>{{label}}{{#if children}} <b class="caret"></b>{{/if}}</a>{{#if children}}<ul class="dropdown-menu" role="menu">{{#each children}}<li><a href="{{url}}">{{label}}</a></li>{{/each}}</ul>{{/if}}</li>{{/menu-items}}{{/if}}</ul></div></div></div></script>
<script type="text/template" id="lightbox-template">
<div class="lightbox-wrapper"><div class="lightbox-bg"></div><div class="container-fluid lightbox"><div class="row"><div class="col-xs-3 text-left"></div><div class="col-xs-6 text-center" id="lightbox-frame-size"><div id="frame-sizes" class="btn-group btn-group-sm" style="margin-top: 3px;"><button type="button" data-rel="frame-mobile" data-width="480px" class="btn btn-default" title="Ширина 480"><i class="fa fa-fw fa-mobile"></i></button><button type="button" data-rel="frame-tablet" data-width="768px" class="btn btn-default" title="ширина 768"><i class="fa fa-fw fa-tablet"></i></button><button type="button" data-rel="frame-desktop" data-width="1024px" class="btn btn-default" title="Ширина 1024"><i class="fa fa-fw fa-desktop"></i></button><button type="button" data-rel="frame-auto" data-width="100%" class="btn btn-default active" title="На всю ширину">100%</button></div></div><div class="col-xs-3 text-right"><a href="#" class="close-lightbox"><i class="fa fa-fw fa-times"></i></a></div></div><div class="container-fluid lightbox-content" style="text-align:center;"><iframe id="lightbox-iframe" src="http://bootstraptema.ru/snippets/menu/menu-generator/menu-rezult.html" frameborder="0" style="width: 100%; height: {{height}};"></iframe></div></div></div></script>
