RD Navbar Documentation
Пример подключения
Ниже представлен базовый пример подключения RD Navbar на страницу на основе демо страницы.
Обратите внимание: предложенный вариант инициализации может отличаться в зависимости от продукта, в котором он внедряется. Информация, предоставленная ниже, лишь отображает вариант подключения демо примера.
Скачайте скрипт из Git'a
Для начала необходимо скачать данный скрипт из нашего публичного репозитория: Кликабельно
Добавьте необходимую разметку
HTML разметка по-умолчанию для создания навигационной панели выглядит следующим образом.
<!-- RD Navbar -->
<div class="rd-navbar-wrap">
<nav class="rd-navbar" data-rd-navbar-lg="rd-navbar-static">
<div class="rd-navbar-inner">
<!-- RD Navbar Panel -->
<div class="rd-navbar-panel">
<div class="rd-navbar-panel-canvas"></div>
<!-- RD Navbar Toggle -->
<button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span>
</button>
<!-- END RD Navbar Toggle -->
<!-- RD Navbar Cart Toggle -->
<div class="rd-navbar-cart-wrap">
<div class="rd-navbar-cart-floating">
<button class="rd-navbar-cart-toggle"
data-rd-navbar-toggle=".rd-navbar-cart, .rd-navbar-cart-floating">
<span></span>
</button>
<a href="#" class="rd-navbar-cart-buy material-icons-card_membership">Go to Checkout</a>
</div>
<div class="rd-navbar-cart">
<ul class="rd-navbar-cart-items">
<li>
<div class="rd-navbar-cart-item">
<div class="rd-navbar-cart-item__left">
<img src="//lorempixel.com/56/56/technics/1"
alt=""
class="rd-navbar-cart-item__preview"></div>
<div class="rd-navbar-cart-item__body">
<div class="rd-navbar-cart-item__title">Lorem ipsum dolor sit</div>
<div class="rd-navbar-cart-item__counter">x3</div>
</div>
<a href="#" class="rd-navbar-cart-item__remove material-icons-delete"></a>
</div>
</li>
<li>
<div class="rd-navbar-cart-item">
<div class="rd-navbar-cart-item__left">
<img src="//lorempixel.com/56/56/technics/2"
alt=""
class="rd-navbar-cart-item__preview"></div>
<div class="rd-navbar-cart-item__body">
<div class="rd-navbar-cart-item__title">Corporis incidunt non</div>
<div class="rd-navbar-cart-item__counter">x1</div>
</div>
<a href="#" class="rd-navbar-cart-item__remove material-icons-delete"></a>
</div>
</li>
<li>
<div class="rd-navbar-cart-item">
<div class="rd-navbar-cart-item__left">
<img src="//lorempixel.com/56/56/technics/3"
alt=""
class="rd-navbar-cart-item__preview"></div>
<div class="rd-navbar-cart-item__body">
<div class="rd-navbar-cart-item__title">Assumenda id quia
</div>
<div class="rd-navbar-cart-item__counter">x4</div>
</div>
<a href="#" class="rd-navbar-cart-item__remove material-icons-delete"></a>
</div>
</li>
<li>
<div class="rd-navbar-cart-item">
<div class="rd-navbar-cart-item__left">
<img src="//lorempixel.com/56/56/technics/4"
alt=""
class="rd-navbar-cart-item__preview"></div>
<div class="rd-navbar-cart-item__body">
<div class="rd-navbar-cart-item__title">Labore quae suscipit</div>
<div class="rd-navbar-cart-item__counter">x5</div>
</div>
<a href="#" class="rd-navbar-cart-item__remove material-icons-delete"></a>
</div>
</li>
<li>
<div class="rd-navbar-cart-item">
<div class="rd-navbar-cart-item__left">
<img src="//lorempixel.com/56/56/technics/5"
alt=""
class="rd-navbar-cart-item__preview"></div>
<div class="rd-navbar-cart-item__body">
<div class="rd-navbar-cart-item__title">Dicta fugit nesciunt
</div>
<div class="rd-navbar-cart-item__counter">x3</div>
</div>
<a href="#" class="rd-navbar-cart-item__remove material-icons-delete"></a>
</div>
</li>
<li>
<div class="rd-navbar-cart-item">
<div class="rd-navbar-cart-item__left">
<img src="//lorempixel.com/56/56/technics/6"
alt=""
class="rd-navbar-cart-item__preview"></div>
<div class="rd-navbar-cart-item__body">
<div class="rd-navbar-cart-item__title">Eaque ex maiores</div>
<div class="rd-navbar-cart-item__counter">x6</div>
</div>
<a href="#" class="rd-navbar-cart-item__remove material-icons-delete"></a>
</div>
</li>
</ul>
<a href="#" class="rd-navbar-cart-buy material-icons-card_membership">Go to Checkout</a>
</div>
</div>
<!-- END RD Navbar Cart Toggle -->
<!-- RD Navbar Collapse Toggle -->
<button class="rd-navbar-collapse-toggle" data-rd-navbar-toggle=".rd-navbar-collapse">
<span></span>
</button>
<ul class="rd-navbar-collapse">
<li>
<a href="#">Account</a>
</li>
<li>
<a href="#">My Cart</a>
</li>
<li>
<a href="#">Register</a>
</li>
<li>
<a href="#">Login</a>
</li>
</ul>
<!-- END RD Navbar Collapse Toggle -->
<!-- RD Navbar Brand -->
<div class="rd-navbar-brand">
<img src="images/favicon.png" alt="" class="brand">
<a href="index.html" class="brand-name">
<span>RD</span> Navbar
</a>
</div>
<!-- END RD Navbar Brand -->
</div>
<!-- END RD Navbar Panel -->
</div>
<div class="rd-navbar-outer">
<div class="rd-navbar-inner">
<div class="rd-navbar-subpanel">
<div class="rd-navbar-nav-wrap">
<!-- RD Navbar Nav -->
<ul class="rd-navbar-nav">
<li class="active">
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
<!-- RD Navbar Dropdown -->
<ul class="rd-navbar-dropdown">
<li>
<a href="shortcodes.php">Shortcodes</a>
</li>
<li>
<a href="#">Lorem ipsum dolor</a>
<ul class="rd-navbar-dropdown">
<li>
<a href='#'>Lorem ipsum dolor</a>
</li>
<li>
<a href='#'>Nulla sequi, sint</a>
</li>
<li>
<a href='#'>Corporis, quos, sit</a>
</li>
</ul>
</li>
<li>
<a href="#">Dolor sit amet</a>
</li>
</ul>
<!-- END RD Navbar Dropdown -->
</li>
<li>
<a href="#features">Features</a>
<!-- RD Navbar Megamenu -->
<ul class="rd-navbar-megamenu">
<li>
<ul>
<li>
<a href='#'>Stainless Steel Service</a>
</li>
<li>
<a href='#'>Titanium Service</a>
</li>
<li>
<a href='#'>Metal Service</a>
</li>
<li>
<a href='#'>Steel Detailing</a>
</li>
<li>
<a href='#'>Steel Coating</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href='#'>Steel Plate Shearing</a>
</li>
<li>
<a href='#'>Stainless Steel Brazing</a>
</li>
<li>
<a href='#'>Stainless Steel Annealing</a>
</li>
<li>
<a href='#'>Stainless Steel Deburring</a>
</li>
<li>
<a href='#'>Structural Steel Detailing</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href='#'>Stainless Steel & Round Bar</a>
</li>
<li>
<a href='#'>Stainless Steel Plate & Sheet</a>
</li>
<li>
<a href='#'>CNC, 7-Axis</a>
</li>
<li>
<a href='#'>Steel Mill Maintenance</a>
</li>
<li>
<a href='#'>Structural Steel</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href='#'>Grinder Remanufacturing</a>
</li>
<li>
<a href='#'>Stainless Steel Cutting</a>
</li>
<li>
<a href='#'>Stainless Steel Coating</a>
</li>
<li>
<a href='#'>Stainless Steel Polishing</a>
</li>
<li>
<a href='#'>Heat Treating</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href='#'>Tube Fabrication & Bending</a>
</li>
<li>
<a href='#'>Steel Hardening</a>
</li>
<li>
<a href='#'>Stainless Steel Welding</a>
</li>
</ul>
</li>
</ul>
<!-- END RD Navbar Megamenu -->
</li>
<li>
<a href="#credits">Credits</a>
</li>
<li>
<a href="#">Buy Now!</a>
</li>
</ul>
<!-- END RD Navbar Nav -->
</div>
<!-- RD Navbar Search Toggle -->
<div class="rd-navbar-search-wrap">
<button class="rd-navbar-search-toggle" data-rd-navbar-toggle=".rd-navbar-search">
<span></span>
</button>
<div class="rd-navbar-search">
<form action="" method="post">
<div class="form-group">
<input id="rd-navbar-search-input" type="text" class="form-control"
placeholder="Search">
</div>
<button type="submit" class="material-icons-search"></button>
</form>
</div>
</div>
<!-- END RD Navbar Search Toggle -->
</div>
</div>
</div>
</nav>
</div>
<!-- END RD Navbar -->
Подключите стили
Подключите файл стилей rd-navbar.css в секции <head/> целевой страницы.
<link rel="stylesheet" href="path/to/css/rd-navbar.css">
Подключите скрипт на странице
Вам необходимо скопировать скрипт в папку /js вашего проекта и выполнить его подключение на странице. Для это можно исспользовать следующий участок кода:
<script src="js/jquery.rd-navbar.min.js"></script>
Выполните инициализацию скрипта
Вам необходимо выполнить инициализацию скрипта для элементов по целевому селектору, с помощью следующего участка кода
<script>
$(document).ready(function () {
o.RDNavbar({}); // Additional options
});
</script>