Ive got this dropdown styled with bootstrap:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="posuvnik">15min <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> 15min </li>
<li> 1hod </li>
</ul>
</li>
and I want that dropdown menu to be rolled down on a page load, anyone know how to achieve that? thanks in advance :)
The dropdown is toggled with having the additional class 'open' added to the enclosing <li> element. So if you want to have it open on page loading:
<li class="dropdown open">
That will do the trick.
This little bit of jQuery script (I'm assuming you've loaded it becasue you're using Bootstrap) ought to do the trick. Once the DOM has loaded, it sends a click() to the dropdown toggle button.
$(document).ready(function () {
$("#posuvnik").click();
});
There is probably a way to do it in straight CSS, but without seeing more of your code it's hard to know.
Related
To preface, sorry if the answer lies in the javascript but I'm currently taking a course online and haven't yet learned javascript so I can't troubleshoot too well there since my understanding is really lacking right now.
I have a bootstrap dropdown menu with nav-pills below. My issue is that when I click a link in my work dropdown and the href links to another spot on the page (single page website) the menu doesn't close out after clicking. If the href is empty with a "#" then it closes out. I can't for the life of me solve this.
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
<ul class="dropdown-menu">
<li>
Work 1
</li>
<li>
Work 2
</li>
</ul>
</li>
Let me know if I'm missing anything (javascript?) this is my first post.
Not too sure of the source of the problem but this is a nice work-around to forcefully close the dropdown menu.
<script>
//Can go in a sperate .js file as well
function closeDropdowns() {
$(".dropdown-toggle").each(function() {
$(this).attr("aria-expanded", false);
$(this).parent("li").removeClass("open");
});
}
</script>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
<ul class="dropdown-menu">
<li>
Work 1
</li>
<li>
Work 2
</li>
</ul>
When ever the link is clicked set back the.
aria-expanded to true on the main anchor tag with class dropdown-toggle
$('ul.dropdown-menu li a').on('click',function(){
$(this).closest('li.dropdown').find('a.dropdown-toggle').attr('aria-expanded','false');
});
I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});
I am trying not to trigger bootstrap tab click in asp.net. Here is my HTML
<div class="addNewTab">
<ul class="nav nav-tabs tabs" data-tabs="tabs">
<li id="li1" class="deactiveLink"><a href="#tabBasicInfo" onclick="return getit();"
data-toggle="tab">Step 1: Details<span> </span></a></li>
li id="li2" class="deactiveLink"><a href="#tabAdditionalInfo" onclick="return getit();"
data-toggle="tab">Step 2: Photos<span></span></a></li>
<li id="li3" class="deactiveLink"><a href="#tabAdditionalFeature"
onclick="return getit();" data-toggle="tab">Step 3:Add. Info <span></span></a>
</li>
<li id="li4" class="deactiveLink"><a href="#tabPreview" onclick="return getit();"
data-toggle="tab">Step 4: Preview<span></span></a></li>
</ul>
</div>
and here is my javascript function
function getit() {
return false;
}
I have tried this in getit()
$('.addNewTab >.nav-tabs > li:nth-child(5)').find('a').trigger('click');
I am new to Bootstrap therefore I am unable to do my task. I do not want to use divs for that. I want to use tab which cannot be clicked. Am I missing something here in my code? What do I need to do?
According to bootstrap 3 docs http://getbootstrap.com/javascript/#tabs you can active the tabs either manually be javascript or by adding data-toggle="tab" or data-toggle="pill" on an element.
So you can not add the data-toggle="tab" or data-toggle="pill" but rather active them with javascript when you need it.
As already mentioned in the comments you can remove the href from <a> elements to prevent browser's attemts to navigate to a given url on click, or assign onclick handler to these a elements and use event.preventDefault()
I'm trying to open a submenu from the parent link using the mmenu jquery plugin, and almost got it, but once open the submenu, the function also close the menu (the main menu opened from the left).
I got this:
<nav data-role="navbar" data-iconpos="left" id="leftMenu">
<ul>
<li><a id="a_home" href="/" >Home</a></li>
<li><a id="a_what" href="/" >What to do</a></li>
<li>
<a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
<ul id="guidesSubmenu">
<li>Beer Guide 2013</li>
<li>Bar Guide 2013</li>
<li>Cheap Eats 2013</li>
</ul>
</li>
<li>
<a id="a_sections" href="#" >Sections</a>
</li>
</ul>
</nav>
So, when I click on the Guides link, opens the submenu, but also close the main menu, animating to the right.
Anybody knows how is the right way to open a submenu?
This is the plugin page: http://mmenu.frebsite.nl/
Is not a simple jquery javascript.
Thanks.
The jquery.mmenu plugin automatically appends a "open-submenu"-button to every LI with an UL inside it. If the A doesn't link to an actuall page, all you need to do, is replace it with a SPAN:
<ul>
<li><span>Guides</span>
<ul>
<li>Beer Guide 2013</li>
</ul>
</li>
</ul>
$('li').hover(function(){
$('ul',this).slideDown();
},function(){
$('ul',this).slideUp();
});
Just change the selector with your own li tags class name.I think you can also toggle method.
$('#li').toggle(function() {
$('ul',this).slideDown();
}, function() {
$('ul',this).slideUp();
});
We ran into this exact same scenario today, and after a good amount of research used the following solution (adapted to your situation). It seems like they've changed things around so the data attributes on the elements are not clearly supported, so we moved the initialization to JavaScript.
HTML (did not change):
<nav data-role="navbar" data-iconpos="left" id="leftMenu">
<ul>
<li><a id="a_home" href="/" >Home</a></li>
<li><a id="a_what" href="/" >What to do</a></li>
<li>
<a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
<ul id="guidesSubmenu">
<li>Beer Guide 2013</li>
<li>Bar Guide 2013</li>
<li>Cheap Eats 2013</li>
</ul>
</li>
<li>
<a id="a_sections" href="#" >Sections</a>
</li>
</ul>
</nav>
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$("#leftMenu").mmenu({
onClick: {
close: false
}
});
});
</script>
Specifying the close option as false makes it so it does not close the mmenu when you click on the li, and allows the onclick event handler to open up the sub-menu item.
I am using MVC 5. I have created navigation drop down. This is my code:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="menu">
Report
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="myselector">a </li>
<li>b </li>
</ul>
</li>
Now I have same controller but different actions for a and for b.
How to move to another page while click a and b. Is there any click event available?
I think it work with some js code, but you does not attach any js here. So, you need to add something to your html code for identify your links as different links.
Something like this
<li class="myselector action-show-a"><a>A</a></li>
<li class="myselector action-show-b"><a>B</a></li>
Then you need to select your elements using .myselector and add to them specified action according to .action-show-a and .action-show-b. For this purpose you need to add eventlistners to onclick actions.