HTML CODES:
<header>
<nav>
<ul>
<li class="asmenu">Menu1 <i class="fa fa-caret-down"></i>
<ul class="submenu deactive">
<li>Menu1-a</li>
<li>Menu1-b</li>
<li>Menu1-c</li>
<li>Menu1-d</li>
</ul>
</li>
<li class="asmenu">Menu2 <i class="fa fa-caret-down"></i>
<ul class="submenu deactive">
<li>Menu2-a</li>
<li>Menu2-b</li>
<li>Menu2-c</li>
<li>Menu2-d</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
</ul>
</nav>
</header>
CSS CODES:
header nav ul li {
position: relative;
}
.submenu {
position: absolute;
width: 20rem;
height: 20rem;
background-color: darkgoldenrod;
margin-top: 2rem;
border-radius: 0rem 0rem 2.5rem 0rem;
}
.active {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.deactive {
display: none;
}
Question is how can i make submenu using these codes in Javascript . I want to use "toggle" but i didn't it. I tried to a few times but because of i have 2 submenu, i have error always. Firstly i tried to mouseover and mouseout but when i hover with mouse to menu2, it is opening menu1's submenu or anything opening.
try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
source
Related
I am well aware that this is kinda of an idiot question,but I am rather new to JS and JQuery and how to link it to HTML code, but none of the similar threads lead to a solution.
By some miracle, I found and modified some JSFiddle code into this: https://jsfiddle.net/z7L2re8j/
Now, I'm trying to load JQuery from a CDN, and I also have a JS file with the functions to make the HTML (and CSS) work properly.
HTML's file head:
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="images/icon.webp">
<link rel="stylesheet" href="./new.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script>
<script type="text/javascript" src="./old.js"></script>
</head>
<body>
<!-- Html body -->
</body>
</html>
The files old.js and new.css are essentially the code that is written on the corresponding tabs in the JSFiddle link.
However, when I run the HTML code with the links as you see, it's not the same as the preview in JSFiddle. And I don't know what I am doing wrong.
So, am I doing the linking of the files correctly, and if not, what are my mistakes?
Thank you in advance
If your question is how to link to old.js and new.css, look in the network tab and see where the browser is looking for them
To use CDN for jQuery and Bootstrap and get that information from a JSFiddle you can do this:
Click on resources in JSFiddle
Right click on the links and open in new tab, you will see they are Bootstrap v3.3.7
Go to https://getbootstrap.com/docs/5.0/getting-started/introduction/ and get the latest or search google first for bootstrap CDN: I found for example https://www.bootstrapcdn.com/ and from there you can take the versions you want/need
Alternative since I can see your JSFiddle is not bootstrap 5 compatible:
https://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/
$('ul.nav li.dropdown').hover(function() {
var first = $(this).find('.dropdown-menu')[0];
$(first).stop(true, true).delay(20).fadeIn();
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#secondary').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#third').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#fourth').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
.navbar .sub-menu: before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu: after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
}
.navbar-toggle {
z-index: 3;
}
nav.navbar i.fa {
padding-left: 5px;
padding-right: 5px;
}
ul.nav li:hover>ul.dropdown-menu {
display: block;
}
#navbar {
text-align: center;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
display: none;
margin-top: -1px;
}
#navbar-collapse-new.navbar-collapse {
padding-top: 0px;
padding-right: 38px;
}
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation" aria-label="Main Menu">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-new">
<ul class="nav navbar-nav navbar-left" role="menu">
<li class="dropdown">
Villas <b class="caret"></b>
<ul class="dropdown-menu" id="secondaryMenu" role="menu" aria-expanded="false">
<li id="secondary" role="menuitem">1 Bedroom Villas
<ul class="dropdown-menu sub-menu" role="menu">
<li id="tertiary" role="menuitem">
<a title="Fig Tree Villa" class="tertiary-link" href="/geonext/myhome.geo">Fig Tree Villa</a>
</li>
<li role="menuitem">
<a title="Mulberry Villa" class="tertiary-link" href="/geonext/myhome.geo">Mulberry Villa</a>
</li>
<li role="menuitem">
<a title="Grapevine Villa" class="tertiary-link" href="/geonext/myhome.geo">Grapevine Villa</a>
</li>
</ul>
</li>
<li id="third" role="menuitem">2 Bedroom Villas
<ul class="dropdown-menu sub-menu" role="menu">
<li role="menuitem">
<a title="Bougainvillea Villa" class="tertiary-link" href="/geonext/myhome.geo">Bougainvillea Villa</a>
</li>
<li role="menuitem">
<a title="Margarita Villa" class="tertiary-link" href="/geonext/myhome.geo">Margarita Villa</a>
</li>
<li role="menuitem">
<a title="Oleander Villa" class="tertiary-link" href="/geonext/myhome.geo">Oleander Villa</a>
</li>
<li role="menuitem">
<a title="Violeta Villa" class="tertiary-link" href="/geonext/myhome.geo">Violeta Villa</a>
</li>
</ul>
</li>
<li id="fourth" role="menuitem">3 Bedroom Villas
<ul class="dropdown-menu sub-menu" role="menu">
<li role="menuitem">
<a title="Jasmin Villa" class="tertiary-link" href="/geonext/myhome.geo">Jasmin Villa</a>
</li>
<li role="menuitem">
<a title="Lemoni Villa" class="tertiary-link" href="/geonext/myhome.geo">Lemoni Villa</a>
</li>
<li role="menuitem">
<a title="Mandarin Villa" class="tertiary-link" href="/geonext/myhome.geo">Mandarin Villa</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Contact Us
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html>
The attached Picture is my menu and the capital letter is presenting the parent menu and the small letter is presenting the child menu. I want the Parent menu to collapse and expand with sub-menu. Any Help would be great. [1]: https://i.stack.imgur.com/yGMch.png
<div class="row">
<div class="col-5">
<div class="row">
<ul class="help-left-menu">
<li>
DASHBOARD
</li>
<li>
NEW PROPOSAL
</li>
<li>
PROPOSALS
</li>
<li>
CLIENTS
</li>
<li>
View All Clients
</li>
<li>
Add New Clients
</li>
<li>
RISK PROFILE
</li>
<li>
Client Risk Wizard
</li>
<li>
Risk Questions
</li>
<li>
Question Categories
</li>
<li>
Wizard Pages
</li>
<li>
ACCOUNT OPENING
</li>
<li>
Account Opening
</li>
<li>
Custodians
</li>
<li>
Add Custodian
</li>
<li>
Document Types
</li>
</ul>
</div>
</div>
<div class="col-7">
<div class="row dashboard"></div>
</div>
</div>
</div>
Using Bootstrap 4:
<html lang="en">
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
HELP PAGE
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">DASHBOARD</button>
<button class="dropdown-item" type="button">NEW PROPOSAL</button>
<button class="dropdown-item" type="button">PROPOSALS</button>
<button class="dropdown-item" type="button">CLIENTS</button>
<button class="dropdown-item" type="button">View All Clients</button>
<button class="dropdown-item" type="button">Add New Clients</button>
<button class="dropdown-item" type="button">RISK PROFILE</button>
<button class="dropdown-item" type="button">Client Risk Wizard</button>
<button class="dropdown-item" type="button">Risk Questions</button>
<button class="dropdown-item" type="button">Question Categories</button>
<button class="dropdown-item" type="button">Wizard Pages</button>
<button class="dropdown-item" type="button">ACCOUNT OPENING</button>
<button class="dropdown-item" type="button">Custodians</button>
<button class="dropdown-item" type="button">Add Custodian</button>
<button class="dropdown-item" type="button">Document Types</button>
</div>
</div>
</body>
</html>
This is implemented using jquery and css. Hope this will help you.
var dropdown = document.querySelectorAll('.dropdown-list'),
dropdownArray = Array.prototype.slice.call(dropdown, 0);
dropdownArray.forEach(function(el) {
var button = el.querySelector('a[dropdown-prop="title"]'),
menu = el.querySelector('.dropdown-list-items'),
icon = button.querySelector('i.dropdown-icon'),
toggleDropdown = function() {
$(menu).toggleClass('dropdown-list-open');
$(icon).toggleClass('dropdown-icon-open');
};
button.addEventListener('click', toggleDropdown);
});
#import url(https://fonts.googleapis.com/css?family=Lato);
body {
font-size: 20px;
font-family: "Lato", sans-serif;
color: #ffffff;
background-color: #34495e;
}
.dropdown-list-container {
padding: 0 2.0em;
width: 250px;
list-style: none;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.dropdown-list {
position: relative;
background: #16a085;
margin-bottom: 1px;
}
.dropdown-list [dropdown-prop="title"] {
color: #ffffff;
padding: 0.5em 2.0em;
display: block;
text-decoration: none;
}
.dropdown-list [dropdown-prop="title"]:hover {
background: #107360;
}
.dropdown-list-items {
transition: max-height 0.4s ease-in;
padding: 0;
max-height: 0;
list-style: none;
overflow: hidden;
}
.dropdown-list-items li a {
color: #ffffff;
display: block;
padding: 0.75em 2.0em;
background: #1abc9c;
text-decoration: none;
}
.dropdown-list-items li a:hover {
background: #148f77;
}
.dropdown-list-open {
transition: max-height 0.4s ease-out;
max-height: 15em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--List Container-->
<ul class="dropdown-list-container">
<!--Lists-->
<li class="dropdown-list">
<!--List Title-->
DASHBOARD<i class="dropdown-icon"></i>
</li>
<li class="dropdown-list">
<!--List Title-->
NEW PROPOSAL<i class="dropdown-icon"></i>
</li>
<li class="dropdown-list">
<!--List Title-->
PROPOSALS<i class="dropdown-icon"></i>
</li>
<!--Second List-->
<li class="dropdown-list">
<!--List Title-->
CLIENTS<i class="dropdown-icon"></i>
<!--List Items-->
<ul class="dropdown-list-items">
<li>View All Clients</li>
<li>Add New Clients</li>
</ul>
</li>
<!--Third List-->
<li class="dropdown-list">
<!--List Title-->
RISK PROFILE<i class="dropdown-icon"></i>
<!--List Items-->
<ul class="dropdown-list-items">
<li>Client Risk Wizard</li>
<li>Risk Questions</li>
<li>Question Categories</li>
<li>Wizard Pages</li>
</ul>
</li>
</ul>
I have created a sidebar, activation class work properly when I stay just parent menu like Sidebar Menu, if I then click on a Sub Menu, although the correct article displays, the NAV bar closes and lose my navigation position.
Below my work code:
Html:
<div id='sidebar'>
<ul>
<li><a href='#'>Sidebar Menu</a></li>
<li class='sub'><a href='#'>Sidebar</a>
<ul>
<li class='sub'><a href='#'>Sidebar 1</a>
<ul>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
<li class='sub'><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Jquery
$("#sidebar > ul > li").each(function() {
var sideItem = $(this);
if (sideItem.find("a").attr("href") == location.pathname) {
sideItem.addClass("activation");
}
});
$('#sidebar li.active').addClass('open').children('ul').show();
$('#sidebar li.sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
}
else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
Issue 1: leave submenues open if I not close submenues
Like below image:
At the same time open three submenu I implement like this.
Issue 2: Active child menu when I active this url
How can I reach this solution?
JSFiddle
I think this is what you want. I only concerned about your main point.sorry about the UI.try this and tell me is this your case.you can try it in here.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.navi{
width: 200px;
}
ul{
color: orange;
cursor: pointer;
font-weight: bold;
}
ul li{
list-style-type: none;
color: black;
text-indent: 20%;
font-weight: normal;
display: list-item;
display: none;
}
ul li:hover{
background-color: orange;
color: white;
}
ul li:active{
background-color: orange;
color: white;
}
</style>
<body>
<div class="navi">
<ul class="one"><span class="onez"> > Sub One</span>
<li>First</li>
<li>Second</li>
</ul>
<ul class="two"> <span class="twoz"> > Sub Two</span>
<li>Third</li>
<li>Four</li>
</ul>
</div>
<script type="text/javascript">
$(".onez").click(function(){
if ($("ul.one li").is(':visible')){
$("ul.one li").slideUp();
}
else{
$("ul.one li").slideDown();
}
});
$(".twoz").click(function(){
if ($("ul.two li").is(':visible')){
$("ul.two li").slideUp();
}
else{
$("ul.two li").slideDown();
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>active child test</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#sidebar ul li{
list-style: none;
}
#sidebar ul li a{
text-decoration: none;
}
.glyphicon {
top: -3.1px;
font-size: 14px;
}
.uparrow{
display: none;
}
</style>
</head>
<body>
<div id='sidebar'>
<ul>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Sidebar</a>
<ul>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Sidebar 1</a>
<ul>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("a").click(function(){
var parent=$(this).parent();
$('.downarrow',parent).toggle();
$('.uparrow',parent).toggle();
$("ul",parent).slideToggle("fast");
$(this).toggleClass("up");
});
})
</script>
</body>
</html>
I have some question:
How to make navbar text is in the left in Bootstrap?
I'd already make the dropdown menu with bootstrap and jquery-menu-aim. But my dropdown submenu is piled up. This what my goal is.
And this is what I've done..
Can you help me? Thanks in advance. I'm using bootstrap 3.3.4.
HTML file
<header>
<div class="branding">Logo
<h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"> Product
<ul class="dropdown-menu" role="menu">
<li class="search row-sm-3">
<input type="text" class="form-control" placeholder="Search" />
</li>
<li role="separator" class="divider"></li>
<li data-submenu-id="submenu-mobile"> Mobile Devices
<div id="submenu-mobile" class="popover">
<h3 class="popover-title">Mobile Devices</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Smartphones
</li>
<li>Tablets
</li>
<li>Other Phones
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-audio"> TV / Audio / Video
<div id="submenu-audio" class="popover">
<h3 class="popover-title">TV / Audio / Video</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Televisions
</li>
<li>Audio and Video
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-track-trace"> Cameras and Camcorders
<div id="submenu-track-trace" class="popover">
<h3 class="popover-title">Cameras and Camcorders</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Cameras
</li>
<li>Camcorders
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-it"> IT
<div id="submenu-it" class="popover">
<h3 class="popover-title">IT</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Monitor
</li>
<li>Printers
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="navbar-left">Apps
</li>
<li class="navbar-left">Support
</li>
</ul>
<ul class="nav navbar-nav navbar-right setting">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Setting
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
My Profile</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
Messages</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
CSS file
.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}
I'm using a Bootstrap Navbar that is right aligned using the pull-right class. When I add a dropdown to the navbar, that dropdown's sub-menu is also right aligned with it's parent which doesn't look good. How do I get it to be left aligned with the parent? I've tried adding the pull-left class just about everywhere I can think of, but doesn't seem to work. Ideas?
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
.menu {
font-size: 18px;
margin-top: 10px;
}
.menu_icon {
margin-top: 3px;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
</style>
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">My Brand</a>
<div class="nav-collapse">
<ul class="nav pull-right">
<li><a class="menu" href="index.php"><i class="icon-home icon-black menu_icon"></i> Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle menu" data-toggle="dropdown" href="#about">Dropdown <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li><a class="menu" href="#"><i class="icon-wrench icon-black menu_icon"></i> Link 1</a></li>
<li><a class="menu" href="#"><i class="icon-tag icon-black menu_icon"></i> Link 2</a></li>
<li><a class="menu" href="#"><i class="icon-envelope icon-black menu_icon"></i> Link 3</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</body>
</html>
You should add an ID (e.g. id=myId) to your <ul class="dropdown-menu"> and write something like this:
#myId {right: auto}
#myId::before {left:12px;right:auto}
#myId::after {left:13px;right:auto}
Those CSS rules resets the pull-right dropdown styles to the default values.
This worked for me. Have a look at this sample:
http://jsfiddle.net/RzMRA/3/