Bootstrap Responsive ASP.Net Menu control for Mobile Phone, Tablet and Desktop display with multiple Parent and child using jQuery in ASP.Net

Last Reply on Feb 01, 2017 04:20 AM By eshwar

Posted on Jan 25, 2017 02:25 AM

I went throug the following article its very helpfull, but dropdown is coming only for first menu not other menu's why? 

http://www.aspsnippets.com/Articles/Bootstrap-Responsive-ASPNet-Menu-control-for-Mobile-Phone-Tablet-and-Desktop-display.aspx 

Thanks for your support


Posted on Jan 25, 2017 02:51 AM

 

<div>
<ul class="w3-navbar w3-card-2 w3-left-align" style="background-color: powderblue;">
<%-- <ul class="w3-navbar w3-blue w3-card-2 w3-padding-0 ">--%>
<li class="w3-hide-medium w3-hide-large w3-opennav w3-right"><a class="w3-padding-large"
href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i></a></li>
<li><a href="#" class="w3-hover-none w3-hover-text-grey w3-padding-large">Home</a></li>
<%-- <li class="w3-hide-small"><a href="#Gujrat" class="w3-padding-large">Gujrat</a>--%>
<li class="w3-hide-small w3-dropdown-hover"><a href="javascript:void(0)" class="w3-hover-none w3-padding-large"
title="More">Gujrat <i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content">
<ul>
<li><a href="#" title="Coupe" class="selected" style="background-color: #46a7e2;">Coupe</a>
<ul>
<li><a href="#">Citroen C4</a></li></ul>
<ul>
<li><a href="#">Honda CR-Z</a></li></ul>
<ul>
<li><a href="#">BMW 3 Series</a></li></ul>
<ul>
<li><a href="#">Volvo C30</a></li>
</ul>
</li>
<li><a href="#" title="National" class="selected" style="background-color: #46a7e2;">
National</a>
<ul>
<li><a href="#">Volkswagen Passat</a></li></ul>
<ul>
<li><a href="#">Volvo S40</a></li></ul>
<ul>
<li><a href="#">Vauxhall Insignia</a></li></ul>
<ul>
<li><a href="#">Mitsubishi Lancer</a></li>
</ul>
</li>
<li><a href="#" title="News" class="selected" style="background-color: #46a7e2;">News</a>
<ul>
<li><a href="#">Mini Convertible</a></li></ul>
<ul>
<li><a href="#">Renault Megane CC</a></li></ul>
<ul>
<li><a href="#">Peugeot 207 CC</a></li></ul>
<ul>
<li><a href="#">Volkswagen Eos</a></li>
</ul>
</li>
<li><a href="#" title="Business" class="selected" style="background-color: #46a7e2;">
Bussiness</a>
<ul>
<li><a href="#">Land Rover Freelander 2</a></li></ul>
<ul>
<li><a href="#">Audi Q5</a></li></ul>
<ul>
<li><a href="#">Land Rover Discovery 3</a></li></ul>
<ul>
<li><a href="#">Volvo XC90</a></li>
</ul>
</li>
<li><a href="#" title="Sport" class="selected" style="background-color: #46a7e2;">Sport</a>
<ul>
<li><a href="#">Suzuki Equator</a></li></ul>
<ul>
<li><a href="#">Ford F-150</a></li></ul>
<ul>
<li><a href="#">Toyota Tacoma</a></li></ul>
<ul>
<li><a href="#">Nissan Frontier</a></li>
</ul>
</li>
<li><a href="#" title="Magazines" class="selected" style="background-color: #46a7e2;">
Magazines</a>
<ul>
<li><a href="#">Lamborghini Gallardo</a></li></ul>
<ul>
<li><a href="#">Ferrari F430</a></li></ul>
<ul>
<li><a href="#">Aston Martin Vantage</a></li></ul>
<ul>
<li><a href="#">Porsche 911 Turbo</a></li>
</ul>
</li>
</ul>
</div>
</li>
<%-- </li>--%>
<li class="w3-hide-small w3-dropdown-hover"><a href="javascript:void(0)" class="w3-hover-none w3-padding-large"
title="More">About Us <i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">About Us</a> <a href="#">About Us</a>
</div>
</li>
<li class="w3-hide-small"><a href="#National" class="w3-padding-large">National</a></li>
<li class="w3-hide-small"><a href="#News" class=" w3-padding-large">News</a></li>
<li class="w3-hide-small"><a href="#Business" class=" w3-padding-large">Bussiness</a></li>
<li class="w3-hide-small"><a href="#Sport" class=" w3-padding-large">Sport</a></li>
<li class="w3-hide-small"><a href="#Magezines" class=" w3-padding-large">Magazines</a></li>
<%-- <li class="w3-hide-small w3-right"><a href="javascript:void(0)" class="w3-padding-large w3-hover-red">
<i class="fa fa-search"></i></a></li>--%>
</ul>
</div>
<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-bottomtop" style="margin-top: 46px">
<ul class="w3-navbar w3-left-align">
<li class="w3-dropdown-hover"><a href="javascript:void(0);" title="Gujrat">Gujart <i
class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-light-grey w3-card-4">
<ul>
<li><a href="#" style="border-style: ridge;">Coupe</a>
<li><a href="#">Citroen C4</a></li>
<li><a href="#">Honda CR-Z</a></li>
<li><a href="#">BMW 3 Series</a></li>
<li><a href="#">Volvo C30</a></li>
</li>
</ul>
<ul>
<li><a href="#" style="border-style: ridge;">National</a>
<li><a href="#">Volkswagen Passat</a></li>
<li><a href="#">Volvo S40</a></li>
<li><a href="#">Vauxhall Insignia</a></li>
<li><a href="#">Mitsubishi Lancer</a></li>
</li>
</ul>
<ul>
<li><a href="#" style="border-style: ridge;">News</a>
<li><a href="#">Mini Convertible</a></li>
<li><a href="#">Renault Megane CC</a></li>
<li><a href="#">Peugeot 207 CC</a></li>
<li><a href="#">Volkswagen Eos</a></li>
</li>
</ul>
<ul>
<li><a href="#" style="border-style: ridge;">Bussiness</a>
<li><a href="#">Land Rover Freelander 2</a></li>
<li><a href="#">Audi Q5</a></li>
<li><a href="#">Land Rover Discovery 3</a></li>
<li><a href="#">Volvo XC90</a></li>
</li>
</ul>
<ul>
<li><a href="#" style="border-style: ridge;">Sport</a></li>
<li><a href="#">Suzuki Equator</a></li>
<li><a href="#">Ford F-150</a></li>
<li><a href="#">Toyota Tacoma</a></li>
<li><a href="#">Nissan Frontier</a></li>
</ul>
<ul>
<li><a href="#" style="border-style: ridge;">Magazines</a></li>
<li><a href="#">Lamborghini Gallardo</a></li>
<li><a href="#">Ferrari F430</a></li>
<li><a href="#">Aston Martin Vantage</a></li>
<li><a href="#">Porsche 911 Turbo</a></li>
</ul>
</div>
</li>
<li class="w3-dropdown-hover"><a href="javascript:void(0)" title="More">About Us <i
class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">About Us</a> <a href="#">About Us</a>
</div>
</li>
<li><a class="w3-padding-large" href="#tour">Nation</a></li>
<li><a class="w3-padding-large" href="#contact">News</a></li>
<li><a class="w3-padding-large" href="#Business">Business</a></li>
<li><a class="w3-padding-large" href="#Business">Sport</a></li>
</ul>
</div>

hope thiswill help u


Posted on Feb 01, 2017 04:19 AM

Thank you dharmendr its working


Posted on Feb 01, 2017 04:20 AM

Thank you Jordan its working fine