I am trying a simple responsive menu with Css and jQuery. I want the jQuery script to work only on a certain window width. When I resize the browser. Here is my code.
$(document).ready(function(){
$(".resmenu").click(function(){
$(".menu").slideToggle();
});
$(".submenu").click(function(){
$(this).toggleClass("active_submenu");
$(this).parent().find(".dropdown").slideToggle();
});
});
.container {
width:980px;
margin:100px auto 0 auto;
font-family:arial;
}
ul, li {
margin:0;
padding:0;
}
.resmenu {
display:none;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
font-size: 14px;
text-transform: uppercase;
color: #3b2612;
padding: 6px 17px;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
.menu li:hover a {
background: #444;
color: #fff !important;
}
.menu li ul {
position: absolute;
width: 250px;
z-index: 5;
left: 0px;
top:28px;
display:none;
}
.menu li:hover ul {
display:block;
}
.menu li ul li {
display: block;
}
.menu li ul li a {
padding: 6px 17px;
transition: all 0.2s;
text-transform: capitalize;
}
.menu li ul li a:hover {
background: #000;
}
/*--- responsive ----*/
#media screen and (max-width:768px) {
.resmenu {
color: #fff !important;
display: block;
text-decoration: none !important;
background: #6ca2bd;
padding: 5px 10px;
}
.menu {
display: none;
background: #444444;
}
.menu li {
position: relative;
display: block;
}
.menu li a {
color: #fff;
font-size:14px;
padding: 6px 17px;
}
.menu li a:hover {
background-color: #000;
color: #000;
transition: all 0.3s;
}
.active_submenu {
background-color: #ceb689 !important;
color: #fff !important;
}
.menu li ul {
display: none;
width: 100%;
position: relative;
top: 0px;
display:none;
}
.menu li:hover ul {
display: none;
top: 0px;
}
.menu li a.active {
color: #fff;
font-family: 'opensanssemibold';
}
.menu li ul li a {
background:#333;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btm_header">
Menu
<ul class="menu">
<li>Menu</li>
<li>Dropdown One <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Dropdown Two <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
It is working on 768px screen size, but when I click on the drop-down link instead of hover on more than 768 screen size, the drop down link is slide toggle. I need this script work on certain width only.
Use $(window).width() to get the width of the screen and use it in your condition:
if ($(window).width() < 768) {
// run your code here
}
See code snippet:
$(document).ready(function() {
$(".resmenu").click(function() {
$(".menu").slideToggle();
});
$(".submenu").click(function() {
if ($(window).width() < 768) {
$(this).toggleClass("active_submenu");
$(this).parent().find(".dropdown").slideToggle();
}
});
});
.container {
width: 980px;
margin: 100px auto 0 auto;
font-family: arial;
}
ul,
li {
margin: 0;
padding: 0;
}
.resmenu {
display: none;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
font-size: 14px;
text-transform: uppercase;
color: #3b2612;
padding: 6px 17px;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
.menu li:hover a {
background: #444;
color: #fff !important;
}
.menu li ul {
position: absolute;
width: 250px;
z-index: 5;
left: 0px;
top: 28px;
display: none;
}
.menu li:hover ul {
display: block;
}
.menu li ul li {
display: block;
}
.menu li ul li a {
padding: 6px 17px;
transition: all 0.2s;
text-transform: capitalize;
}
.menu li ul li a:hover {
background: #000;
}
/*--- responsive ----*/
#media screen and (min-width:769px) {
.menu {
display: block!important;
}
}
#media screen and (max-width:768px) {
.resmenu {
color: #fff !important;
display: block;
text-decoration: none !important;
background: #6ca2bd;
padding: 5px 10px;
}
.menu {
display: none;
background: #444444;
}
.menu li {
position: relative;
display: block;
}
.menu li a {
color: #fff;
font-size: 14px;
padding: 6px 17px;
}
.menu li a:hover {
background-color: #000;
color: #000;
transition: all 0.3s;
}
.active_submenu {
background-color: #ceb689 !important;
color: #fff !important;
}
.menu li ul {
display: none;
width: 100%;
position: relative;
top: 0px;
display: none;
}
.menu li:hover ul {
display: none;
top: 0px;
}
.menu li a.active {
color: #fff;
font-family: 'opensanssemibold';
}
.menu li ul li a {
background: #333;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btm_header">
Menu
<ul class="menu">
<li>Menu</li>
<li>Dropdown One <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Dropdown Two <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
In css change "container" width to 100%, and set max-width to 980px.
I want to hiding other submenu, when using current submenu.
ex)
A
a
a
B
// using a
A
B
b
b
// using b
I worked below by mouseleave.
<li id="admin" class="sidebar-list" ng-mouseenter="option=true" ng-mouseleave="option=false">
Admin <span class="menu-icon fa fa-cog"></span>
<ul class="admin-sub" ng-if="option==true">
<li>
- Admin Management
</li>
</ul>
</li>
but I want to modify this, In current submenu page open the current submenu. but It is not working. help me please.
<li id="report" class="sidebar-list" ng-mouseenter="option1=true;option2=false;">
Reports <span class="menu-icon fa fa-file-text-o"></span>
<ul class="report-sub" ng-if="option2==true && toggle==true">
<li>
- Resource
</li>
</ul>
</li>
<li id="admin" class="sidebar-list" ng-mouseenter="option1=false;option2=true">
Admin <span class="menu-icon fa fa-cog"></span>
<ul class="admin-sub" ng-if="option2==true">
<li>
- Admin Management
</li>
</ul>
</li>
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
z-index: 100;
width: auto;
font-family: 'Open Sans', Helvetica, sans-serif;
background: #39B1CC;
background: -moz-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #51bbd2), color-stop(100%, #2d97af));
background: -webkit-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
background: -o-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
background: -ms-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
background: linear-gradient(to bottom, #51bbd2 0%, #2d97af 100%);
}
#cssmenu > ul {
background: url('bg.png');
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li {
float: left;
display: inline-block;
}
#cssmenu.align-center > ul {
float: none;
text-align: center;
font-size: 0;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li > a {
padding: 18px 25px 21px 25px;
border-right: 1px solid rgba(80, 80, 80, 0.12);
text-decoration: none;
font-size: 13px;
font-weight: 700;
color: #D3ECED;
text-transform: uppercase;
letter-spacing: 1px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
color: #ffffff;
background: #32a9c3;
background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
padding-right: 45px;
}
#cssmenu > ul > li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #D3ECED;
right: 17px;
top: 22px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
border-top-color: #ffffff;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 60px;
z-index: 9999;
padding-top: 6px;
font-size: 13px;
opacity: 0;
-webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
-moz-transition: top 0.2s ease, opacity 0.2s ease-in;
-ms-transition: top 0.2s ease, opacity 0.2s ease-in;
-o-transition: top 0.2s ease, opacity 0.2s ease-in;
transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: #ffffff;
top: -4px;
left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 20px;
}
#cssmenu ul ul ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: #ffffff;
top: 11px;
left: -4px;
}
#cssmenu.align-right ul ul ul::after {
border-right-color: transparent;
border-left-color: #ffffff;
left: auto;
right: -4px;
}
#cssmenu > ul > li > ul {
top: 120px;
}
#cssmenu > ul > li:hover > ul {
top: 52px;
left: 0;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
}
#cssmenu ul ul ul {
padding-top: 0;
padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
left: 180px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
left: auto;
right: 100%;
opacity: 1;
}
#cssmenu ul ul li a {
text-decoration: none;
font-weight: 400;
padding: 11px 25px;
width: 180px;
color: #777777;
background: #ffffff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #333333;
}
#cssmenu ul ul li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
position: absolute;
display: block;
}
#cssmenu ul ul li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: #777777;
right: 17px;
top: 14px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
border-left-color: transparent;
border-right-color: #777777;
right: auto;
left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
border-left-color: #333333;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
border-right-color: #333333;
border-left-color: transparent;
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
background: #39B1CC;
}
#cssmenu > ul {
display: none;
}
#cssmenu > ul.open {
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#cssmenu.align-right > ul {
float: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu > ul > li,
#cssmenu.align-right > ul > li {
float: none;
display: block;
}
#cssmenu > ul > li > a {
padding: 18px 25px 18px 25px;
border-right: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
background: rgba(0, 0, 0, 0.1);
}
#cssmenu #menu-button {
display: block;
text-decoration: none;
font-size: 13px;
font-weight: 700;
color: #D3ECED;
padding: 18px 25px 18px 25px;
text-transform: uppercase;
letter-spacing: 1px;
background: url('bg.png');
cursor: pointer;
}
#cssmenu ul ul,
#cssmenu ul li:hover > ul,
#cssmenu > ul > li > ul,
#cssmenu ul ul ul,
#cssmenu ul ul li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul li:hover > ul,
#cssmenu.align-right > ul > li > ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul ul li:hover > ul {
left: 0;
right: auto;
top: auto;
opacity: 1;
width: 100%;
padding: 0;
position: relative;
text-align: left;
}
#cssmenu ul ul li {
width: 100%;
}
#cssmenu ul ul li a {
width: 100%;
box-shadow: none;
padding-left: 35px;
}
#cssmenu ul ul ul li a {
padding-left: 45px;
}
#cssmenu ul ul li:first-child > a,
#cssmenu ul ul li:last-child > a {
border-radius: 0;
}
#cssmenu #menu-button::after {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #D3ECED;
border-bottom: 2px solid #D3ECED;
right: 25px;
top: 18px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #D3ECED;
right: 25px;
top: 28px;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="cssmenu">
<ul>
<li class="active has-sub"><i class="fa fa-fw fa-edit"></i> Reports
<ul>
<li>Reports 1</li>
<li>Reports 2</li>
</ul>
</li>
<li class="has-sub"><i class="fa fa-fw fa-user"></i> Admin
<ul>
<li>Admin 1</li>
<li>Admin 2</li>
</ul>
</li>
<li class="has-sub"><i class="fa fa-fw fa-cog"></i> Test
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</li>
<li class="has-sub"><i class="fa fa-fw fa-ellipsis-v"></i> More
<ul>
<li class="has-sub">More 1
<ul>
<li class="has-sub">More 1.1
<ul>
<li>More 1.1.1</li>
<li>More 1.1.2</li>
<li>More 1.1.3</li>
</ul>
</li>
<li>More 1.2</li>
<li>More 1.3</li>
</ul>
</li>
<li class="has-sub">More 2
<ul>
<li>More 2.1</li>
<li>More 2.2</li>
<li>More 2.3</li>
<li>More 2.4</li>
</ul>
</li>
<li class="has-sub">More 3
<ul>
<li>More 3.1</li>
<li>More 3.2</li>
<li>More 3.3</li>
<li>More 3.4</li>
<li>More 3.5</li>
<li>More 3.6</li>
</ul>
</li>
<li class="has-sub">More 4
<ul>
<li>More 4.1</li>
<li>More 4.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I have problems with left navigation bar positioning. If you run the snipped below on fullscreen and try to resize browser you will see that left navigation bar is not fixed to the top of page.
Also I header (logo and dropdowns) does not covers full page.
Maybe I missed something?
Any help will be highly appreciated!
Thanks, who wasted time to view this post and helped to dummy :)
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
header.navbar+nav.navbar{
/* margin-top: 20px;same margin-bottom .navbar */
}
.navbar.navbar-default.navbar-fixed-top{
margin-top: 50px;
}
.sidebar.navbar-fixed-top{
margin-top: 100px;
}
#media (min-width: 768px) and (max-width: 998px){
.navbar.navbar-default.navbar-fixed-top{
margin-top: 100px;
}
.sidebar.navbar-fixed-top{
margin-top: 150px;
}
}
/* Custom navbar default: global*/
.navbar.navbar-default{
background-color: #f8f8f8;
border-color: #e7e7e7;
margin: 0;
border-radius: 0;
}
.navbar.navbar-default .navbar-brand {
color: #666;
text-shadow: none;
min-width: 150px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a:hover{
color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a{
color: #fff;
background-color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a:hover{
color: #608224;
background-color: #acc47f;
}
.navbar.navbar-default .caret {
border-top-color: #ccc;
border-bottom-color: #ccc;
}
.navbar.navbar-default .caret:hover {
border-top-color: #333;
border-bottom-color: #333;
}
/* Custom sidebar menu */
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main{
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
#media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main{
position: absolute;
width: calc(100% - 40px); /*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main{
margin-left: 200px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
text-align: center;
width: 100%;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a{
padding-right: 13px;
min-width: 100px;
}
/*custom sidebar nav*/
nav.sidebar ul.nav.navbar-nav{
margin: 0;
}
nav.sidebar.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: white;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child{
border-top: 1px #e5e5e5 solid;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li{
border-bottom: 1px #e5e5e5 solid;
}
/*adds background on hover*/
nav.sidebar .navbar-nav > li:hover{
color: #fff;
background-color: #43600E;
}
/*removes border last element*/
nav.sidebar .navbar-nav > li.last{
border-bottom: none;
}
/* Colors/style dropdown box*/
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*allows nav box to use 100% width*/
nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*O quanto o menu irá esconder á esquerda*/
/*gives sidebar width/height*/
nav.sidebar{
width: 200px;
height: 100%;
margin-left: -270px;
float: left;
z-index: 8000;
margin-bottom: 0px;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover{
margin-left: 0px;
}
/*for hiden things when navbar hidden*/
.forAnimate{
opacity: 0;
}
}
/* .....NavBar: Fully showing nav bar..... */
#media (min-width: 1330px) {
/* Allow main to be next to Nav
.main{
width: calc(100% - 200px); keeps 100% minus nav size
margin-left: 200px;
}
Show all nav
nav.sidebar{
margin-left: 0px;
float: left;
}
Show hidden items on nav
nav.sidebar .forAnimate{
opacity: 1;
} */
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate{
opacity: 1;
}
/*---- FIM SLIDE MENU*/
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
nav.navbar-findcond { background: #fff; border-color: #ccc; box-shadow: 0 0 2px 0 #ccc; }
nav.navbar-findcond a { color: #f14444; }
nav.navbar-findcond ul.navbar-nav a { color: #f14444; border-style: solid; border-width: 0 0 2px 0; border-color: #fff; }
nav.navbar-findcond ul.navbar-nav a:hover,
nav.navbar-findcond ul.navbar-nav a:visited,
nav.navbar-findcond ul.navbar-nav a:focus,
nav.navbar-findcond ul.navbar-nav a:active { background: #fff; }
nav.navbar-findcond ul.navbar-nav a:hover { border-color: #f14444; }
nav.navbar-findcond li.divider { background: #ccc; }
nav.navbar-findcond button.navbar-toggle { background: #f14444; border-radius: 2px; }
nav.navbar-findcond button.navbar-toggle:hover { background: #999; }
nav.navbar-findcond button.navbar-toggle > span.icon-bar { background: #fff; }
nav.navbar-findcond ul.dropdown-menu { border: 0; background: #fff; border-radius: 4px; margin: 4px 0; box-shadow: 0 0 4px 0 #ccc; }
nav.navbar-findcond ul.dropdown-menu > li > a { color: #444; }
nav.navbar-findcond ul.dropdown-menu > li > a:hover { background: #f14444; color: #fff; }
nav.navbar-findcond span.badge { background: #f14444; font-weight: normal; font-size: 11px; margin: 0 4px; }
nav.navbar-findcond span.badge.new { background: rgba(255, 0, 0, 0.8); color: #fff; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head><title>test</title>
<link type="text/css" rel="stylesheet" media="all" href="bootstrap.min.css" />
<link type="text/css" rel="stylesheet" media="all" href="nabs.css" />
<link type="text/css" rel="stylesheet" media="all" href="font-awesome.min.css" />
</head>
<body class="sidebar-mini">
<div class="main">
<aside>
<nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation">
<div class="nav-side-menu">
<div class="brand">logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#1" class="collapsed">
<i class="fa fa-gift fa-lg"></i> Processing </li>
<li data-toggle="collapse" data-target="#4" class="collapsed"><i class="fa fa-gift fa-lg"></i> Payments </li>
</ul>
</div>
</div>
</nav>
</aside>
<nav class="navbar navbar-findcond navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-fw fa-bell-o"></i> Invites <span class="badge">0</span>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-fw fa-tag"></i> new <span class="badge">Video</span> video</li>
<li><i class="fa fa-fw fa-thumbs-o-up"></i> <span class="badge">Music</span> liked</li>
</ul>
</li>
<li class="active">Main <span class="sr-only">(current)</span></li>
<li class="dropdown">
Admin <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>test1</li>
<li class="divider"></li>
<li>test2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section class="content-header">
<h1>
<small>hi</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section><section class="content">
<div class="row">
<div class="col-md-12">
hi there</div></div>
</section>
<table border="0" style="border: 1px; border-style: dotted;" cellspacing="0" cellpadding="0" width="100%">
<tr bgcolor="#D5E7F7">
<td width="100%">
</td>
</tr>
</table>
</div>
The black navbar has a sidebar class seems to break the functionality of the navbar.
PS: fixing this will cause the black navbar to fix to the top of the screen and be overlayed by the white navbar, if you want the black one to have precedent you'll need to up its z-index.
I have a CSS and HTML drop-down menu and I want to keep the width of my sub menus equal to their parent. I tried several ways but nothing works for me. If its possible to do it whether with CSS or with JS its fine for me here is my code
HTML
<nav>
<ul class="navi_main">
<li>Home</li>
<li>About
<ul class="sub_navi_main">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
<li>Products
<ul class="sub_navi_main">
<li>Prod 1</li>
<li>Prod 2</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
CSS
.navi_main{
display:block;
}
.navi_main li{
display: table-cell;
z-index: 100;
}
.navi_main li:first-child{
margin-left:0;
}
.navi_main li a {
text-decoration: none;
display: block;
font-size: 16px;
color: #8098b1;
padding: 0 14px;
height: 64px;
line-height: 64px;
border-right: 1px solid #e6e6e6;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
text-shadow: 0 1px 1px rgba(255,255,255,.64);
text-transform: uppercase;
position: relative;
}
.navi_main li a:hover, .navi_main li:hover > a{
color:#ffffff;
background:#9CA3DA;
}
.navi_main ul {
display: none;
margin: 0;
padding: 0;
width: 100%;
position:relative;
background: #ffffff;
z-index:999999;
}
.navi_main ul li {
display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.navi_main ul li a {
font-size: 14px;
font-weight: normal;
display: block;
color: #797979;
border-left: 3px solid #ffffff;
background: #ffffff;
height:40px;
line-height:40px;
}
.navi_main ul li a:hover, .navi_main ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #9CA3DA;
color:#797979;
}
.navi_main li > ul.visible{
display: block;
position:absolute;
}
.navi_main ul ul {
left: 149px;
top: 0px;
}
OK...I've simplified the CSS a little as you had some reduntant rules in there and made the CSS selectors somewhat more specific and I think this is what you are looking for.
Note: If you want multiline text you really can't set a line-height equal to the height. I took all the height statements and let the link sizing (with padding) determine the actual heigts.
I've made one of the sub-menus visible so you don't have to hover to see it.
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.navi_main {
/* display: block;*/
/* not required */
}
.navi_main > li {
display: table-cell;
position: relative;
/* positioning context */
}
.navi_main > li > a {
text-decoration: none;
display: block;
font-size: 16px;
color: #8098b1;
padding: 16px;
border-right: 1px solid #e6e6e6;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
text-shadow: 0 1px 1px rgba(255, 255, 255, .64);
text-transform: uppercase;
}
.navi_main li a:hover,
.navi_main li:hover > a {
color: #ffffff;
background: #9CA3DA;
}
.navi_main li > ul {
position: absolute;
top: 100%;
left: 0;
display: none;
width: 100%;
background: #ff0000;
}
.navi_main li:hover > ul {
display:block;
}
.navi_main ul > li {
display: block;
background: #bada55;
}
.navi_main ul > li > a {
font-size: 14px;
font-weight: normal;
display: block;
color: #797979;
background: #ffffff;
padding:8px 16px;
border-left:2px solid white;
}
.navi_main ul li a:hover {
background: #f0f0f0;
color: #797979;
border-left:2px solid #9CA3DA;
}
.navi_main li > ul.visible {
display: block;
}
<nav>
<ul class="navi_main">
<li>Home</li>
<li>About
<ul class="sub_navi_main">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
<li>Products
<ul class="sub_navi_main visible">
<li>Lorem ipsum dolor sit amet.</li>
<li>Prod 2</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
Codepen Demo
I have to make dropdown always align center, according to the parent tag. Any help would be greatly appreciated.
The example is given below:
Fiddle Link: http://jsfiddle.net/abidkhanweb/ojxpt4m2/
You can do something like this:
#menu {
border-bottom: 1px solid #DDD;
color: #fff;
display: block;
float: right;
height: 18pt;
line-height: 18pt;
list-style-type: none;
text-transform: uppercase;
width: 100%;
font-size:14px;
position:absolute;
}
#menu > li{
background-color: #003399;
border: 1px solid #DDD;
margin-top:-1px;
float: right;
position: relative;
margin-left: 1%;
padding-left: 2%;
padding-right: 2%;
}
#menu li:hover {
opacity: 0.8;
}
#menu li .wrapper .submenu {
display: block;
margin-left: 50%;
width:100%;
}
#menu li .wrapper {
display: block;
position: absolute;
top: 19pt;
right: 50%; /*this will center the div*/
white-space: nowrap;
}
#menu li:hover .wrapper .submenu {
display: block;
}
.submenu li {
display: inline-block;
padding-left: 1.5%;
white-space: nowrap;
opacity: 0.7;
}
.submenu li a {
padding-right: 3%;
padding-left: 3%;
background-color: #000;
display: inline-block;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:110px;
text-align:center;
color:#C37000;
padding:1px 5px;
border-collapse:collapse;
font-weight:bold;
text-decoration:none;
margin:0;
}
.topmenu ul{
display:none;
}
.submenu a{
padding:1px 5px;
border:1px solid #C37000;
border-collapse:collapse;
color:#C37000;
font-weight:bold;
text-decoration:none;
background-color:#7F4800;
margin:0;
width:100%;
}
.submenu a:hover {
color:#4C4C4C;
background-color:#ffddbb !important;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
<ul id="menu">
<li class="topmenu">Menu 1</li>
<li class="topmenu">Menu 2
</li>
<li class="topmenu">Policies
<div class="wrapper">
<ul >
<li class="submenu"><a>Field 1</a></li>
<li class="submenu"><a>Field 2</a></li>
<li class="submenu"><a>Field 3</a></li>
<li class="submenu"><a>Field 4</a></li>
</ul>
</div>
</li>
<li class="topmenu">Menu 4</li>
</ul>
I assume you have applied position: absolute to the dropdown, for you to position it to the left, set the left property to the value of your padding for the policies container like so:
nav {
background: orange;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav > ul > li {
position: relative;
top: 0;
left: 0;
margin-left: 50px;
}
nav > ul > li > a {
display: inline-block;
color: white;
text-decoration: none;
padding: 5px 10px;
background: green;
}
nav > ul ul {
background: #eee;
border: 1px solid #000;
padding: 10px;
position: absolute;
left: -10px;
}
<nav>
<ul>
<li>Policies
<ul>
<li>Policy 1</li>
<li>Policy 1</li>
<li>Policy 1</li>
<li>Policy 1</li>
</ul>
</li>
</ul>
</nav>