Merge branch 'release/v1.1.1'

kmlpandey77 · May 5, 2022 · a3284b7 · a3284b7
2 parents 4dde637 + 063b24d
commit a3284b7
Show file tree

Hide file tree

Showing 12 changed files with 445 additions and 1,399 deletions.
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
diff --git a/.prettierignore b/.prettierignore
diff --git a/LICENSE b/LICENSE
diff --git a/README-BOOTSTRAP-4.md b/README-BOOTSTRAP-4.md
@@ -0,0 +1,116 @@
+# BootNavbar
+
+![license](https://img.shields.io/github/license/kmlpandey77/bootnavbar?style=plastic)
+
+Table of contents:
+
+- [Introduction](#introduction)
+- [Preview](#preview)
+- [Requirement](#requirement)
+- [Download](#Download)
+- [BootNavbar CDN](#bootnavbar-cdn)
+  - [CSS](#css)
+  - [JS](#js)
+- [How to Use](#how-to-use)
+- [Options](#options)
+
+## Introduction
+
+> Bootstrap 4 Responsive Navbar with Multi-level Dropdowns \
+> This is a fully responsive multilevel dropdown (Treeview menu) navbar opened on hover.
+
+## Preview
+
+![Multi level hover dropdown Navbar for bootstrap 4](https://raw.githubusercontent.com/kmlpandey77/bootnavbar/master/Preview.png "Navbar Preview")
+
+## Requirement
+
+    jQuery
+    boostrap 4
+    animated.css V3
+
+## Download
+
+[Download source](https://github.com/kmlpandey77/bootnavbar/archive/1.0.2.zip)
+
+## BootNavbar CDN
+
+#### css
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/gh/kmlpandey77/[email protected]/css/bootnavbar.css"
+/>
+```
+
+#### js
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/kmlpandey77/[email protected]/js/bootnavbar.js"></script>
+```
+
+## How to use
+
+To use BootNavbar on your website, simply drop the stylesheet into your document's `<head>`.
+
+```html
+<head>
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
+  />
+  <link rel="stylesheet" href="css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/bootnavbar.css" />
+</head>
+```
+
+And, simply drop the JS into your document's `<body>`.
+
+```html
+<body>
+  ... ...
+
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+  <script src="js/bootnavbar.js"></script>
+  <script>
+    $(function () {
+      $("#bootnavbar").bootnavbar({
+        //options
+        animation: false,
+        animateIn: "slideInUp",
+      });
+    });
+  </script>
+</body>
+```
+
+And, `HTML`.
+
+```html
+<nav class="navbar navbar-expand-lg navbar-light bg-light" id="bootnavbar">
+  ... ...
+</nav>
+```
+
+## Options
+
+**animation**
+
+Type: `Boolean`
+
+Default: `true`
+
+Enable/Disable animation effect
+
+**animateIn**
+
+Type: `String`
+
+Default: `'fadeIn'`
+
+Value: `'slideInUp'`,`'zoomIn'`
+
+View more option in [animate.css](https://daneden.github.io/animate.css)
diff --git a/README.md b/README.md
@@ -2,122 +2,115 @@
 
 ![license](https://img.shields.io/github/license/kmlpandey77/bootnavbar?style=plastic)
 
-Table of contents:
-* [Introduction](#introduction)
-* [Preview](#preview)
-* [Demo](#bootnavbar-demo)
-* [Requirement](#requirement)
-* [Download](#Download)
-* [BootNavbar CDN](#bootnavbar-cdn)
-	* [CSS](#css)
-	* [JS](#js)
-* [How to Use](#how-to-use)
-* [Options](#options)
-
+**Table of contents:**
+
+- [Introduction](#introduction)
+- [Preview](#preview)
+- [Demo](#bootnavbar-demo)
+- [Requirement](#requirement)
+- [Download](#Download)
+- [BootNavbar CDN](#bootnavbar-cdn)
+  - [CSS](#css)
+  - [JS](#js)
+- [How to Use](#how-to-use)
+- [Options](#options)
 
 ## Introduction
 
-> Bootstrap 5 Responsive Navbar with Multi-level Dropdowns \
+> Bootstrap 5 Responsive Navbar with Multi-level Dropdowns
 > This is a fully responsive multilevel dropdown (Treeview menu) navbar opened on hover.
 
-use [v1.0.2](https://github.com/kmlpandey77/bootnavbar/releases/tag/v1.0.2) for Bootstrap 4
-
-
+> :warning: **If you are using Boostrap 4** use [v1.0.2](https://github.com/kmlpandey77/bootnavbar/releases/tag/v1.0.2) and read [docs](./README-BOOTSTRAP-4.md)
 
 ## Preview
+
 ![Multi level hover dropdown Navbar for bootstrap 5](https://raw.githubusercontent.com/kmlpandey77/bootnavbar/master/Preview.png "Navbar Preview")
 
 ## BootNavbar Demo
-[View Demo](https://kmlpandey77.github.io/bootnavbar)
 
+[View Demo](https://kmlpandey77.github.io/bootnavbar)
 
 ## Requirement
-	boostrap 5
-	animated.css
+
+- boostrap 5
+- animated.css (optional)
 
 ## Download
+
 [Download source](https://github.com/kmlpandey77/bootnavbar/archive/refs/tags/v1.1.0.zip)
 
 ## BootNavbar CDN
 
 #### css
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kmlpandey77/bootnavbar/css/bootnavbar.css">
 
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/gh/kmlpandey77/[email protected]/css/bootnavbar.css"
+/>
 ```
 
 #### js
-```html
-<script src="https://cdn.jsdelivr.net/gh/kmlpandey77/bootnavbar/js/bootnavbar.js"></script>
-```	
 
+```html
+<script src="https://cdn.jsdelivr.net/gh/kmlpandey77/[email protected]/js/bootnavbar.js"></script>
+```
 
 ## How to use
+
 To use BootNavbar on your website, simply drop the stylesheet into your document's `<head>`.
 
 ```html
 <head>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
-  <link rel="stylesheet" href="css/bootstrap.min.css">
-  <link rel="stylesheet" href="css/bootnavbar.css">
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+  />
+  <link rel="stylesheet" href="css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/bootnavbar.css" />
 </head>
 ```
 
-
 And, simply drop the JS into your document's `<body>`.
 
 ```html
 <body>
-	  ...
-	  ...
-
-	  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
-    <script src="js/bootstrap.min.js"></script>
-    <script src="js/bootnavbar.js" ></script>
-    <script>
-        $(function () {
-            $('#bootnavbar').bootnavbar({
-              //options
-
-              //animation: false
-
-            });
-        })
-    </script>
-<body>
+  ... ...
+
+  <script src="js/bootstrap.min.js"></script>
+  <script src="js/bootnavbar.js"></script>
+  <script>
+    $(function () {
+      new bootnavbar();
+    });
+  </script>
+</body>
 ```
 
-And,  `HTML`.
+And, `HTML`.
 
 ```html
-<nav class="navbar navbar-expand-lg navbar-light bg-light" id="bootnavbar">
-  ...
-  ...
+<nav class="navbar navbar-expand-lg navbar-light bg-light" id="main_navbar">
+  ... ...
 </nav>
 ```
 
-
 ## Options
 
-**animation**
+**Selector**
+Key: `selector`
+Type: `String`
+Default: `main_navbar`
+`selector` must be in `id` tag
 
+**Animation**
+Key: `animation`
 Type: `Boolean`
-
 Default: `true`
-
 Enable/Disable animation effect
 
-
-
-**animateIn**
-
+**Animate In**
+Key: `animateIn`
 Type: `String`
-
 Default: `'fadeIn'`
-
-Value: `'slideInUp'`,`'zoomIn'`
-
-
-
-View more option in [animate.css](https://daneden.github.io/animate.css) 
+Value can be `'slideInUp'`,`'zoomIn'` and for more option visit [animate.css](https://daneden.github.io/animate.css)