Ok guys so i have this template with me. But i can't figure out how to shift the position of logo to left and the menu accordingly. I also want to change the background color to white.. I'm able to do the rest of the changes myself..
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol, ul {
list-style: none;
padding:0px;
margin:0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap > header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu > li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu > li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu > li.parent > a {
padding-left: 14px;
}
#main-menu > li > a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu { /* level 2 */
display: none;
left: 0px;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
}
ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left: 149px;
top: 0px;
}
ul.sub-menu > li > a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu > li > a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu > li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu > li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu > li:last-child > a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu > li > a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover > ul.sub-menu {
display: block; /* show the submenu */
}
The CSS Responsive Style
#media all and (max-width: 700px) {
#navigation {
position: static;
margin-top: 20px;
}
#menu-toggle {
display: block;
}
#main-menu {
display: none;
float: none;
}
#main-menu li {
display: block;
margin: 0;
padding: 0;
}
#main-menu > li {
margin-top: -1px;
}
#main-menu > li:first-child {
margin-top: 0;
}
#main-menu > li > a {
background-color: #333;
border: 1px solid #444;
color: #bbb;
display: block;
font-size: 14px;
padding: 12px !important;
padding: 0;
}
#main-menu li > a:hover {
background-color: #444;
}
#main-menu > li.parent {
background: none !important;
padding: 0;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
border: 1px solid #444 !important;
color: #fff !important;
}
ul.sub-menu {
display: block;
margin-top: -1px;
margin-left: 20px;
position: static;
padding: 0;
width: inherit;
}
ul.sub-menu > li:first-child {
border-top: 1px solid #444 !important;
}
ul.sub-menu > li > a.parent {
background: #333 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="https://www.freshdesignweb.com"><img src="images/logo.png" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
</div>
At first you have to change for web view bellow css code for left position for nav. Also logo should be remove otherwise logo & menu overlap if you want to logo is left position.
#navigation {
position: absolute;
left: 40px;
bottom: 0px;
}
Also you want to change your menu bar background color then change to this css code
#wrap > header {
background-color: #fff;
}
Note: If you do that you should be change your menu font color like black otherwise your font menu font color & menu background color looking messy.
Related
Hi I've tried searching for this but just can't find the right coding. Can someone help?
This is my site currently in test mode : http://www.rockclick.co.uk/wiss/index.htm .
As you can see I have hoverable menus. But my sub menus under the "Galleries" hover menu don't hover I have to click on them in my PC browser (google chrome). On my iphone the submenus aren't even clickable. (I've added a script to fix the hover bug for IOS).
I'm very reluctant to re-write the whole thing again. Is there an easy fix to just make my sub menus hoverable??
I'm very much a novice at this stuff so any help would be greatly appreciated.
document.addEventListener('click', function(e) {
e = e || window.event;
console.log(e);
var target = e.target || e.srcElement;
console.log(target);
if (target.parentElement.className.indexOf('has-submenu') > -1) {
e.target.classList.toggle('open');
}
}, false);
<!----------------ios-hover-fix----------->
(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document); // sticky hover fix in iOS
<style>
#menu {background: #F9F3DB; color: #6D6C6B; height: 35px; border-bottom: 0px solid #6D6C6B}
#menu ul,
#menu li {margin: 0 0; padding: 0 0; list-style: none}
#menu ul {height: 35px}
#menu li {float: left; display: inline; position: relative; font: bold 12px Arial; text-shadow: 0 0px 0 #6D6C6B; border-right: 0px solid #444;
border-left: 0px solid #111; text-transform: uppercase}
#menu li:first-child {border-left: none}
#menu a {display: block; line-height: 35px; padding: 0 14px; text-decoration: none; color: #6D6C6B;}
#menu li:hover > a,
#menu li a:hover {background: #F9F3DB}
#menu input { display: none; margin: 0 0; padding: 0 0; width: 80px; height: 35px; opacity: 0; cursor: pointer}
#menu label {font: bold 30px Arial; display: none; width: 35px; height: 36px; line-height: 36px; text-align: center}
#menu label span {font-size: 12px; position: absolute; left: 35px}
#menu ul.menus {height: auto; width: auto; background: #F9F3DB; position: absolute; z-index: 99; display: none; border: 0;}
#menu ul.menus li {display: block; width: 100%; font: 12px Arial; text-transform: none;}
#menu li:hover ul.menus {display: block}
#menu a.home {background: #c00;}
#menu a.prett {padding: 0 27px 0 14px}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 5px 6px;
border-style: solid;
border-color: #6D6C6B transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px}
#menu a.prett.open::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: transparent transparent #6D6C6B transparent;
position: absolute;
top: 9px;
right: 9px}
#menu ul.menus a:hover {background: #F9F3DB;}
#menu ul.menus .submenu {display: none; position: absolute; left: 100px; background: #F9F3DB; top: 0; width: 150px;}
#menu ul.menus .submenu li {background: #F9F3DB;}
#menu ul.menus .has-submenu a.open ~ .submenu {display: block;}
</style>
<!------------NAVIGATION-BAR------>
<body>
<nav>
<ul id='menu'>
<li><a class='prett' href='#' title='Galleries'>Galleries</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Photos'>Photos</a>
<ul class='submenu'>
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul></li>
<li class='has-submenu'><a class='prett' title='Archives'>Media</a>
<ul class='submenu'>
<li>Press Reports</li>
<li>Archived Press</li>
</ul></li>
<li><a href="team photos.htm" target="iframe" title='Team Photos'>Team Photos</a></li>
<li><a href="videos.htm" target="iframe" title='Videos'>Videos</a></li>
</ul></li>
</nav>
</body>
Consider declaring an additional :hover state rule for nested submenu elements, this can be chained onto the existing submenu :hover state rule, e.g:
#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {
display: block;
}
Code Snippet Demonstration:
document.addEventListener('click', function(e) {
e = e || window.event;
console.log(e);
var target = e.target || e.srcElement;
console.log(target);
if (target.parentElement.className.indexOf('has-submenu') > -1) {
e.target.classList.toggle('open');
}
}, false);
<!----------------ios-hover-fix----------->
(function(l) {
var i, s = {
touchend: function() {}
};
for (i in s) l.addEventListener(i, s)
})(document); // sticky hover fix in iOS
#menu {
background: #F9F3DB;
color: #6D6C6B;
height: 35px;
border-bottom: 0px solid #6D6C6B
}
#menu ul,
#menu li {
margin: 0 0;
padding: 0 0;
list-style: none
}
#menu ul {
height: 35px
}
#menu li {
float: left;
display: inline;
position: relative;
font: bold 12px Arial;
text-shadow: 0 0px 0 #6D6C6B;
border-right: 0px solid #444;
border-left: 0px solid #111;
text-transform: uppercase
}
#menu li:first-child {
border-left: none
}
#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #6D6C6B;
}
#menu li:hover>a,
#menu li a:hover {
background: #F9F3DB
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer
}
#menu label {
font: bold 30px Arial;
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center
}
#menu label span {
font-size: 12px;
position: absolute;
left: 35px
}
#menu ul.menus {
height: auto;
width: auto;
background: #F9F3DB;
position: absolute;
z-index: 99;
display: none;
border: 0;
}
#menu ul.menus li {
display: block;
width: 100%;
font: 12px Arial;
text-transform: none;
}
#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {
display: block
}
#menu a.home {
background: #c00;
}
#menu a.prett {
padding: 0 27px 0 14px
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 5px 6px;
border-style: solid;
border-color: #6D6C6B transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px
}
#menu a.prett.open::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: transparent transparent #6D6C6B transparent;
position: absolute;
top: 9px;
right: 9px
}
#menu ul.menus a:hover {
background: #F9F3DB;
}
#menu ul.menus .submenu {
display: none;
position: absolute;
left: 100px;
background: #F9F3DB;
top: 0;
width: 150px;
}
#menu ul.menus .submenu li {
background: #F9F3DB;
}
#menu ul.menus .has-submenu a.open~.submenu {
display: block;
}
<!------------NAVIGATION-BAR------>
<body>
<nav>
<ul id='menu'>
<li>Home</li>
<li>News</li>
<li><a class='prett' href='#' title='Info'>Information</a>
<ul class='menus'>
<li>About Us</li>
<li>Statistics</li>
<li>Downloads</li>
<li>Sponsorship</li>
<li>Race Calendar</li>
<li>Race Results</li>
</ul>
</li>
<li><a class='prett' href='#' title='Info'>Meet The Team</a>
<ul class='menus'>
<li>The Team</li>
<li>The Coaches</li>
<li>The Committee</li>
</ul>
</li>
<li><a class='prett' href='#' title='Galleries'>Galleries</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Photos'>Photos</a>
<ul class='submenu'>
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</li>
<li class='has-submenu'><a class='prett' title='Archives'>Media</a>
<ul class='submenu'>
<li>Press Reports</li>
<li>Archived Press</li>
</ul>
</li>
<li><a href="team photos.htm" target="iframe" title='Team Photos'>Team Photos</a></li>
<li><a href="videos.htm" target="iframe" title='Videos'>Videos</a></li>
<li class='has-submenu'><a class='prett' title='Archives'>Archives</a>
<ul class='submenu'>
<li>1980's</li>
<li>1990's</li>
<li>2000's</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</nav>
</body>
Add the following line to your CSS code. It should fix it.
.menus li a:hover ~ .submenu {display: block !important;}
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 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 want to make a code where I hover my mouse through the menu items, and appears a submenu with a list ...
Here's my html nav code on CSS first and then the HTML code ...:
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">Discografía</li>
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>
My fail occurs when I hover it ... List submenu don't appears...
What's bad on my code?
The second UL, need to be inside the LI tag.
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">
Discografía
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<nav>
You have an extra li tag. Get rid of it, and it should work
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio
</li>
<li>Biografía
</li>
<li class="submenu">Discografía
<ul>
<li>Innerspeaker
</li>
<li>Lorenism
</li>
<li>Currents
</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>
I am following up on this question and answer:
Sub-menu expanding parent div instead of displaying on top
If there is a div below the menu in the example above, how do you keep 1) that div contents from moving around, and 2) the size of the div from moving around, yet keep it responsive?
For example I forked the js fiddle from the link above and created the div id="mytest". I'd like the menu and the "mytest" div to be completely independent when you hover over the "About Me" link. Here is my fork: http://jsfiddle.net/nXqn8/
Here is the code:
<div id="menu">
<ul>
<li><a id="" class="" href="">Home</a></li>
<li><a id="" class="" href="">About Me</a>
<ul class="sub-menu">
<li>Biography</li>
<li>Photo Galery</li>
<li>Foot Print</li>
</ul>
</li>
<li><a id="" class="" href="">Expertise</a></li>
<li><a id="" class="" href="">Projects</a>
<ul class="sub-menu">
<li>Geo 228 Portal</li>
<li>NEP Application</li>
<li>Geo Address Book</li>
<li>Assets Management</li>
</ul>
</li>
<li><a id="" class="" href="">Contact</a></li>
</ul>
</div>
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: visible;
z-index: 2;
height: 35px;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}
#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}
#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: relative;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
#mytest {
background-color: red;
}
Ultimately, I have after something like the main menus you see at the top of accenture dot com.
Thanks!
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
#mytest {
float:left;
background-color: red;
width:100%;
text-align: center;
}
DEMO
Define your #menu li position: relative and define your sub menu #menu ul.sub-menu position: absolute; left: 0; top: 100%;
as this css
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
Demo