jQuery PrMenu / Улучшение / Плагины Bootstrap

Версия: v1.0.2

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4, 5

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

Язык: Английский

Вес файла: 91.7 Kb

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

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

Скачать бесплатно

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

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

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

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

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

Авторство: //github.com/pagerange/prmenu

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

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

Теги: Plugin, Bootstrap, menu, меню

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

Добавлено: 2019-05-16 в 18:52

Метка: 1582269272

⇄ ⇅

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>Jquery PrMenu Plugin Demo | BootstrapTema</title>

});

</script>
 <style>

body {
 margin: 0;
 padding: 0;
 }

.content {
 width: 90%;
 max-width: 800px;
 margin: 50px auto;
 }

pre {
 white-space: pre-wrap; /* CSS 3 */
 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
 }

</style>

</head>
<body>

<ul id="top-menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Services</a>
 <ul>
 <li><a href="#">Personal</a></li>
 <li><a href="#">Business</a></li>
 <li><a href="#">Professional Services</a>
 <ul>
 <li><a href="#">Doctor</a></li>
 <li><a href="#">Lawyer</a>
 <ul>
 <li><a href="#">Tax</a></li>
 <li><a href="#">Real Estate</a></li>
 <li><a href="#">Criminal</a></li>
 </ul>
 </li>
 <li><a href="#">Accountant</a>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#">Shop</a></li>
 <li><a href="#">Support for Customers</a></li>
 <li><a href="#">FAQ</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a>
 <ul>
 <li><a href="#">Personal</a></li>
 <li><a href="#">Business</a></li>
 <li><a href="#">Professional</a>
 <ul>
 <li><a href="#">Family Doctor Clinic</a></li>
 <li><a href="#">Lawyer</a>
 <ul>
 <li><a href="#">Tax</a></li>
 <li><a href="#">Real Estate Lawyer</a></li>
 <li><a href="#">Criminal</a></li>
 </ul>
 </li>
 <li><a href="#">Enterprise Accountant</a>
 </ul>
 </li>
 </ul>
 </li>
 </ul>

<h1 id="jquery-prmenu">jQuery PrMenu & BootstrapTema</h1>
Very lightweight, responsive menu plugin for jQuery. Provides a menu with links evenly distributed across width of menu container.
<h1 id="features">Features</h1>
<ul>
<li>Links are evenly distributed within menu container</li>
<li>Maximum four menus levels (three nested)</li>
<li>Auto text wrap of long link text (maximum two lines)</li>
<li>Auto link background colors for all levels based on initial background color</li>
<li>All settings can be changed by passing in your own options</li>
</ul>
<h2 id="how-to-use">How to use</h2>
Set up your menu as standard ul with li. Nest sub-menus as you need them. As in the menu below, you can have a maximum of four menu levels including the top level:
<pre class="sourceCode html"><code class="sourceCode html">
 &lt;ul id=&quot;top-menu&quot;&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Personal&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Business&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Professional Services&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Doctor&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lawyer&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tax&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Real Estate&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Criminal&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Accountant&lt;/a&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Shop&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Support for Customers&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;FAQ&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Personal&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Business&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Professional&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Family Doctor Clinic&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lawyer&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tax&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Real Estate Lawyer&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Criminal&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Enterprise Accountant&lt;/a&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;</code></pre>
Activate the menu when the document is ready:
<pre class="js"><code>
 $(document).ready(function(){
 $(&#39;#top-menu&#39;).prmenu();
 });
</code></pre>
You can optionally override the default plugin settings by passing in your own options:
<pre class="js"><code>
 $(&#39;#top-menu&#39;).prmenu({
 &quot;fontsize&quot;: &quot;14&quot;,
 &quot;height&quot;: &quot;50&quot;,
 &quot;case&quot;: &quot;capitalize&quot;,
 &quot;linkbgcolor&quot;: &quot;#286090&quot;,
 &quot;linktextcolor&quot;: &quot;#ffffff&quot;,
 &quot;linktextweight&quot;: &quot;400&quot;,
 &quot;linktextfont&quot;: &quot;sans-serif&quot;,
 &quot;hoverdark&quot;: false
 });
</code></pre>

</div>

</div>

</div>

</body>
</html>

BootstrapTema

jQuery PrMenu

Скриншот

Подробнее

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

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

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