Keyboard-navigation not properly working in multilevel boostrap dropdown-menu - javascript

At w3schools.com I found this example, just to keep it simple:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<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>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
It works fine, when I navigate using a keyboard. But when I add some further level - I cant reach next level:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<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>
<!-- next level -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1-2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-2A</li>
<li>Page 1-2B</li>
<li>Page 1-2C</li>
</ul>
</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
In my project, I have tried to write a jquery-keyboard handler for dropdown, but the sub-level, still wont toggle.

Related

List of top-bar buttons is going behind a div for some reason

/* Dropdown */
li.dropdown{position: relative;}
ul.dropdown-menu{
position: absolute;
min-width: 120px;
}
ul.dropdown-menu li{
display: block !important;
white-space: nowrap;
}
<!DOCTYPE html>
<html>
<title>Bahrain Bourse</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="Fonts.css">
<link rel="stylesheet" href="Style.css">
<link rel="stylesheet" href="Site.css">
<link rel="stylesheet" href="Slideshow.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
<body>
<!-- Navbar -->
<div class="w3-container w3-black w3-top">
<ul class="nav navbar-nav">
<li><a class="w3-button" style="font-size:24px" href="#"><i class="fa fa-home"></i></a></li>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Corporate Profile</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Quotes & Markets</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Prodcuts & Services</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Investors</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Rules & Regulations</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Brokers</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Bahrain Clear</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Publications</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">News & Events</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</ul>
</div>
</body>
</html>
I am working on a page that has top-bar navigation, and below it a slideshow div with images.
Anyways, when I click on one of the options from top-bar, it somehow display the children options behind the slideshow. I don't what is the reason, so please help!
I attached 2 images to clarify the thing for you.
Thanks!
enter image description here
<div class="w3-container w3-black w3-top">
<ul class="nav navbar-nav">
<li>
<a class="w3-button" style="font-size:24px" href="#">
<i class="fa fa-home"></i>
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Corporate Profile</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</div>

you are missing end tag of parent list </ul> before end tag of </div>
change your code to this
<div class="w3-container w3-black w3-top">
<ul class="nav navbar-nav">
<li>
<a class="w3-button" style="font-size:24px" href="#">
<i class="fa fa-home"></i>
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Corporate Profile</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul> <!--this was missing-->
</div>

Drop down menu behind embedded PDF

I have the following code to create a drop down menu. However, on any page that has an embedded PDF the drop down appears behind the PDF. It only seems to happen in IE. Is there any fix?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Website</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</div>
</nav>
Here's my code for the embedded PDF also:
<object data="file.pdf" id="myDoc" type="application/pdf" width="100%" height="1000px">
alt : HowToCopyADisc.pdf
</object>

CSS Bootstrap - Align Navbar 'Icons' with edge of jumbotron

I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.
See screenshot of current page:
Code:
td {
text-align: left;
vertical-align: central;
padding: 4px;
}
.products {
display: inline-block;
margin: 15px;
}
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>

Try packing your code inside the external div with the class of 'container'.
<div class="container"><!--Pack your code inside the container-->
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div><!--end container-->

Your content probably has a container .container. Also wrap your navbar with this.

Bootstrap 3: Dropdown menu on a fix top bar navbar inverse NOT DROPPING DOWN

