Генератор меню Bootstrap 3 / Генераторы / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Генераторы

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Вес файла: 402.2 Kb

Уникальный ID: 1556

Количество символов:

Посмотрели: 5466 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/15/1556.css

Прикреплён файл №2: /stuff/0-0-0-1556-20

Скачали бесплатно: 247 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: адаптивный, Snippet, генератор, menu, сниппет, Generator, bootstrap3, Responsive, html

Поделился: BootstrapТема

Добавлено: 2016-12-15 в 13:56

Метка: 1581090028

⇄ ⇅

<div class="main-wrapper">
 <div class="container">
 <div class="col-sm-12 col-md-12">
 <h2 class="text-center">Генератор меню Bootstrap 3
 </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="https://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="https://bootstraptema.ru/snippets/menu/menu-generator/menu-rezult.html" frameborder="0" style="width: 100%; height: {{height}};"></iframe></div></div></div></script>

BootstrapTema

Генератор меню Bootstrap 3

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0