When I am re-sizing the browser window toggle button is working fine and dropdown menu is coming properly but the dropdown-submenu is not working in 1024 resolution or in any small size window,
please let me know where i am doing wrong in code.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<link href="assets/css/customStyle.css" rel="stylesheet"/>
<script src="assets/js/bootstrap-dropdown.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid" style="margin: 0; padding: 0;">
<div class="navbar navbar-inverse">
<div class="navbar-inner navbar-inner_">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
<!--<a class="brand" href="#">Project name</a>-->
<div class="nav-collapse collapse">
<ul class="nav hor-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
class="nav-icon-products search-user"></i>Search<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/User/SearchUserProfileView">Search User/Profile</a></li>
<li><a href="/Center/Index">Search Center</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
class="nav-icon-products add-user"></i>Add User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
User-1</a>
<ul class="dropdown-menu">
<li><a href="#!">Add User</a></li>
<li><a href="#!">Edit User</a></li>
<li><a href="#!">Delete User</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="/User/Index"> User-2</a>
<ul class="dropdown-menu">
<li><a href="#!">Add User</a></li>
<li><a href="#!">Edit User</a></li>
<li><a href="#!">Delete User</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="nav-icon-products update-work"></i>Update Work </a>
</li>
<li><a href="#"><i class="nav-icon-products update-country"></i>Update Schedule</a>
</li>
<!--/.nav-collapse -->
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
</body>
<html>
CSS:
.navbar-inverse .navbar-inner_ {
background-color: #F38F21 !important;
padding-left: 20px;
padding-right: 20px;
border: 0px solid #d4d4d4;
border-radius: 0px;
background-image: none !important;
background-repeat: none !important;
border: 0px solid #d4d4d4 !important;
border-radius: 0px !important;
text-decoration: none;
padding-top:5px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.nav-collapse .nav > li:hover {
background:#fff !important;
}
.nav-collapse .nav > li:hover a {
color:#F38F21;
outline: 0px !important;
}
.dropdown-menu {
margin: -2px 0 0;
background:#F38F21 !important;
border:1px solid #F7860E;
border-radius: 0px;
}
.dropdown-menu > li > a {
clear: both;
color: #fff !important;
font-weight: normal;
line-height: 20px;
padding: 10px 20px;
white-space: nowrap;
border-bottom:2px solid #F7860E;
}
.navbar .nav > li > .dropdown-menu::before,
.navbar .nav > li > .dropdown-menu::after {
border: none;
content: none;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
background-color: #fff;
color: #F38F21;
}
.navbar .caret {
border-bottom-color: #000 !important;
border-top-color: #000 !important;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background-image:none !important;
background-color:#000;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.nav-collapse .nav > li > a:hover .caret{
border-bottom-color: #000 !important;
border-top-color: #000 !important;
}
ul.nav li.dropdown:hover ul {
display: block;
}
.dropdown-menu .dropdown-submenu ul {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -5px;
margin-left: 1px;
border-radius: 0px !important;
}
.dropdown-menu li:hover .dropdown-menu {
visibility: visible;
display: block;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
color: #ffffff;
background-color: #000;
background-image: none !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
background-color: #fff;
color: #F38F21;
outline: 0px !important;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
box-shadow: none;
}
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
background-color: #fff;
color: #F38F21;
}
.navbar-inverse .brand, .navbar-inverse .nav > li > a {
color: #fff;
text-shadow: none;
}
.navbar .divider-vertical {
border-right: 1px solid #ffffff;
height: 40px;
margin:0px;
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 18px;
}
@media screen and (max-width:1100px) {
.form-horizontal .controls {
margin-left:0;
}
.form-horizontal .control-group label {
display:block;
float:none;
text-align:left;
}
.mt35{
margin-top:35px !important;
}
.nav-collapse .nav > li:hover {
background:#f38f21 !important;
display: block;
}
.nav-collapse .nav > li > a:hover .caret{
border-bottom-color: #fff !important;
border-top-color: #fff !important;
}
.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
color: #fff;
}
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inv{
background-color: #fff;
color: #f38f21 !important;
}
.navbar .btn, .navbar .btn-group {
margin-bottom: 5px;
margin-top: 5px;
}
.dropdown-menu .dropdown-submenu ul {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -5px;
margin-left: 1px;
border-radius: 0px !important;
}
.dropdown-menu li:hover .dropdown-menu {
visibility: visible;
display: block;
}
}
Make sure the bootstrap dropdown.js follows after the link to jquery or it will not work as jquery won’t exist yet.
I tried to put bootstrap-dropdown.js, below the jquery.js but still its not working…
sequence of js:
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap-dropdown.js" type="text/javascript"></script>
<script src="/Scripts/App-js/common.js" type="text/javascript"></script>
Hi,
You don’t give enough code to get a working example but using the cdn bootsrap files this seems to be working by just moving the js where I suggested.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
/* ============================================================
* bootstrap-dropdown.js v2.0.1
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
!function( $ ){
"use strict"
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle="dropdown"]'
, Dropdown = function ( element ) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
}
Dropdown.prototype = {
constructor: Dropdown
, toggle: function ( e ) {
var $this = $(this)
, selector = $this.attr('data-target')
, $parent
, isActive
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
isActive = $parent.hasClass('open')
clearMenus()
!isActive && $parent.toggleClass('open')
return false
}
}
function clearMenus() {
$(toggle).parent().removeClass('open')
}
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
$.fn.dropdown = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('dropdown')
if (!data) $this.data('dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.dropdown.Constructor = Dropdown
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(function () {
$('html').on('click.dropdown.data-api', clearMenus)
$('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
})
}( window.jQuery );
</script>
<style>
.navbar-inverse .navbar-inner_ {
background-color: #F38F21 !important;
padding-left: 20px;
padding-right: 20px;
border: 0px solid #d4d4d4;
border-radius: 0px;
background-image: none !important;
background-repeat: none !important;
border: 0px solid #d4d4d4 !important;
border-radius: 0px !important;
text-decoration: none;
padding-top:5px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.nav-collapse .nav > li:hover {
background:#fff !important;
}
.nav-collapse .nav > li:hover a {
color:#F38F21;
outline: 0px !important;
}
.dropdown-menu {
margin: -2px 0 0;
background:#F38F21 !important;
border:1px solid #F7860E;
border-radius: 0px;
}
.dropdown-menu > li > a {
clear: both;
color: #fff !important;
font-weight: normal;
line-height: 20px;
padding: 10px 20px;
white-space: nowrap;
border-bottom:2px solid #F7860E;
}
.navbar .nav > li > .dropdown-menu::before, .navbar .nav > li > .dropdown-menu::after {
border: none;
content: none;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
background-color: #fff;
color: #F38F21;
}
.navbar .caret {
border-bottom-color: #000 !important;
border-top-color: #000 !important;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background-image:none !important;
background-color:#000;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.nav-collapse .nav > li > a:hover .caret {
border-bottom-color: #000 !important;
border-top-color: #000 !important;
}
ul.nav li.dropdown:hover ul {
display: block;
}
.dropdown-menu .dropdown-submenu ul {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -5px;
margin-left: 1px;
border-radius: 0px !important;
}
.dropdown-menu li:hover .dropdown-menu {
visibility: visible;
display: block;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
color: #ffffff;
background-color: #000;
background-image: none !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
background-color: #fff;
color: #F38F21;
outline: 0px !important;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
box-shadow: none;
}
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
background-color: #fff;
color: #F38F21;
}
.navbar-inverse .brand, .navbar-inverse .nav > li > a {
color: #fff;
text-shadow: none;
}
.navbar .divider-vertical {
border-right: 1px solid #ffffff;
height: 40px;
margin:0px;
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 18px;
}
@media screen and (max-width:1100px) {
.form-horizontal .controls {
margin-left:0;
}
.form-horizontal .control-group label {
display:block;
float:none;
text-align:left;
}
.mt35 {
margin-top:35px !important;
}
.nav-collapse .nav > li:hover {
background:#f38f21 !important;
display: block;
}
.nav-collapse .nav > li > a:hover .caret {
border-bottom-color: #fff !important;
border-top-color: #fff !important;
}
.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
color: #fff;
}
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inv {
background-color: #fff;
color: #f38f21 !important;
}
.navbar .btn, .navbar .btn-group {
margin-bottom: 5px;
margin-top: 5px;
}
.dropdown-menu .dropdown-submenu ul {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -5px;
margin-left: 1px;
border-radius: 0px !important;
}
.dropdown-menu li:hover .dropdown-menu {
visibility: visible;
display: block;
}
}
</style>
</head>
<body>
<div class="container-fluid" style="margin: 0; padding: 0;">
<div class="navbar navbar-inverse">
<div class="navbar-inner navbar-inner_">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"> </span> </button>
<!--<a class="brand" href="#">Project name</a>-->
<div class="nav-collapse collapse">
<ul class="nav hor-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
class="nav-icon-products search-user"></i>Search<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/User/SearchUserProfileView">Search User/Profile</a></li>
<li><a href="/Center/Index">Search Center</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
class="nav-icon-products add-user"></i>Add User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> User-1</a>
<ul class="dropdown-menu">
<li><a href="#!">Add User</a></li>
<li><a href="#!">Edit User</a></li>
<li><a href="#!">Delete User</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="/User/Index"> User-2</a>
<ul class="dropdown-menu">
<li><a href="#!">Add User</a></li>
<li><a href="#!">Edit User</a></li>
<li><a href="#!">Delete User</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="nav-icon-products update-work"></i>Update Work </a> </li>
<li><a href="#"><i class="nav-icon-products update-country"></i>Update Schedule</a> </li>
<!--/.nav-collapse -->
</div>
</body>
</html>
Of course the versions I’ve used may not be the same as yours so if you can provide an actual demo it will be easier to debug.
Hi Paul,
I have uploaded my code here is the link, still dropdown-submenu is not working on 1024 or any other mobile resolutions.
http://www.metalsauda.com/GlobalLogistics/respIssue/toggleButtonIssue.html
Thanks
It really seems like it is working properly to me using Firefox, but, well, you didn’t exactly describe how it is not working for you, so…
According to FF and the HTML Validator, the parent <ul> is not closed. Maybe that makes a difference.
Oops. After looking again, I see that the Add, Edit, Delete User options are not dropping down as expected at narrow widths.
You will need to set the subsub menus to static to stop them being shown off screen when the hamburger clicks in.
e.g.
@media only screen and (max-width : 979px) {
.dropdown-menu li:hover .dropdown-menu {
position:static;
}
There will be some styling issues that you will need to sort.
system
October 5, 2015, 10:36pm
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
