Trying to create a changeable button-drop-down from Bootstrap HTML in conjunction with Javascript. The HTML looks as:
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
Would like to be able to change the choices of the drop-down button based on what else is happening on the page. So if user clicks a "profile" button somewhere on the page instead of Choice1, Choice2 and Choice3 there would be Resume, Contact Info, Education etc. The number of items in the menu would change as would the exact values for the display text. Ideally would like to use some type of array to push/pop from the choices. Have tried add, childappend, etc.
Here's one approach - have all your menu items in the HTML, and then use CSS to hide/show the appropriate ones
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul id='my-dropdown' class="dropdown-menu" data-menu-id='default'>
<li class='default'>Choice1</li>
<li class='default'>Choice2</li>
<li class='default'>Choice3</li>
<li class="divider"></li>
<li class='default'>Choice..</li>
<li class='profile'>Resume</li>
<li class='profile'>Education</li>
<li class='badgers'>Eat a badger</li>
</ul>
</div>
CSS:
/* hide all menu items */
ul.dropdown-menu > li {
display: none;
}
/* show menu items if they're relevant */
ul.dropdown-menu[data-menu-id=default] > li.default,
ul.dropdown-menu[data-menu-id=profile] > li.profile,
ul.dropdown-menu[data-menu-id=badgers] > li.badgers {
display: list-item;
}
Now use javascript to change the data-menu-id attribute on your dropdown, and the menu items will change automatically:
var dropdownMenu = document.getElementById('my-dropdown');
dropdownMenu.setAttribute("data-menu-id", "profile");
Lots of other ways to do this, but this is probably the slickest approach. The CSS basically says "if the class of the list item matches the menu id attribute on the parent, make it visible".
An advantage of this approach is that you can make a menu item visible in multiple different menus just by giving it multiple classes:
<!-- will be visible in the 'profile' menu and the 'badger' one -->
<li class='profile badgers'>Badger Resume</li>
Related
Is it possible to have multiple dropdown menus in the same nav class in bootstrap, without putting each menu item in a separate div?
What is happening is that when I click on the dropdown menu , the same dropdown opens up every time( I have two dropdowns for two separate menu items)
I have tried using data-target to open only the dropdown with a specific id but this returns a console error.
<nav>
<a>Menu item 1</a>
<a>Menu item 2</a>
<a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu item 3(dropdown menu 1)</a>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a class="dropdown-item" href="/">dropdown item 1</a>
</div>
<a class="dropdown dropdown-toggle" href="#" style= "display:none;" id="certdropdown" data-toggle="dropdown" data-target="#dropdown2" aria-haspopup="true" aria-expanded="false">Menu item 3 ( dropdown menu 2)</a>
<div class="dropdown-menu" aria-labelledby="dropdown" id ="dropdown2">
<a class="dropdown-item" href="/">dropdown item 1</a>
</div></nav>
If i separate both menu items in separate div, it works but my css gets ruined
No, it's not possible to have two dropdown menus inside the same div. They need to be separated since the code to toggle them looks for the first element in the parent div of the button/anchor. So if they are in the same parent div only the first will be toggled.
Since you haven't provided what part of your CSS gets ruined, I'm gonna guess two problems you might encounter with this.
The dropdown buttons gets wrapped to the next row.
You're selecting links inside your nav by doing nav > a, which ignores the links inside the <div class="dropdown"></div> or you're selecting links inside your nav by doing nav a, which includes the links inside the dropdown-menu.
First solution:
If your dropdown buttons/links gets placed on their own row, it's because they have the display value of block. Add the class d-inline to the <div class="dropdown"> to fix this.
Second solution:
Select and style your links inside the nav with this code:
nav a:not(.dropdown-item) {
// styling
}
This will ignore the links inside the dropdown but style all other links.
If you're having some other problem with your CSS please explain what it is and I will try to help you.
The suggestion here looks good. Essentially, you need to use btn-groups, as shown in this example and just above it in the docs.
Using your code with the display none style and the unnecessary id taken off of the second dropdown:
<nav>
<a>Menu item 1</a>
<a>Menu item 2</a>
<div class="btn-group">
<a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu item 3(dropdown menu 1)
</a>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a class="dropdown-item" href="/">dropdown item 1</a>
</div>
</div>
<div class="btn-group">
<a class="dropdown dropdown-toggle" href="#" id="certdropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu item 3 ( dropdown menu 2)
</a>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a class="dropdown-item" href="/">dropdown item 1</a>
</div>
</div>
</nav>
You can read more specifics about button groups here.
Here is my dropdown list dropdown
but when I click on one of the nested menu in the dropdown(for example:Books Registration), on that page the dropdown menu is collapsed when that page loads, like this Collapsed Dropdown, and here is the dropdown code
<ul class="nav nav-second-level">
<li id="BooksRegistration">
<i class="fa fa-edit"></i> Books Registration
</li>
<li id="AuthorRegistration">
<i class="glyphicon glyphicon-user"></i> Author Registration
</li>
<li id="MembersRegistration">
<i class="glyphicon glyphicon-user"></i> Members Registration
</li>
<li>
Second Level Link<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
So I need you guys to show me how can I make the dropdown list expanded when on of the nested page in that dropdown list is loaded.
I need the Javascript code because I cannot work with jQuery
If you use any browser which provides inspect element feature active that on your dropdown list (In chrome Right click On the dropdown list and then click on the inspect) then toggle your dropdown list at same time look at the css in the inspected side that which class are being changed copy those classes ( that add them to each page which are in dropdown list)
see my example
Those highlighted class or attributes in the style are being shown when click the dropdown list so then I copied those attribute when the dropdown list is being expanded and added them to each page in the dropdown list
I fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.
FIDDLE HERE
Simple HTML:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):
To keep URLs intact with link buttons, use the data-target attribute
instead of href="#".
So your code should be
<a data-target="http://www.google.es" target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click
A simple jQuery solution:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
But the better solution is to replace the data-toggle attribute with data-hover
So your final code will be:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
Remove: data-toggle="dropdown"
It's work for me.
So I'm using bootstrap for my website and I have many div's on each page with a dropdown on each that change the information inside the div from a chart to a table and vise-versa. This works fine except when the user selects an option from the drop down the screen seems to "jump", putting that div at the top of the screen. I found a similar issue for someone else saying it has something to do with the anchor tag(#), but I believe I need mine since the drop down does refer to something.
DROPDOWN:
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle btn-xs" type="button" id="dropdownMenuGraphOneSmall" data-toggle="dropdown" aria-expanded="true">Graph One Options<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuGraphOneSmall">
<!--DROPDOWN MENU-->
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneData">Data</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneChart">Chart</a>
</li>
<li role="presentation">
<a data-toggle="modal" data-target="#enlargeGraphOneModal" role="menuitem" tabindex="-1">Maximize</a>
</li>
<li role="presentation">
<a class="collapse-link" role="menuitem" tabindex="-1" href="#graphOneCollapse">Collapse</a>
</li>
</ul>
</div>
CONTENT IT CALLS:
<div class="content active row" id="graphOneChart">
............
</div>
<div class="content" id="graphOneData">
............
</div>
To keep the page from jumping, you can remove the href="" altogether, and just keep the a tag empty like this <a>, then it wont jump.
If you have to keep the href tag, you can use the e.preventDefault() in your click or on method.
When you use an anchor tag, <a>, it is going to automatically go to the location that the href tag is pointing to. If your link is pointing to an id on the page, the link is going to scroll the screen to the element the link is pointing to. If you want to use the link to call a function, leave the href attribute empty, href="".
If you use a hash # in an anchor, the browser will automatically scroll to the element with the corresponding id.
For example, clicking on:
Data
Will cause the page to jump to:
<div id="graphOneData"></div>
To stop this happening, either change the id of the div or the href of the anchor.
I've created two dropdown using navbar-right.
Here's the fiddle for it.
Issue is... It is working fine in desktop and large screens.
If I resize the browser window. The dropdown gets in a list view with the entire width of the screen when re-sized.
Re-size the result window and you'll come to know my problem.
Help me to overcome this.
Thanks in advance.
This isn't really the way to use a Bootstrap navbar. The idea of the navbar is that it collapses down on mobile, which is what you're seeing happening here. Except, in the Bootstrap navbar, you are supposed to put some containers with specific class names and a <button> etc. You're code just seems to be using navbar-right for the sake of floating it right.
Try this instead. It's 1 list, each <li> has a dropdown. There's no navbar classes. Note that I've added the class nav. This just gives the <a> some padding and colouring on hover etc. You can remove that class and style as required. I also added the class 'pull-right' which is Bootstrap's helper class for floating right.
<div>
<ul class="pull-right nav">
<li class="dropdown">
<i class="glyphicon glyphicon-comment"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="dropdown">
<i class="glyphicon glyphicon-home"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li> Two</li>
<li> Three</li>
</ul>
</li>
</ul>
</div>
Some CSS
div > ul > li {
float: left;
}
This won't be responsive like the navbar, but that seemed to be the problem in the first place.
DEMO