ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Without using database create Bootstrap Vertical menus with collapse and expand using jQuery<p>Refer the below Sample code for your reference and implement it as per your code logic. As you don&rsquo;t need to you bind details for menus from database then you need to design it as we normally make as using div. also you need to design the menu structure using ul and li as per your menu level.</p> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <div class="demo_block"> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; .nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #2e353d; position: fixed; top: 0px; width: 300px; height: 100%; color: #e1ffff; } .nav-side-menu .brand { background-color: #23282e; line-height: 50px; display: block; text-align: center; font-size: 14px; } .nav-side-menu .toggle-btn { display: none; } .nav-side-menu ul, .nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 35px; cursor: pointer; } .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before { font-family: FontAwesome; content: &#34;\f078&#34;; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right; } .nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #d19b3d; background-color: #4f5b69; } .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { color: #d19b3d; } .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a { color: #d19b3d; } .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #181c20; border: none; line-height: 28px; border-bottom: 1px solid #23282e; margin-left: 0px; } .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: Orange; } .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: &#34;\f105&#34;; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .nav-side-menu li { padding-left: 0px; border-left: 3px solid #2e353d; border-bottom: 1px solid #23282e; } .nav-side-menu li a { text-decoration: none; color: #e1ffff; } .nav-side-menu li a i { padding-left: 10px; width: 20px; padding-right: 20px; } .nav-side-menu li:hover { border-left: 3px solid #d19b3d; background-color: #4f5b69; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } @media (max-width: 767px) { .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #ffffff; color: #000; width: 40px; text-align: center; } .brand { text-align: left !important; font-size: 22px; padding-left: 20px; line-height: 50px !important; } } @media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; } } body { margin: 0px; padding: 0px; } &lt;/style&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&#34; /&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { $(&#39;li[data-toggle=&#34;collapse&#34;]&#39;).each(function () { if ($(this).next(&#39;ul&#39;).length == 0) { $(this).removeAttr(&#39;data-toggle&#39;).removeAttr(&#39;data-target&#39;).removeClass(&#39;collapsed&#39;); $(this).find(&#39;span.arrow&#39;).remove(); } }); $(&#39;ul#menu-content &gt; ul&#39;).on(&#39;show.bs.collapse&#39;, function (e, obj) { $(&#34;ul#menu-content &gt; ul&#34;).not(this).removeClass(&#34;in&#34;); var currentHead = $(this).prev(&#34;li&#34;); $(&#34;ul#menu-content &gt; li&#34;).not(currentHead).removeClass(&#34;active&#34;); $(currentHead).addClass(&#34;active&#34;); }) }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;div class=&#34;nav-side-menu&#34;&gt; &lt;div class=&#34;brand&#34;&gt; AspSnippets&lt;/div&gt; &lt;i class=&#34;fa fa-bars fa-2x toggle-btn&#34; data-toggle=&#34;collapse&#34; data-target=&#34;#menu-content&#34;&gt; &lt;/i&gt; &lt;div class=&#34;menu-list&#34;&gt; &lt;ul id=&#34;menu-content&#34; class=&#34;menu-content collapse out&#34;&gt; &lt;li data-toggle=&#34;collapse&#34; data-target=&#39;#Home&#39; class=&#34;collapsed&#34;&gt;&lt;a href=&#39;Home.aspx&#39;&gt; &lt;i class=&#39;fa fa-dashboard fa-lg&#39;&gt;&lt;/i&gt;Home&lt;span class=&#34;arrow&#34;&gt;&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li data-toggle=&#34;collapse&#34; data-target=&#39;#Services&#39; class=&#34;collapsed&#34;&gt;&lt;a href=&#39;javascript:;&#39;&gt; &lt;i class=&#39;fa fa-car fa-lg&#39;&gt;&lt;/i&gt;Services&lt;span class=&#34;arrow&#34;&gt;&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;ul id=&#39;Services&#39; class=&#39;sub-menu collapse&#39;&gt; &lt;li&gt;&lt;a href=&#39;Consulting.aspx&#39;&gt;Consulting&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&#39;Outsourcing.aspx&#39;&gt;Outsourcing&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;li data-toggle=&#34;collapse&#34; data-target=&#39;#About&#39; class=&#34;collapsed&#34;&gt;&lt;a href=&#39;About.aspx&#39;&gt; &lt;i class=&#39;fa fa-user fa-lg&#39;&gt;&lt;/i&gt;About&lt;span class=&#34;arrow&#34;&gt;&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li data-toggle=&#34;collapse&#34; data-target=&#39;#Contact&#39; class=&#34;collapsed&#34;&gt;&lt;a href=&#39;javascript:;&#39;&gt; &lt;i class=&#39;fa fa-users fa-lg&#39;&gt;&lt;/i&gt;Contact&lt;span class=&#34;arrow&#34;&gt;&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;ul id=&#39;Contact&#39; class=&#39;sub-menu collapse&#39;&gt; &lt;li data-toggle=&#39;collapse&#39; data-target=&#39;#Phone&#39; class=&#39;collapsed&#39;&gt;&lt;a href=&#39;javascript:;&#39;&gt; Phone&lt;span class=&#39;arrow&#39;&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;ul id=&#39;Phone&#39; class=&#39;sub-menu collapse&#39;&gt; &lt;li&gt;&lt;a href=&#39;HomePhone.aspx&#39;&gt;HomePhone&lt;/a&gt;&lt;/li&gt;&lt;li data-toggle=&#39;collapse&#39; data-target=&#39;#MobilePhone&#39; class=&#39;collapsed&#39;&gt;&lt;a href=&#39;javascript:;&#39;&gt;MobilePhone&lt;span class=&#39;arrow&#39;&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;ul id=&#39;MobilePhone&#39; class=&#39;sub-menu collapse&#39;&gt; &lt;li&gt;&lt;a href=&#39;PersonalMob.aspx&#39;&gt;Personal&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&#39;javascript:;&#39;&gt;AddedNew&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/ul&gt; &lt;/ul&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p> <p>&nbsp;</p> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/344767/Without-using-database-create-Bootstrap-Vertical-menus-with-collapse-and-expand-using-jQuery/https://www.aspforums.net:443/Threads/344767/Without-using-database-create-Bootstrap-Vertical-menus-with-collapse-and-expand-using-jQuery/Wed, 06 Dec 2017 01:28:57 GMTWithout using database create Bootstrap Vertical menus with collapse and expand using jQuery<p>@Waghuldey,</p> <p>You can search on google and find a suitable template for your need.</p> <p>And then replace the verticle menu part with our forums database driven menu part .</p> <p>Hope this will work for you..</p>https://www.aspforums.net:443/Threads/344767/Without-using-database-create-Bootstrap-Vertical-menus-with-collapse-and-expand-using-jQuery/https://www.aspforums.net:443/Threads/344767/Without-using-database-create-Bootstrap-Vertical-menus-with-collapse-and-expand-using-jQuery/Sat, 09 Dec 2017 22:55:03 GMT