RD Navbar Documentation
Connection example
Below is a basic example of the RD Navbar connection to a page based on the demo page.
Please note: the proposed initialization option may differ depending on the product in which it is implemented. The information provided below only shows the way to connect the sample demo.
Download the script from Git
To get started, you need to download this script from our public repository: Сlickable
Add the necessary markup
The HTML markup by default for creating the navigation bar is as follows.
<!-- 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 -->
Connect styles
Connect the styles file rd-navbar.css in the <head/> section of the target page.
<link rel="stylesheet" href="path/to/css/rd-navbar.css">
Connect the script to the page
You need to copy the script into the / js folder of your project and connect it on the page. You can use the following code area:
<script src="js/jquery.rd-navbar.min.js"></script>
Initialize the script
You need to initialize the script for the elements on the target selector, using the next code section
<script>
$(document).ready(function () {
o.RDNavbar({}); // Additional options
});
</script>