Fade in and fade out elements with hover in jQuery - javascript

I'm working with a menu. If the user moves the cursor over principal elements of the menu, it shows a sub-menu (it has a delay to hide), but if I move the cursor over another principal element, the previous element is still showing behind the new element (and is only hide passing the delay).
How can hide the previous element when I pass the cursor over another principal element?
Below is the menu:
$('li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>


I changed your second menu id to #drop-two.
$(document).ready(function(){
$('.dropdown-menu, .dropdown-menu2').hide();
$('#drop-to').mouseover(function() {
$('.dropdown-menu').fadeIn();
})
$('#drop-to').mouseout(function() {
$('.dropdown-menu').fadeOut(1000);
})
$('#drop-two').mouseover(function() {
$('.dropdown-menu2').fadeIn();
})
$('#drop-two').mouseout(function() {
$('.dropdown-menu2').fadeOut(1000);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-two" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu2 dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>

Related

html menu and sub menu active

I assign an active class in my menu, but the active class is not removed from the mobile menu, it always remains active. And also, if the subcategory is selected, I want the category itself to have an active class. I tried, I couldn't. Thank you in advance to the friends who helped.
For example, if category1.php page is open, "category" has the deactivated class.
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(url.indexOf(anchor.href) > -1){
li.classList.add("active");
}
});
}
updateMenu(window.location.href);
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>

window.location.pathname is the property you need. Once you have it, you can find the filename (last part of the whole pathname) by using .substr and .lastIndexOf.
In this code snippet, the active item is the parent of JS, I used that as an example since the location.href for these SO snippets is https://stacksnippets.net/js, hence the pathname is /js, and finally, the filename is js.
Check the code and you'll see what I mean
HIH
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(anchor.href.indexOf(url) > -1) {
const parentLI = $(li).parents('.menu-item').get(0)
if(parentLI)
parentLI.classList.add("active");
else
li.classList.add("active");
}
});
}
const pathname = window.location.pathname, filename=pathname.substr(pathname.lastIndexOf('/') + 1);
updateMenu(filename);
li.active > a span{
font-weight: bold !important;
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS too</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>

Angular 4 Bootstrap Menu Stay Open on Page Swap

So I am developing an Angular 4 app using a bootstrap menu. The Nav is a component that is shown in all views of the app. When you use the submenu link you get a page swap but the nav resets to the default state. I need it to remember the last state it was in or prevent the collapse from happening. I looked at examples on Stack that use jQuery, however, I am using Angular 4, so that would not be a solution for me here. Check out the other examples I have looked at for solutions:
How do I keep the child menu open when loaded?
bootstrap dropdown open on pageload
Keep Bootstrap Dropdown open in Navbar no matter what
How to keep a submenu open when the page changes
Bootstrap toggle menu expand on page load
The one using localStorage was an interesting idea but I couldn't figure that out. Anyways here is the code I have:
nav.component.html
<div class="nav flex-column col-sm-3 col-md-2">
<div class="nav-title" (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
<div [ngClass]="search">
<img src="../../assets/img/INEO-LOGO.svg" alt="ineo-logo" class="logo">
<i class="fa fa-search fa-1x search-icon" aria-hidden="true"></i>
<input type="text" class="form-control nav-subtext" placeholder="Search Transferee">
<i class="glyphicon glyphicon-remove-circle clear" (click)="clear()"></i>
</div>
</div>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Transferee Dashboard</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Setup</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Accounting</a>
</li>
<li class="nav-menu nav-text" data-toggle="collapse" data-target="#collapse" (click)="toggleCollapse($event)" id="toggle">
<a class="{{nav}}" id="tools">Tools</a>
<div class="collapse" id="collapse">
<ul class="submenu">
<li class="nav-subtext">
<a routerLink="/approvals">Approvals</a>
</li>
<li class="nav-subtext">
<a routerLink="/change-auth">Change Authorization ID</a>
</li>
<li class="nav-subtext">
<a routerLink="/copyfile">Copy Files</a>
</li>
<li class="nav-subtext">
<a routerLink="/email">Email</a>
</li>
<li class="nav-subtext">
<a routerLink="/templates">Email Templates</a>
</li>
<li class="nav-subtext">
<a routerLink="/encrypt">Encryption</a>
</li>
<li class="nav-subtext">
<a routerLink="/excel-import">Excel Import</a>
</li>
<li class="nav-subtext">
<a routerLink="/formulas">Formulas</a>
</li>
<li class="nav-subtext">
<a routerLink="/global-updates">Global Updates</a>
</li>
<li class="nav-subtext">
<a routerLink="/import-export">Import Export</a>
</li>
<li class="nav-subtext">
<a routerLink="/maintain-log">Maintain Log</a>
</li>
<li class="nav-subtext">
<a routerLink="/preferences">Preferences</a>
</li>
<li class="nav-subtext">
<a routerLink="/restore-delete-history">Restore/Delete/History</a>
</li>
<li class="nav-subtext">
<a routerLink="/task-policies">Task Policies</a>
</li>
<li class="nav-subtext">
<a routerLink="/ticklers">Ticklers</a>
</li>
<li class="nav-subtext">
<a routerLink="/unlock">Unlock Records</a>
</li>
<li class="nav-subtext">
<a routerLink="/user-tasks">User Tasks</a>
</li>
</ul>
</div>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Reports</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Custom</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Tax</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Lump Sum</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Global Compensation</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">System Information</a>
</li>
</div>
nav.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
nav: string = '';
show: boolean = false;
search: string = 'search';
toggleCollapse() {
// change show
this.show = !this.show;
// Change style of active link
if (this.show !== true) {
this.nav = 'nav-link';
} else {
this.nav = 'nav-link-active nav-menu-active-text';
}
}
mouseEnter($event) {
this.search = $event.type == 'mouseenter' ? 'search-box' : 'search';
}
mouseLeave($event) {
this.search = $event.type == 'mouseleave' ? 'search' : 'search-box';
}
clear() {
let text = document.getElementsByTagName('input');
for (let i = 0; i < text.length; i ++) {
if(text[i].type === 'text' && text[i].value !== '') {
text[i].value = '';
}
}
}
constructor() { }
ngOnInit() {
}
}
Any help would be great!
Also if you provide an answer please explain it.
Thanks

The answer to this is that the toggled list has to be outside the parent element. The problem is by clicking a submenu item the parent is refiring the toggle.
See HTML:
<div class="nav flex-column col-sm-3 col-md-2">
<div class="nav-title" (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
<div [ngClass]="search">
<img src="../../assets/img/INEO-LOGO.svg" alt="ineo-logo" class="logo">
<i class="fa fa-search fa-1x search-icon" aria-hidden="true"></i>
<input type="text" class="form-control nav-subtext" placeholder="Search Transferee">
<i class="glyphicon glyphicon-remove-circle clear" (click)="clear()"></i>
</div>
</div>
<li class="nav-menu nav-text">
<a class="nav-link">Transferee Dashboard</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Setup</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Accounting</a>
</li>
<li class="nav-menu nav-text" (click)="toggleCollapse()">
<a [ngClass]=" show ? 'active' : ''">Tools</a>
</li>
<ul class="submenu" *ngIf="show">
<li class="nav-subtext">
<a >Approvals</a>
</li>
<li class="nav-subtext">
<a >Change Authorization ID</a>
</li>
<li class="nav-subtext">
<a >Copy Files</a>
</li>
<li class="nav-subtext">
<a >Email</a>
</li>
<li class="nav-subtext">
<a >Email Templates</a>
</li>
<li class="nav-subtext">
<a >Encryption</a>
</li>
<li class="nav-subtext">
<a >Excel Import</a>
</li>
<li class="nav-subtext">
<a >Formulas</a>
</li>
<li class="nav-subtext">
<a >Global Updates</a>
</li>
<li class="nav-subtext">
<a >Import Export</a>
</li>
<li class="nav-subtext">
<a >Maintain Log</a>
</li>
<li class="nav-subtext">
<a >Preferences</a>
</li>
<li class="nav-subtext">
<a >Restore/Delete/History</a>
</li>
<li class="nav-subtext">
<a >Task Policies</a>
</li>
<li class="nav-subtext">
<a >Ticklers</a>
</li>
<li class="nav-subtext">
<a routerLink="unlock">Unlock Records</a>
</li>
<li class="nav-subtext">
<a >User Tasks</a>
</li>
</ul>
<li class="nav-menu nav-text">
<a class="nav-link">Reports</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Custom</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Tax</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Lump Sum</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Global Compensation</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">System Information</a>
</li>
</div>

How to prevent submenus of submenu from opening when clicking on first parent?

I have a menu and in a mobile view.
This is my Javascript:
$('#main-menu li').click(function(e)
{
$(".mobile-menu-class").css("position", "absolute");
var $el = $('ul',this);
$('#main-menu > li > ul').not($el).slideUp();
$el.stop(true, true).slideToggle(400);
});
$('#main-menu > li > ul > li').click(function(e)
{
e.stopPropagation();
});
And this is my HTML:
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Live Timing
<ul class="sub-menu">
<li>MX World/European</li>
<li>MX Austria</li>
<li>SM Austria</li>
<li>MX Slovenia</li>
</ul>
</li>
<li class="parent"> Motosross
<ul class="sub-menu">
<li>
<a class="parent" href="#">MX Austria</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2007</li>
<li>2006</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX Slovenia Drzavno</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX Slovenia Pokalno</a>
<ul class="sub-menu hidden-submenu">
<li>2016</li>
<li>2015</li>
<li>2008</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX Hrvatska</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX European / World</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
<li>2006</li>
</ul>
</li>
</ul>
</li>
<li class="parent">
Supermoto
<ul class="sub-menu">
<li><a class="parent" href="#">SM Austria</a>
<ul class="sub-menu">
<li>2016</li>
</ul>
</li>
</ul>
</li>
<li class="parent">
Karting
<ul class="sub-menu">
<li><a class="parent" href="#">Kart Slovenia</a>
<ul class="sub-menu">
<li>2016</li>
<li>2008</li>
<li>2007</li>
<li>2006</li>
</ul>
</li>
</ul>
</li>
<li class="parent">
Cross-Country
<ul class="sub-menu">
<li>
<a class="parent" href="#">CC Slovenia</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2012</li>
<li>2011</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
<li class="search-btn"> <i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
Everything is working fine, But when I click on a menu which has a submenu and which has a submenu that also has some more submenus, they get opened before I click on them.
How can fix this?

bootstrap large drop-down menu stuck left

i am having an issue with a menu using bootstrap. The small drop down menus open fine and are aligned however the large drop down menus always align left even if the menu heading is on the far right of the screen
i am looking to have one of the following happen
1 - open in the middle below the heading
2 - open to the right if its to far left
3 - open to the left if its to far right
i have created a fiddle of the issue
https://jsfiddle.net/fu847jnw/2/
how can i acheive the above
<div class="navbar-cont">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li>Home
</li>
<li>Products
</li>
<li>About Us
</li>
<li>Contact Us
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Us
</li>
<li>Contact Us
</li>
<li>My Account
</li>
<li>Wish List
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Large Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
This Is Really Large Title <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Just Another Menu Type<b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Us
</li>
<li>Contact Us
</li>
<li>My Account
</li>
<li>Wish List
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Tmenu <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Here is an example using your code. In the HTML I added a class tmenu-menu to your last menu item, like this:
Tmenu <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row tmenu-menu">
Then added this code in the CSS
#media (min-width: 1200px) {
.tmenu-menu {
right: 0;
left: inherit;
}
}
Now when you view your site and the width of your browser is 1200px or bigger you will see the large menu sit on the right hand side of your screen. Then when you shrink down the menu once below 1200px the menu will go back to the left side. One SO answer provides the various break points sizes but these are also available on the bootstrap website.
You will have to add your own custom classes and position the menus based on where you want them for each width size. I have updated your js.fiddle with my example code (I also left in the different media sizes that BS uses). This code isn't complete but should help you get pointed in the right direction. Hope that helps.

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.

Categories