It seems that the code is fine but on browser the drop down menu does not work the menu is simply not dropping down... I have attached the js script string as well... I don't know what to do, I can't find the problem...
Thanks,
Max
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down"></span>MENU</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active" class="dropdown">Home<span class="caret"></span>
<ul class="dropdown-menu">
<li>Last Minute</li>
<li>News Letter</li>
<li>Blog</li>
<li>Privacy Policy</li>
</ul>
</li>
<li class="dropdown">Africa<span class="caret"></span>
<ul class="dropdown-menu">
<li>Info</li>
<li>Health</li>
<li>Flights</li>
<li>Ferry</li>
<li>Bus</li>
<li>Train</li>
<li>Overland</li>
</ul>
</li>
<li class="dropdown">Destinations<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown">Burundi<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Bujumbura</li>
<li>Pacakges</li>
<li>Gorilla</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Kenya<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Nairobi</li>
<li>Mombasa</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Rwanda<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Kigali</li>
<li>Pacakges</li>
<li>Gorilla</li>
<li><a href="#"Safaris</a></li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Tanzania<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Dar es Salaam</li>
<li>Arusha</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Kilimanjaro</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Zambia<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Lusaka</li>
<li>Zambezi River</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Zanzibar<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Stonetown</li>
<li>Beach</li>
<li>Pacakges</li>
<li>Festivals</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
</ul>
</li>
<li>Gallery</li>
<li class="dropdown">Serene<span class="caret"></span>
<ul class="dropdown-menu">
<li>About</li>
<li>Team</li>
<li>Services</li>
<li>Contact</li>
<li>Reservations</li>
<li>Payments</li>
<li>Admin</li>
</ul>
</li>
<li class="dropdown">Members<span class="caret"></span>
<ul class="dropdown-menu">
<li>Specials</li>
<li class="dropdown">Rates<span class="caret"></span>
<ul class="dropdown-menu-right">
<li class="dropdown">Burundi<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Kenya<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Rwanda<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Tanzania<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Zambia<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Zanzibar<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
</ul>
</li>
<li>Admin</li>
<li>High Resolutions Pictures</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/dist/js/jquery-2.1.1.min.js"></script>
<script src="/dist/js/bootstrap.js"></script>
<script src="/dist/js/docs.min.js"></script>
<script>$(function () {$('.nav-tabs a:first').tab('show');});</script>
<script>$('a.btn-info').tooltip()</script>
<script>$('.dropdown-toggle').dropdown()</script>
<!-- End Body -->

This works when I throw it into a sample rails 4 app with bootstrap-sass setup. Are you sure that your dropdown menu isn't opening? I had an issue with a previous app where I thought it wasn't opening, but it was just being hidden by the containing element which was accidentally set to 'overflow: hidden;'.
Either way, there doesn't seem to be anything wrong with the code you posted.

Bootstrap 3: triple nested list on a navbar default fixed top inverse does not drop down...

I've been trying to get a the menu to drop, from an navbar navbar fixed top navbar inverse, additionally there is a toggle button to make the menu responsive on a small screen... menu is drop down and then drop right... well it doesn't drop down...
also I'm wondering if we can combine a drop down with an accordion? as the menu is contains a quite a few categories and a lot of sub categories?
Thanks,
Max
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down"></span>MENU</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active" class="dropdown">Home<span class="caret"></span>
<ul class="dropdown-menu">
<li>Last Minute</li>
<li>News Letter</li>
<li>Blog</li>
<li>Privacy Policy</li>
</ul>
</li>
<li class="dropdown">Africa<span class="caret"></span>
<ul class="dropdown-menu">
<li>Info</li>
<li>Health</li>
<li>Flights</li>
<li>Ferry</li>
<li>Bus</li>
<li>Train</li>
<li>Overland</li>
</ul>
</li>
<li class="dropdown">Destinations<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown">Burundi<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Bujumbura</li>
<li>Pacakges</li>
<li>Gorilla</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Kenya<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Nairobi</li>
<li>Mombasa</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Rwanda<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Kigali</li>
<li>Pacakges</li>
<li>Gorilla</li>
<li><a href="#"Safaris</a></li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Tanzania<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Dar es Salaam</li>
<li>Arusha</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Kilimanjaro</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Zambia<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Lusaka</li>
<li>Zambezi River</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Zanzibar<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Stonetown</li>
<li>Beach</li>
<li>Pacakges</li>
<li>Festivals</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
</ul>
</li>
<li>Gallery</li>
<li class="dropdown">Serene<span class="caret"></span>
<ul class="dropdown-menu">
<li>About</li>
<li>Team</li>
<li>Services</li>
<li>Contact</li>
<li>Reservations</li>
<li>Payments</li>
<li>Admin</li>
</ul>
</li>
<li class="dropdown">Members<span class="caret"></span>
<ul class="dropdown-menu">
<li>Specials</li>
<li class="dropdown">Rates<span class="caret"></span>
<ul class="dropdown-menu-right">
<li class="dropdown">Burundi<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Kenya<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Rwanda<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Tanzania<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Zambia<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Zanzibar<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
</ul>
</li>
<li>Admin</li>
<li>High Resolutions Pictures</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

Categories