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.3 Level Bootstrap Responsive ASP.Net Menu control for Mobile Phone, Tablet and Desktop display without using database <p>Please refer below Sample.</p> <p><span style="text-decoration: underline;">HTML</span></p> <div class="demo_block"> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&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: #020203; } .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;/head&gt; &lt;body&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&#34; rel=&#34;stylesheet&#34;&gt; &lt;link href=&#34;//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css&#34; rel=&#34;stylesheet&#34;&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { $(&#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;div class=&#34;nav-side-menu&#34;&gt; &lt;div class=&#34;brand&#34;&gt; Brand Logo&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&gt;&lt;a href=&#34;#&#34;&gt;&lt;i class=&#34;fa fa-dashboard fa-lg&#34;&gt;&lt;/i&gt;Dashboard &lt;/a&gt;&lt;/li&gt; &lt;li data-toggle=&#34;collapse&#34; data-target=&#34;#products&#34; class=&#34;collapsed active&#34;&gt;&lt;a href=&#34;#&#34;&gt; &lt;i class=&#34;fa fa-gift fa-lg&#34;&gt;&lt;/i&gt;Menu A &lt;span class=&#34;arrow&#34;&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;ul class=&#34;sub-menu collapse&#34; id=&#34;products&#34;&gt; &lt;li class=&#34;active&#34;&gt;&lt;a href=&#34;#&#34;&gt;CSS3 Animation&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;General&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;Buttons&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;Tabs &amp; Accordions&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;Typography&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;FontAwesome&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;Slider&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;Panels&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;Widgets&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;Bootstrap Model&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;li data-toggle=&#34;collapse&#34; data-target=&#34;#service&#34; class=&#34;collapsed&#34;&gt;&lt;a href=&#34;#&#34;&gt;&lt;i class=&#34;fa fa-globe fa-lg&#34;&gt;&lt;/i&gt;Menu B &lt;span class=&#34;arrow&#34;&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;ul class=&#34;sub-menu collapse&#34; id=&#34;service&#34;&gt; &lt;li&gt;New Service 1&lt;/li&gt; &lt;li&gt;New Service 2&lt;/li&gt; &lt;li&gt;New Service 3&lt;/li&gt; &lt;/ul&gt; &lt;li data-toggle=&#34;collapse&#34; data-target=&#34;#new&#34; class=&#34;collapsed&#34;&gt;&lt;a href=&#34;#&#34;&gt;&lt;i class=&#34;fa fa-car fa-lg&#34;&gt; &lt;/i&gt;Menu C &lt;span class=&#34;arrow&#34;&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;ul class=&#34;sub-menu collapse&#34; id=&#34;new&#34;&gt; &lt;li&gt;New New 1&lt;/li&gt; &lt;li&gt;New New 2&lt;/li&gt; &lt;li data-toggle=&#34;collapse&#34; data-target=&#34;#new3&#34; class=&#34;collapsed&#34;&gt;&lt;a href=&#34;#&#34;&gt;&lt;i class=&#34;fa fa-car fa-lg&#34;&gt; &lt;/i&gt;New New 3 &lt;span class=&#34;arrow&#34;&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;ul class=&#34;sub-menu collapse&#34; id=&#34;new3&#34;&gt; &lt;li&gt;New Service 31&lt;/li&gt; &lt;li&gt;New Service 32&lt;/li&gt; &lt;li&gt;New Service 33&lt;/li&gt; &lt;/ul&gt; &lt;/ul&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;&lt;i class=&#34;fa fa-user fa-lg&#34;&gt;&lt;/i&gt;Profile &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;&lt;i class=&#34;fa fa-users fa-lg&#34;&gt;&lt;/i&gt;Users &lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre> <a class="demo button orange btn btn-red">Demo</a></div>https://www.aspforums.net:443/Threads/124916/3-Level-Bootstrap-Responsive-ASPNet-Menu-control-for-Mobile-Phone-Tablet-and-Desktop-display-without-using-database/https://www.aspforums.net:443/Threads/124916/3-Level-Bootstrap-Responsive-ASPNet-Menu-control-for-Mobile-Phone-Tablet-and-Desktop-display-without-using-database/Thu, 21 Jul 2016 08:46:51 GMT