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 one year ago By eshwar

Posted one year ago

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 one year ago

 

<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 one year ago

Thank you dharmendr its working


Posted one year ago

Thank you Jordan its working fine