"Generator menu Bootstrap3"
Bootstrap 3.3.0 Snippet by BootstrapTema

<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>

Related: See More


Questions / Comments: