Hey guys, today in this post we are going to learn about how to create a custom left sidebar Navigation Menu with Submenu using HTML, CSS and JQuery.
Files we used in this post example:-
| sidebarNavigation.html | HTML File | It is used for create a left sidebar Navigation menu with Submenu on display the browser. |
|
sidebarNavigation.js |
JavaScript File | It is holding JavaScript click functioality |
|
sidebarNavigation.css |
Style CSS File | It is used for Navigation menu with Submenu alignment. |
| jquery-1.7.1.min.js | JQuery Library Min File | It is a JQuey Library that is provided by JQuery |
Live Demo
Other related post that would you like to learn in LWC
- Do you know:- The cheapest and best smartphone in your budget 2022?
Download Supported jQuery Library for Navigation Menu
Step 1:- Create HTML File : sidebarNavigation.html
sidebarNavigation.html [HTML File]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Left Sidebar Navigation Menu With Submenu</title> <script type="text/javascript" src="http://w3web.net/wp-includes/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="include/sidebarNavigation.js"></script> <link rel="stylesheet" href="include/sidebarNavigation.css" type="text/css" media="all"> </head> <body> <ul class="navMenu"> <li><a href="#"><span><img src="https://www.w3web.net/wp-content/uploads/2020/08/right_60.png" width="20" height="15"/></span> How to start a blog for free that makes money</a> <ul> <li><a href="#"><span>Why is your website not showing in google search</a> <ul> <li><a href="#">Select your favorite category of blog</a></li> <li><a href="#">Find your relevant domain name</a></li> <li><a href="#">Find a web hosting provider</a></li> <li><a href="#">Setup WordPress to start a blog</a></li> <li><a href="#">Install relevant WordPress theme</a></li> <li><a href="#">How to write content on your blog</a></li> <li><a href="#">How to promote your blog</a></li> <li><a href="#">How to make money from blogging</a></li> </ul> </li> <li><a href="#">Blog Popular Category</a> <ul> <li><a href="#">Personal Blogging</a></li> <li><a href="#">Educational Tutorial</a></li> <li><a href="#">Fitness</a></li> <li><a href="#">Media</a></li> <li><a href="#">Real State</a></li> <li><a href="#">Freelancing</a></li> <li><a href="#">Online Business</a></li> <li><a href="#">Your Hobbies</a></li> </ul> </li> <li><a href="#">Important Plugins</a> <ul> <li><a href="#">Yoast SEO</a></li> <li><a href="#">Akismet</a></li> <li><a href="#">Visitor Traffic</a></li> <li><a href="#">Ninja Forms</a></li> <li><a href="#">Crayon Syntax Highlighter</a></li> </ul> </li> <li><a href="#">Ways to Promote a Blog</a> <ul> <li><a href="#">Submit your blog to search engine</a></li> <li><a href="#">Add social media Icon and be active on social networks</a></li> <li><a href="#">Advertising on the web</a></li> <li><a href="#">Tell your friends know about your blog</a></li> <li><a href="#">Get active on relevant blogs</a></li> <li><a href="#">Create a mailing list</a></li> </ul> </li> <li><a href="#">How to make money from blogging</a> <ul> <li><a href="#">Submit your blog to search engine</a></li> <li><a href="#">Add social media Icon and be active on social networks</a></li> <li><a href="#">Advertising on the web</a></li> <li><a href="#">Tell your friends know about your blog</a></li> <li><a href="#">Get active on relevant blogs</a></li> <li><a href="#">Create a mailing list</a></li> </ul> </li> </ul> </li> <li><a href="#"><span><img src="https://www.w3web.net/wp-content/uploads/2020/08/right_60.png" width="20" height="15"/></span> How to do indexing and ranking of your website</a> <ul> <li><a href="#">Important Plugins</a> <ul> <li><a href="#">Yoast SEO</a></li> <li><a href="#">Akismet</a></li> <li><a href="#">Visitor Traffic</a></li> <li><a href="#">Ninja Forms</a></li> <li><a href="#">Crayon Syntax Highlighter</a></li> </ul> </li> <li><a href="#">Ways to Promote a Blog</a> <ul> <li><a href="#">Submit your blog to search engine</a></li> <li><a href="#">Add social media Icon and be active on social networks</a></li> <li><a href="#">Advertising on the web</a></li> <li><a href="#">Tell your friends know about your blog</a></li> <li><a href="#">Get active on relevant blogs</a></li> <li><a href="#">Create a mailing list</a></li> </ul> </li> <li><a href="#">How to make money from blogging</a> <ul> <li><a href="#">Submit your blog to search engine</a></li> <li><a href="#">Add social media Icon and be active on social networks</a></li> <li><a href="#">Advertising on the web</a></li> <li><a href="#">Tell your friends know about your blog</a></li> <li><a href="#">Get active on relevant blogs</a></li> <li><a href="#">Create a mailing list</a></li> </ul> </li> <li><a href="#">8 Reason why is your website not showing in google search</a> <ul> <li><a href="#">Select your favorite category of blog</a></li> <li><a href="#">Find your relevant domain name</a></li> <li><a href="#">Find a web hosting provider</a></li> <li><a href="#">Setup WordPress to start a blog</a></li> <li><a href="#">Install relevant WordPress theme</a></li> <li><a href="#">How to write content on your blog</a></li> <li><a href="#">How to promote your blog</a></li> <li><a href="#">How to make money from blogging</a></li> </ul> </li> <li><a href="#">Blog Popular Category</a> <ul> <li><a href="#">Personal Blogging</a></li> <li><a href="#">Educational Tutorial</a></li> <li><a href="#">Fitness</a></li> <li><a href="#">Media</a></li> <li><a href="#">Real State</a></li> <li><a href="#">Freelancing</a></li> <li><a href="#">Online Business</a></li> <li><a href="#">Your Hobbies</a></li> </ul> </li> </ul> </li> <li><a href="#"><span><img src="https://www.w3web.net/wp-content/uploads/2020/08/right_60.png" width="20" height="15"/></span> How to add new sitemap on blogger or website</a> <ul> <li><a href="#">8 Reason why is your website not showing in google search</a> <ul> <li><a href="#">Select your favorite category of blog</a></li> <li><a href="#">Find your relevant domain name</a></li> <li><a href="#">Find a web hosting provider</a></li> <li><a href="#">Setup WordPress to start a blog</a></li> <li><a href="#">Install relevant WordPress theme</a></li> <li><a href="#">How to write content on your blog</a></li> <li><a href="#">How to promote your blog</a></li> <li><a href="#">How to make money from blogging</a></li> </ul> </li> <li><a href="#">Blog Popular Category</a> <ul> <li><a href="#">Personal Blogging</a></li> <li><a href="#">Educational Tutorial</a></li> <li><a href="#">Fitness</a></li> <li><a href="#">Media</a></li> <li><a href="#">Real State</a></li> <li><a href="#">Freelancing</a></li> <li><a href="#">Online Business</a></li> <li><a href="#">Your Hobbies</a></li> </ul> </li> <li><a href="#">Important Plugins</a> <ul> <li><a href="#">Yoast SEO</a></li> <li><a href="#">Akismet</a></li> <li><a href="#">Visitor Traffic</a></li> <li><a href="#">Ninja Forms</a></li> <li><a href="#">Crayon Syntax Highlighter</a></li> </ul> </li> <li><a href="#">Ways to Promote a Blog</a> <ul> <li><a href="#">Submit your blog to search engine</a></li> <li><a href="#">Add social media Icon and be active on social networks</a></li> <li><a href="#">Advertising on the web</a></li> <li><a href="#">Tell your friends know about your blog</a></li> <li><a href="#">Get active on relevant blogs</a></li> <li><a href="#">Create a mailing list</a></li> </ul> </li> <li><a href="#">How to do indexing and ranking of your website</a> <ul> <li><a href="#">Submit your blog to search engine</a></li> <li><a href="#">Add social media Icon and be active on social networks</a></li> <li><a href="#">Advertising on the web</a></li> <li><a href="#">Tell your friends know about your blog</a></li> <li><a href="#">Get active on relevant blogs</a></li> <li><a href="#">Create a mailing list</a></li> </ul> </li> </ul> </li> </ul> <br/> <!--Start RelatedTopics Section--> <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;"> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p> <br/><br/> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p> <div style="display:block; overflow:hidden;"> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li> <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li> <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li> <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li> </ul> </div> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li> <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li> <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li> <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li> </ul> </div> <div style="clear:both;"></div> <br/> <div class="youtubeIcon"> <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a> </div> </div> </div> <!--End RelatedTopics Section--> </body> </html> |
Step 2:- Create JavaScript File : sidebarNavigation.js
sidebarNavigation.js [JavaScript File]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
$(document).ready(function(){ $('ul.navMenu ul').attr('class',function(){ $(this).parent('li').find('a:first').attr('rel','firstLabel'); return 'firstLabel'; }) $('ul.navMenu ul ul').attr('class', function(){ $(this).parent('li').find('a:first').attr('rel','secLabel') return 'secLabel'; }) var indexFirst = $('ul.navMenu a[rel="firstLabel"]'); $('ul.navMenu a[rel="firstLabel"]').click(function(){ var a1 = indexFirst.index(this); $('ul.navMenu ul.firstLabel').hide(); $('ul.navMenu ul.firstLabel:eq(' + a1 + ')').show(); $('ul.navMenu a[rel="firstLabel"]').removeClass('active'); $(this).addClass('active'); }); var indexSec = $('ul.navMenu ul a[rel="secLabel"]') $('ul.navMenu ul a[rel="secLabel"]').click(function(){ var a2 = indexSec.index(this) $('ul.navMenu ul li ul.secLabel').hide(); $('ul.navMenu ul li ul.secLabel:eq(' + a2 + ')').show(); $('ul.navMenu ul a[rel="secLabel"]').removeClass('sel'); $(this).addClass('sel'); }) $('ul.secLabel li a').click(function(){ $('ul.secLabel li a').removeClass('sel'); $(this).addClass('sel'); }) })// JavaScript Document |
Step 3:- Create Style CSS : sidebarNavigation.css
sidebarNavigation.css [Style CSS File]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ul.navMenu{ margin:0; padding:0 10px 0 10px; list-style:none; width:500px; font-family:Arial, Helvetica, sans-serif;} ul.navMenu li{ font-size:16px; color:#464646; font-weight:bold; background:#f7f7f7; padding:0 0 20px 10px; position:relative;} ul.navMenu li a, ul.navMenu li a:visited{ color:#686868; text-decoration:none;} ul.navMenu li a:hover, ul.navMenu li a.active, ul.navMenu li a.active:visited{ color:#ee8e02; text-decoration:none;} /*ul.navMenu li.active a, ul.navMenu li.active a:visited{ color:#ee8e02; text-decoration:none;}*/ ul.navMenu li ul{ margin:0; padding:5px 0 0 15px; list-style:none; display:none;} ul.navMenu li ul li{ font-size:15px; font-weight:normal; color:#7d7d7d; background:url(https://www.w3web.net/wp-content/uploads/2020/08/dotline.gif) no-repeat left 13px; padding:0 0 0 10px;} ul.navMenu li ul li a{ color:#7d7d7d; text-decoration:none; padding:6px 0 6px 0; display:block;} ul.navMenu li ul li a:hover, ul.navMenu li ul li a.sel { color:#ee8e02; text-decoration:none;} ul.navMenu li ul li ul{ margin:0; padding:0px 0 0 10px; list-style:none; display:none;} ul.navMenu li ul li ul li{ font-size:14px; color:#464646; font-weight:normal; background:url(https://www.w3web.net/wp-content/uploads/2020/08/orange_bullet.png) no-repeat left 5px; padding:0 0 3px 12px;} ul.navMenu li ul li ul li a{color:#7d7d7d; text-decoration:none; padding:2px 0 2px 0; display:block;} ul.navMenu li ul li ul li a:hover, ul.navMenu li ul li ul li a.sel { color:#ee8e02; text-decoration:none;} |
Further post that would you like to learn
FAQ (Frequently Asked Questions)
What is the navigation menu in Salesforce?
The Navigation Menu component extends your site's navigation beyond navigational topics. Navigation menu items can include Salesforce objects, topics, pages in your site, URLs to external sites, and menu labels. Menu labels are parent headings under which you can nest other menu items.
What is Lightning navigation?
Lightning:navigation is used to navigate to a given pageReference or to generate. a URL from a pageReference.To navigate we need to define a PageReference object. The pageReference type generates a unique URL format and defines attributes that. apply to all pages of that type.
What is utility bar in Salesforce Lightning?
The utility bar is a specialized type of Lightning page that gives your users quick access to common productivity tools, like Notes and Recent Items. It appears as a fixed footer that users can access to open utilities in docked panels. Some utilities support pop-out, which lets them open in a new browser window.
Related Topics | You May Also Like
How to Add Or Remove Row Dynamically in HTML Order List Using JavaScript JQuery With Row Count (index) Value | Create dynamically add/remove rows in html List using JavaScript
How to build a customizable custom selected tabs styles using simple JavaScript, CSS with Count (Index) value on click tab button | How to create a customisable selected tab styles in JavaScript
How to Create Custom Banner Rotating Image with Text Slider Using JQuery and css3 | Custom Banner Rotating Image with Text Slider in JQuery
How to Create a Simple Custom Auto Slider with Next and Previous Buttons in JavaScript, JQuery and CSS | How to Create a Simple Custom Auto Slider with Next and Previous Buttons in JavaScript
Create a Custom Image Gallery With a Horizontal Thumbnail Carousel Simply using Custom JQuery Small Function and CSS for Create Image Gallery | Create multiple image slider in jquery
JQuery multiple sliders on same page | how we can add multiple custom sliders on a single page using JQuery/Javascript and CSS3
How to close a div container when click outside target uses of event target value with custom CSS and jQuery loop Javascript functionality | how to show menu details when on click on target link and hide div container when click outside of container using Jquery
How to create transitions effects of animated slideshow to display text from different direction show/hide based on mouse hover uses of “-webkit-transition:all 0.1s linear” property of css3 without javascript/JQuery | How do you use transition in CSS to display the text and images for delay, scroll and animated CSS without jQuery and Javascript
- Your reaction of the article ▾
Author of w3web.net
Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net
Thank you i’m searching this.
it aws very helpfull foe me as i am a developer
amazing very useful and attractive for html user’s
i use this code for my instuation management project
and its so amazing
Nice and useful artcle for css and html users .
Thanks For Sharing The Amazing content. I Will also share with my friends. Great Content thanks a lot.
Really very happy to say,your post is very interesting to read.I never stop myself to say something about it.You’re doing a great job.Keep it up
it was also good in pablish
in your post to good in article is very impresh
Really very happy to say,your post is very interesting to read.I never stop myself to say something about it.You’re doing a great job.Keep it up…
buy Google voice number
buy twitter accounts
Buy Instagram pva accounts
Buy Facebook pva accounts
Great Sir Please Keep Creating These Ideas
40 High Demand Gigs on Fiverr – Most Selling Gigs on Fiverr 2021
Amazing article, and I have learned a lot
It is a really nice post that I could learn so much information