With my HTML code I have created a dropdown menu within a tab. I need to add content to those individual "tabs" in the dropdown menu. I need help linking those together.
<div class="container">
<ul class="nav nav-tabs">
<li class="active tab_class" style="background: #009933"><a data-toggle="tab" href="#about">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" style="background: #009933" data-toggle="dropdown" href="#">Teaching
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li class = "tab_class" style="background: #009933"><a data-toggle="tab" href="#research">Research</a></li>
</ul>
</div>
This is currently what my code looks like creating the tabs. How can I correctly use classes and href to add content to each subtab within? I am thinking I may not have correctly made subtab's active, but i'm also not sure how to go about doing that. I am also using bootstrap within HTML and have that correctly imported.
Any help would be appreciated! Thanks
Related
When I open up the dropdown menu, only the Home tab is clickable. The rest act like regular text...
<nav class="navbar">
<ul class="nav navbar-nav ">
<li class="aktivan">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Cakes</li>
<li>Muffins</li>
<li>Coffee</li>
</ul>
</li>
<li>About us</li>
<li>Orders</li>
</ul>
</nav>
Removing the href="#" from the dropdown-toggle should fix it
To keep URLs intact with link buttons, use the data-target attribute instead of href="#"
dropdowns via data attributes
I believe the href attribute is assigning the target # for the dropdown causing it not to work.
I'm working on a project with bootstrap. I just included a sub menu in the pills navbar but it doesn't work. When I click on messages nothing happens
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Home</li>
<li role="presentation">Home</li>
<li class="dropdown" role="presentation">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">About</a>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li>Trash</li>
</ul>
</li>
<li role="presentation">Users</li>
<li role="presentation">Messages</li>
<li role="presentation">Contact</li>
</ul>
Any help with the script above. Thanks
See how data-toggle="dropdown" is in the anchor tag for About? It appears that you have the dropdown menu under About, not Messages.
Also, be sure to include the Bootstrap JavaScript. There should be a tag like <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> in the <head> section of your HTML. This is what enables the dropdown to work.
I have the following bootstrap menu, the last item in this menu is "More" which is a dropdown contains the left items from that menu, the problem is when user minimize the window the last items start hiding include "More" item.
So my question is: how to avoid the last item ("More") from being hide?
I searched the internet I could not find any solution, I found many are talking about pull left but it did not work for me.
Here is my code:
<div class="collapse navbar-collapse " id="category-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li >
a
</li>
<li >
b
</li>
<li >
c
</li>
<li >
d
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown">
More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>
Any suggestion please?
Feel free to ask for more information.
I'd check the styles over - could be some class name with a breakpoint for display:none on that class. Have a look in Devtools and see what it's throwing out?
As far as your code goes, it looks fine so just check over the CSS, positioning and display, etc.
<div class="collapse navbar-collapse" id="category-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
a
</li>
<li>
b
</li>
<li>
c
</li>
<li>
d
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>
I am using the bootstrap tabmenu but now I want to make it a dropdown menu. I know that bootstrap have native support for this but I want the dropdown to be toggled only if the caret is clicked, if the rest of the menu item area are clicked that should work as an ordinary link. Do anyone know how to do this?
Here is what the code looks like today
jsfiddle-example
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
I have a menu which works fine , when i focus out the menu closes automatically as expected .
I have a requirement to add a Drop-down to the menu so i can do my selections respectively but strange thing happening is when i try selecting something in dropdown the menu closes automatically.
Html:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li><ul class="dropdown"><li><select><option>cool</option><option>cooler</option><option>coolest</option></select></li></ul></li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
sample here which shows the issue
PS: Actually its a IE issue in my local its works fine in chrome tough in fiddle it doesn't work anywhere.
I don't want menu to loose focus when i am selecting something which is inside the menu .