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 |
Other post that would you like to learn
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
How to Create Custom Banner Rotating Image with Text Slider Using JQuery and css3
How to Add Or Remove Row Dynamically in HTML Order List Using JavaScript JQuery With Row Count (index) Value
JQuery multiple sliders on same page
Create a Custom Image Gallery With a Horizontal Thumbnail Carousel Simply using Custom JQuery Small Function and CSS for Create Image Gallery
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