I am using the bootstrap example to do the navigation bar with a dropdown. If I am on my site's homepage and I click the dropdown it works fine. Then I choose the first sublink and it opens. Then when I click on the dropdown again it adds # to the end of the link in the url and the dropdown does not work, the link then looks like this:
http://domain/report.php#
<li class="dropdown">
Reviews <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Latest Reviews</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
Because report.php page hasn't the link to bootstrap.js and/or bootstrap.css?
Related
I have some strange behaviour for the dropdown that I decided to transfer to multicolumn.
<!-- language-all: lang-html -->
<li class='dropdown'>
<a href='#ExtRep' class='dropdown-toggle' data-toggle='dropdown'>Extended reports <b class='caret'></b></a>
<ul class='dropdown-menu multi-column columns-3'>
<div class='row'>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 1</li>
<li class='divider'></li>
<li><a href='#tabl1' data-toggle='tab'>Report 1</a></li>
<li><a href='#tabl2' data-toggle='tab'>Report 2</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 2</li>
<li class='divider'></li>
<li><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 3</li>
<li class='divider'></li>
<li><a href='#tabl5' data-toggle='tab'>Report 5</a></li>
</ul>
</div>
</div>
</ul>
</li>
Here is the sample: https://jsfiddle.net/Meeshka/0fazzvdh/9
When selecting each line in dropdown for the first time all is working like a charm. But trying to return to report 3 or 5 I see that I can't do that. While inspecting the code I saw that although I switch to Report 1 or 2, the li element of previous report remains with class="active".
<li class='active'><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
This happens only when I switch between reports in different columns.
Reports in the same drop-down column are working OK.
If I add to each column at least 2 lines, I can manage to switch but not in 100% cases, behavior is unpredictable.
Like in this example: https://jsfiddle.net/Meeshka/0fazzvdh/1/
Is the only way to make it wor correctly is to manually trigger class attribute for the element when I switch to another one?
Is it a bug at all or something I miss in the code?
So far I guess there is no "correct" solution to the bug.
If somebody wants a ready and a very straight forwarded solution, here is how I solved it:
<script type='text/javascript'>
$('a[data-toggle="tab"]').on('click', function(event) {
$(this).closest('div.row').find('li').each(function(){
//console.log($(this).attr('class'));
$(this).removeClass('active');
});
});
</script>
Here's how it looks like in fiddle:
https://jsfiddle.net/Meeshka/0fazzvdh/10/
I'm using the getbootstrap code for default navbar.
I want the title name of Drop-down (Test2) also to link to a html page. I added the linkage for the href, however when I'm running the page and clicking on the Drop-down text (Text2) nothing happened
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand">Test</a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-header" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>test1</li>
<li class="dropdown">
Test2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Test21</li>
<li>Create Test22</li>
<li>Test23</li>
</ul>
</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
We're trying to build a very particular interaction/animation with a mega menu that is leading us to a solution where we need to pull the top level items out of the hierarchy.
So, for example, the ideal markup is often something like this:
<ul>
<li>Fruit
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Radish</li>
<li>Potato</li>
</ul>
</li>
<li>Meat
<ul>
<li>Chicken</li>
<li>Beef</li>
</ul>
</li>
</ul>
It's hierarchical and fairly easy to navigate via keyboard as well as voice feedback.
For the interaction we're hoping to create, we really need something like this where the two levels are entirely separated:
<ul>
<li>Fruit</li>
<li>Vegetables</li>
<li>Meat</li>
</ul>
<div>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<ul>
<li>Radish</li>
<li>Potato</li>
</ul>
<ul>
<li>Chicken</li>
<li>Beef</li>
</ul>
</div>
Can this still be made as accessible as the former? If so, what needs to be done to ensure good keyboard navigation as well as screen reader compatibility?
You will need to mark this up as an ARIA menu. The correct markup would be the following:
<ul role="menubar">
<li role="menuitem" aria-haspopup="true" aria-owns="fruitmenu" tabindex="0">Fruit</li>
<li role="menuitem" aria-haspopup="true" aria-owns="vegmenu" tabindex="-1">Vegetables</li>
<li role="menuitem" aria-haspopup="true" aria-owns="meatmenu" tabindex="-1">Meat</li>
</ul>
<div>
<ul role="menu" id="fruitmenu" aria-expanded="true" >
<li role="menuitem" tabindex="-1">Apple</li>
<li role="menuitem" tabindex="-1">Banana</li>
</ul>
<ul role="menu" id="vegmenu" aria-expanded="false" >
<li role="menuitem" tabindex="-1">Radish</li>
<li role="menuitem" tabindex="-1">Potato</li>
</ul>
<ul role="menu" id="meatmenu" aria-expanded="false" >
<li role="menuitem" tabindex="-1">Chicken</li>
<li role="menuitem" tabindex="-1">Beef</li>
</ul>
</div>
Then you need to use JavaScript to implement the controls to manage the expand/collapse of the menus and manipulate the tabindex attribute for focus management (plus move the focus around) and aria-expanded (although depending on the JavaScript keyboard handling this might be superfluous.
Here is an example of an accessible ARIA menu implementation in Polymer although because of the issues with the namespacing in Polymer's shadow DOM emulation, the IDs are not unique as they should be.
A jQuery ARIA menu library
Native Web Components, Polymer and Angular2 ARIA menu implementations
I have the top-bar nav all setup and the dropdowns are displaying as expected. However, when I click on a dropdown link, the dropdown just disappears. The page does not advance to the URI as expected.
I'm stumped...
<section class="top-bar-section second-row">
<ul>
<li class="active"><i class="fa fa-exclamation-triangle"></i><span> Alert Central</span></li>
<li class="has-dropdown">
<i class="fa fa-bar-chart"></i><span> Analytics</span>
<ul class="dropdown">
<li>System Status</li>
<li>My Use</li>
<li>My User's Use</li>
<li>Account Information</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-magic"></i><span> Filter Management</span>
<ul class="dropdown">
<li>Keywords</li>
<li>Categories</li>
<li>Locations</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-users"></i><span> User Management</span>
<ul class="dropdown">
<li>Users</li>
<li>Roles</li>
</ul>
</li>
</ul>
</section>
Did you try to add data-topbar in <section> tag ?
<section data-topbar class="top-bar-section second-row">
I read the question on how to get the dropdown to open on hover which was an excellent fix, however I would like to get the nav li to keep "open" class when going down into "dropdown-menu" ul. Here is a jsfiddle http://jsfiddle.net/someyoungideas/29txm/ for my problem.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Help</a>
<ul class="dropdown-menu">
<li>New Item</li>
</ul>
</li>
</ul>
</div>
</div>
One way to address your concern is to make use of the twitter-bootstrap-hover-dropdown plugin found on github. The plugin is also one of the answers in the old question: https://stackoverflow.com/a/12851616/538962.
Note the use of data-hover="dropdown" to call the plugin.
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
data-delay="1000" data-close-others="false">Help</a>
Here is a working sample:
http://jsbin.com/xuwokuva/1