Well, as the title said, my problem is that after add ajaxToolkit:SlideShowExtender to my Main.aspx, that page's Bootstrap dropdown menu stop working, and when i go to other page, drop down menu comeback to life itself. If i remove ajaxToolkit:SlideShowExtender from my Main.aspx, the Bootstrap dropdown menu begin to work again. So how can i put these 2 together?
I put my dropdown menu to my master page and all other pages is using that master page. Everything work fine unless i add ajaxToolkit:SlideShowExtender.
I also put these scripts on the head of the master page.
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
And these are the drop down menu code in the master page.
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Item</li>
<li class="dropdown">
Account<b class="caret"></b>
<ul class="dropdown-menu">
<li>Log in</li>
<li>Registration</li>
<li>Log out</li>
<li>Modify</li>
</ul>
</li>
<li class="dropdown">
Orders<b class="caret"></b>
<ul class="dropdown-menu">
<li>Cart</li>
<li>History</li>
</ul>
</li>
<li id="adminControl" runat="server" visible="false" class="dropdown">
Admins<b class="caret"></b>
<ul class="dropdown-menu">
<li>Item management</li>
<li>Order managerment</li>
<li>Article managerment</li>
</ul>
</li>
<li>Search</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!--/.nav-collapse -->
</div> <!--/container -->
</div> <!--/navbar navbar-default navbar-fixed-top -->
Than you all for reading this question and for all your help.
Related
I am using js mmenu on the shopify site. I run into issue which I cant figure out.
When there is a dropdown menu, parent link becomes not clickable and has #mm-0 at the end of it. I need to keep it as is and link to its own page.
You can see code below. Right now Links "Products" and "About" go to https://www.irestorelaser.com/products/irestore-laser-hair-growth-system#mm-0 . Any help would be great!
<div id="nav" >
<ul>
<li >How it works</li>
<li class="Selected">Products
<ul>
<li class="Selected">Laser Helmet</li>
<li >All Products</li>
</ul>
</li>
<li >About
<ul>
<li >Warranty</li>
</ul>
</li>
</ul>
</div>
I've following Bootstrap HTML code :
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
<ul class="dropdown-menu">
<li>List</li>
<li>Add new project</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Now I want to hide the drop-down menu using jQuery code i.e. I want to hide the drop-down menus List and Add new project.
I want this to be done in document-ready function. You can add the specific ids to the suitable tag to make the thing work.
Thanks.
$( document ).ready(function() {
$("ul.dropdown-menu").children().hide();
});
I have a responsive dropdown on my webpage. Works as intended on desktop/laptop browsers. However, when you use a phone or ipad with a smaller screen, the nav gets hidden after I click a link that should present another dropdown menu.
Here's the js function. -
$('.navbar-collapse a').click(function(){
$(".navbar-collapse").collapse('hide');
});
and the html -
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<img src="images/Logo-banner.jpg" height="auto" width="auto" />
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Computer, Tablet & Phone Services</li>
<li>On Site Services</li>
<li>Remote Services</li>
<li>Managed Services</li>
<li>Data Backup Services</li>
<li>Surveillance Systems</li>
<li>New & Used Computer Sales</li>
<li>Custom Built Computers</li>
<li>VOIP Phones</li>
<li>Web Design & Hosting</li>
</ul>
</li>
<li>Shop Online</li>
<!--<li>About</li>-->
<li>Download</li>
<!--<li>Contact</li>-->
<li>Contact</li>
</ul>
</div>
</div>
</nav>
What I'm thinking I have to do is create a conditional in the js that will not execute the hide function if it is of a certain class. I really don't have much experience with js though. Here's what I tried.
$('.navbar-collapse a').click(function(){
if(!$(this).hasClass("ddown")) {
$(".navbar-collapse").collapse('hide');}
});
Any tips? Suggestions? Solutions? Anybody see this before?
For anyone having the same problem with bootstrap responsive dropdowns auto-closing after being clicked inside parent nav-menu here is the solution.
Add a class to the link you would click on that would drop down the menu, name it whatever you want (i named mine "ddown):
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Computer, Tablet & Phone Services</li>
<li>On Site Services</li>
<li>Remote Services</li>
<li>Managed Services</li>
<li>Data Backup Services</li>
<li>Surveillance Systems</li>
<li>New & Used Computer Sales</li>
<li>Custom Built Computers</li>
<li>VOIP Phones</li>
<li>Web Design & Hosting</li>
</ul>
</li>
<li>Shop Online</li>
Then add this if to your navbar function in your javascript:
$('.navbar-collapse a').click(function(){
if($(this).hasClass("ddown")) {
event.preventDefault();}
else {
$(".navbar-collapse").collapse('hide');
}
});
That's it, Good luck.
I've now tried several things and googled a lot, but so far to no avail.
I've been working on a project with twitter bootstrap and made a dropdown in the navigation. Everything works on the desktop but einwadnfrei on the smartphone I have extreme problems and can click a link in the dropdown. The menu includes with every click.
This one i have write in the index
<div class="nav-collapse collapse">
<ul class="nav">
<li class="index">tpno</li>
<li class="diensten dropdown">
DIENSTEN <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li>Interim Management</li>
<li>Case Management</li>
<li>Conflictbemiddeling</li>
</ul>
</li>
<li class="profile">Profiel</li>
<li class="contact">Contact</li>
</ul></div>
And this is what i include
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script>
jQuery(function($) {
$('.dropdown-toggle').dropdown()
});
</script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript" src="assets/js/bootstrap-dropdown.js"></script>
But it doesnt work on smartphone. I have forgotten something or done wrong? would be grateful for your help.
Can someone please point me to where I can go to find info on how to create a mobile menu (drop list) for the code bellow? All the tutorials that I have found has been on switching pages, nothing for filters such as bellow. I am using the isotop plugin to navigate through my site.
<!-- SMOOTH MENU DIV -->
<div id="nav-button"> </div>
<nav id="smooth-menu" role="navigation" class="main-nav-links responsive-nav">
<ul id="filters" data-option-key="filter">
<li>Home</li>
<li>About Danielle</li>
<li id="one">My Work
<ul class="second-level">
<li>Kids and Family</li>
<li>Babies</li>
<li class="last">Seniors</li>
</ul>
</li>
<li id="two">Info
<ul class="second-level">
<li>Session Fees</li>
<li>Finished Art</li>
<li class="last">About Your Session</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<!-- end nav -->
I ended up using an alternative solution. I went with a different menu.