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
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 |
<!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> </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
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
JQuery multiple sliders on same page
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
How to displays a horizontal dynamic progress bar from left to right when you click a Start/Stop button uses of lightning-progress-bar element in lightning web component — LWC | How to create dynamic progress bar in lwc
How to create a custom horizontal tabs as dynamically changed uses of scoped lightning:tabset in Lightning Web Component — LWC | How to create horizontal tabs in lwc
Author of w3web.net
Hi, This is Vijay 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.
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
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