I am using Dreamweaver CS6 to help an organization set up their website. To save time on the menu bar, I used one at Menu Maker. It was a wee bit wider than I wanted with my menu buttons, but I went in and manually reduced the padding so that they all fit on the menu bar, as well as increasing the font. The drop down menus worked great at the site preview, but when I inserted all the html code where I wanted the bar, copied the script.js and the styles.css it into the files folder, the drop down menus disappear when you move your mouse cursor down to select one.
After having difficulty, I submitted a support ticket. I then did some searches and saw complaints by other users that there is no support, no contact.
I have tried to ascertain where the coding issue is, that is causing the drop down menu to disappear, am now going blind in code view. ;( I could really use and would appreciate some advice.
HTML
<div id="cssmenu">
<ul>
<li class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i>
Home</a></li>
<li class="has-sub"><a href="about.htm"><i class="fa fa-fw fa-bars"></i>
About Us</a>
<ul>
<li>Contact Us</li>
<li>Organization</li>
</ul>
</li>
<li class="has-sub">Our Wild Bison Mission
<ul>
<li>Rationale</li>
<li>Montana Plans for Wild Bison</li>
<li>Wood Bison Example</li>
<li>Supporters</li>
<li>Polls</li>
<li>FWP Documents</li>
<li>Scientist's Letter of Support</li>
</ul>
</li>
<li class="has-sub">Why Wildness?
<ul>
<li>Biological Definitions</li>
<li>Legal Definitions</li>
</ul>
</li>
<li class="has-sub">Legal Issues
<ul>
<li>Wild Bison and the Law</li>
</ul>
</li>
<li class="has-sub">CMR/APR Bison Habitat
<ul>
<li>CMR</li>
<li>APR</li>
</ul>
</li>
<li>News</li>
<li>Contribute</li>
</ul>
</div>
Java
(function($){
$(document).ready(function(){
$('#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');
}
});
});
})(jQuery);
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button ,
#cssmenu{
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 > ul:after ,
#cssmenu:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
z-index: 100;
width: 1102px;
font-family: 'Open Sans', Helvetica, sans-serif;
background: #d5d69e;
background: -moz-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dedfb4), color-stop(100%, #c9ca81));
background: -webkit-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -o-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -ms-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: linear-gradient(to bottom, #dedfb4 0%, #c9ca81 100%);
}
#cssmenu > ul {
background: url('images/bg.png');
box-shadow: inset 0px -3px 0px 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 {
border-right: 1px solid rgba(80, 80, 80, 0.12);
text-decoration: none;
font-size: 11px;
font-weight: 700;
color: #515223;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 14px;
padding-right: 10px;
padding-bottom: 19px;
padding-left: 10px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
color: #ffffff;
background: #d0d193;
background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
padding-right: 40px;
}
#cssmenu > ul > li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #515223;
right: 17px;
top: 20.5px;
}
#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: 49px;
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: #d5d69e;
}
#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: #515223;
padding: 18px 25px 18px 25px;
text-transform: uppercase;
letter-spacing: 1px;
background: url('images/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 #515223;
border-bottom: 2px solid #515223;
right: 25px;
top: 18px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #515223;
right: 25px;
top: 28px;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
}
As pointed out, the gap between your menu and the submenu is causing the menu button to lose it's hover state when the mouse moves towards the submenu.
The easiest solution would be to adjust the top property of the submenu to remove the gap. Try adding this to the very bottom of your styles.css file:
#cssmenu > ul > li.has-sub:hover > ul {
top: 37px;
}
Edit:
A better solution would be to use hover intent to delay the closing of the submenu so that the user has enough time to move the pointer to it's intended location
Related
I almost finished designing my vertical tab, but I got stuck. I'm having a hard time putting the contents for the appropriate menu items next to each other for example, if I click on home, I should see "Content for the home tab in a panel next to it in a or container of some sort."
When I tried to put the contents of each of the tabs items, it places it at the bottom of the navigation menu. I couldn't figure out how to align the contents to the left side of the navigation menu. How can I show/align the contents of each menu item by clicking on one of the menu items?
$(document).ready(function(){
//----------Select the first tab and div by default
$('#vertical_tab_nav > ul > li > a').eq(0).addClass( "selected" );
$('#cssmenu > div > ul').eq(0).css('display','block');
//---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
$('#cssmenu > ul').click(function(e){
if($(e.target).is("a")){
/*Handle Tab Nav*/
$('#cssmenu > ul > li > a').removeClass( "selected");
$(e.target).addClass( "selected");
/*Handles Tab Content*/
var clicked_index = $("a",this).index(e.target);
$('#cssmenu > div > ul').css('display','none');
$('#cssmenu > div > ul').eq(clicked_index).fadeIn();
}
$(this).blur();
return false;
});
});//end ready
#charset "UTF-8";
/* Starter CSS for Flyout Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
width: 200px;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li:hover>ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul {
font-weight: bold;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
background-color: #141414;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
width: 200px;
}
#cssmenu:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background-color: #141414;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
color: #ffffff;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 180%;
padding: 13px 20px;
text-decoration: none;
}
#cssmenu ul {
border-right: 2px solid #0fa1e0;
list-style: none;
}
#cssmenu>ul {
float: left;
}
#cssmenu>ul>li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
right: 0;
top: 50%;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #0fa1e0;
margin-top: -10px;
}
#cssmenu>ul>li:first-child>a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu>ul>li:last-child>a {
border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
-webkit-border-radius: 0 0 0 5px;
}
#cssmenu>ul>li.active a {
background-color: #070707;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
}
#cssmenu>ul>li.active>a {
box-shadow: inset 0 0 5px black;
-moz-box-shadow: inset 0 0 5px black;
-webkit-box-shadow: inset 0 0 5px black;
}
#cssmenu>ul>li:hover>a {
background-color: #070707;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
box-shadow: inset 0 0 5px black;
-moz-box-shadow: inset 0 0 5px black;
-webkit-box-shadow: inset 0 0 5px black;
color: #ffffff;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover>ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 150px;
top: 5px;
left: 100%;
}
#cssmenu .has-sub ul a {
font-size: 12px;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #31b7f1;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #0c82b5;
}
#cssmenu .has-sub .has-sub:hover>ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c82b5;
border-bottom: 1px dotted #0fa1e0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #09638a;
}
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href='#a'><span>Home</span></a></li>
<li class='active has-sub'><a href='#b'><span>Products</span></a></li>
<li><a href='#c'><span>About</span></a></li>
<li class='last'><a href='#d'><span>Contact</span></a></li>
</ul>
<div id="a">
a. Content for home tab in a panel next to it
</div>
<div id="b">
b. Content for products tab in a panel next to it
</div>
<div id="c">
c. Content for about tab in a panel next to it
</div>
<div id="d">
d. Content for contact tab in a panel next to it
</div>
</div>
</body>
<html>
Multiple changes there, but here is the fix:
$(document).ready(function(){
$('.content-container div').hide()
$('.content-container div').eq(0).show();
$('#cssmenu a').click(function(e){
/*Handle Tab Nav*/
$('#cssmenu > ul > li > a').removeClass( "selected");
$(e.target).addClass( "selected");
var index = $(this).parent('li').index();
$('.content-container div').hide()
$('.content-container div').eq(index).show();
});
});//end ready
#charset "UTF-8";
.content-container {
float: left;
background: white;
}
/* Starter CSS for Flyout Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li:hover>ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul {
font-weight: bold;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
background-color: #141414;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
}
#cssmenu:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background-color: #141414;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
color: #ffffff;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 180%;
padding: 13px 20px;
text-decoration: none;
}
#cssmenu ul {
border-right: 2px solid #0fa1e0;
list-style: none;
}
#cssmenu>ul {
float: left;
}
#cssmenu>ul>li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
right: 0;
top: 50%;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #0fa1e0;
margin-top: -10px;
}
#cssmenu>ul>li:first-child>a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu>ul>li:last-child>a {
border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
-webkit-border-radius: 0 0 0 5px;
}
#cssmenu>ul>li.active a {
background-color: #070707;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
}
#cssmenu>ul>li.active>a {
box-shadow: inset 0 0 5px black;
-moz-box-shadow: inset 0 0 5px black;
-webkit-box-shadow: inset 0 0 5px black;
}
#cssmenu>ul>li:hover>a {
background-color: #070707;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
box-shadow: inset 0 0 5px black;
-moz-box-shadow: inset 0 0 5px black;
-webkit-box-shadow: inset 0 0 5px black;
color: #ffffff;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover>ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 150px;
top: 5px;
left: 100%;
}
#cssmenu .has-sub ul a {
font-size: 12px;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #31b7f1;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #0c82b5;
}
#cssmenu .has-sub .has-sub:hover>ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c82b5;
border-bottom: 1px dotted #0fa1e0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #09638a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cssmenu'>
<ul>
<li><a href='#a'><span>Home</span></a></li>
<li class='active has-sub'><a href='#b'><span>Products</span></a></li>
<li><a href='#c'><span>About</span></a></li>
<li class='last'><a href='#d'><span>Contact</span></a></li>
</ul>
<div class="content-container">
<div id="a">
a. Content for home tab in a panel next to it
</div>
<div id="b">
b. Content for products tab in a panel next to it
</div>
<div id="c">
c. Content for about tab in a panel next to it
</div>
<div id="d">
d. Content for contact tab in a panel next to it
</div>
</div>
</div>
You might need to change the css of the menu and the content to make it work exactly the way you want.
I need to make this element (navbar) stop at footer. I had too much trouble to code the jQuery so it would move when top meets it, but I can't make it stop when it reaches footer. I tried with plain Javascript and with different jQueries but only this code would work. Thanks!
var scrolljsTop = $('#scrolljs').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= scrolljsTop) {
$('#scrolljs').css({
position: 'fixed',
top: '0'
});
} else {
$('#scrolljs').css({
position: 'relative'
});
}
});
#cssmenu {
padding: 0;
margin: 0;
margin-top: 10px;
border: 0;
line-height: 1;
height: 1560px;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 12px 26px 0 rgba(0, 0, 0, 0.19);
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
position: relative;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: -2px;
right: 0;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
width: 200px;
background: #333;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
zoom: 1;
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
#cssmenu > ul {
width: 200px;
}
#cssmenu ul ul {
width: 200px;
}
#cssmenu > ul > li > a {
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu > ul > li > a:hover {
color: #fff;
}
#cssmenu > ul > li.active a {
background: #1b9bff;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
background: #006fc5;
}
#cssmenu li {
position: relative;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}
#cssmenu ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
border: 1px solid #0082e7;
}
#cssmenu ul ul a {
font-size: 12px;
color: #fff;
}
#cssmenu ul ul a:hover {
color: #fff;
}
#cssmenu ul ul li {
border-bottom: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #4eb1ff;
color: #fff;
}
#cssmenu.align-right > ul > li > a {
border-left: 4px solid #1b9bff;
border-right: none;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right li {
text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
#cssmenu.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#footer {
height:500px;
background-color:#2f3a5f
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="cssmenu">
<ul id="scrolljs">
<li class="active" id="social-float">
Home
</li>
<li>Menus
</li>
<li>Settings
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="footer"></div>
You need footer offset and on current scroll you need to add windowinnerHeight. I hope this will help you clearly. If you have any question ask me in comment. :) . FiddleLiveDemo
$(window).scroll(function() {
var scrollHeight= ($('#scrolljs').offset().top + $('#scrolljs').height());
var currentScroll = ($(document).scrollTop() + window.innerHeight);
var footerOffset = $('#footer').offset().top;
if (scrollHeight >= footerOffset){
$('#scrolljs').css('position', 'absolute');
}
else if (currentScroll < footerOffset){
$('#scrolljs').css('position', 'fixed'); // restore when you scroll up
}
});
#cssmenu {
padding: 0;
margin: 0;
margin-top: 10px;
border: 0;
line-height: 1;
height: 1560px;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 12px 26px 0 rgba(0, 0, 0, 0.19);
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
position: relative;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: -2px;
right: 0;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
width: 200px;
background: #333;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
zoom: 1;
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
#cssmenu > ul {
width: 200px;
}
#cssmenu ul ul {
width: 200px;
}
#cssmenu > ul > li > a {
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu > ul > li > a:hover {
color: #fff;
}
#cssmenu > ul > li.active a {
background: #1b9bff;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
background: #006fc5;
}
#cssmenu li {
position: relative;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}
#cssmenu ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
border: 1px solid #0082e7;
}
#cssmenu ul ul a {
font-size: 12px;
color: #fff;
}
#cssmenu ul ul a:hover {
color: #fff;
}
#cssmenu ul ul li {
border-bottom: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #4eb1ff;
color: #fff;
}
#cssmenu.align-right > ul > li > a {
border-left: 4px solid #1b9bff;
border-right: none;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right li {
text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
#cssmenu.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#footer {
height:500px;
background-color:#2f3a5f
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div>
<div id="cssmenu">
<ul id="scrolljs">
<li class="active" id="social-float">
Home
</li>
<li>Menus
</li>
<li>Settings
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="footer"></div>
In your jquery change your position: fixed to position: absolute so it looks like this:
var scrolljsTop = $('#scrolljs').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= scrolljsTop) {
$('#scrolljs').css({
position: 'absolute',
top: '0'
});
} else {
$('#scrolljs').css({
position: 'relative'
});
}
});
http://codepen.io/kawnah/pen/EZaeYg
Please note, that since your menu is so big, it will stop pretty much right as the user scrolls.
Wrap your cssmenu into a div with id content
<div id='content'>
<div id="cssmenu">
<ul id="scrolljs">
<li class="active" id="social-float">
Home
</li>
<li>Menus
</li>
<li>Settings
</li>
<li>Contact
</li>
</ul>
</div>
</div>
In your JQuery
Get the difference between height of content div and csmenu div
//Get the differnce of the two divs height here
var def_height = $('#content').height() - $('#scrolljs').height();
Now, inside the scroll event listener in jQuery set the top to the maximum of the def_height calculated above.
/*
Set max top scroll to the def_height
*/
var scroll = (currentScroll<def_height)?currentScroll:def_height;
$('#scrolljs').css('top',scroll + 'px');
Here is the full updated jQuery
var scrolljsTop = $('#scrolljs').offset().top;
//Get the differnce of the two divs height here
var def_height = $('#content').height() - $('#scrolljs').height();
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= scrolljsTop) {
/*
Set max top scroll to the def_height
*/
var scroll = (currentScroll<def_height)?currentScroll:def_height;
$('#scrolljs').css('top',scroll + 'px');
} else {
$('#scrolljs').css('top','0');
}
});
Here is the updated Snippet
var scrolljsTop = $('#scrolljs').offset().top;
//Get the differnce of the two divs height here
var def_height = $('#content').height() - $('#scrolljs').height();
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= scrolljsTop) {
/*
Set max top scroll to the def_height
*/
var scroll = (currentScroll<def_height)?currentScroll:def_height;
$('#scrolljs').css('top',scroll + 'px');
} else {
$('#scrolljs').css('top','0');
}
});
#cssmenu {
padding: 0;
margin: 0;
margin-top: 10px;
border: 0;
line-height: 1;
height: 1560px;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 12px 26px 0 rgba(0, 0, 0, 0.19);
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
position: relative;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: -2px;
right: 0;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
width: 200px;
background: #333;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
zoom: 1;
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
#cssmenu > ul {
width: 200px;
}
#cssmenu ul ul {
width: 200px;
}
#cssmenu > ul > li > a {
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu > ul > li > a:hover {
color: #fff;
}
#cssmenu > ul > li.active a {
background: #1b9bff;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
background: #006fc5;
}
#cssmenu li {
position: relative;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}
#cssmenu ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
border: 1px solid #0082e7;
}
#cssmenu ul ul a {
font-size: 12px;
color: #fff;
}
#cssmenu ul ul a:hover {
color: #fff;
}
#cssmenu ul ul li {
border-bottom: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #4eb1ff;
color: #fff;
}
#cssmenu.align-right > ul > li > a {
border-left: 4px solid #1b9bff;
border-right: none;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right li {
text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
#cssmenu.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#footer {
height:500px;
background-color:#2f3a5f
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div id="cssmenu">
<ul id="scrolljs">
<li class="active" id="social-float">
Home
</li>
<li>Menus
</li>
<li>Settings
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="footer"></div>
My dynamically added objects won't pick up the styles entirely.
I have these html objects:
<div id="cssmenu">
<ul id="buttonsDiv">
</ul>
</div>
I am adding several li elements:
for (var i = 0; i < numOfDays; i++) {
let j=i;
var newButton = $("<li class='active has-sub'><a href='#'><span> Day " + (i + 1) + "</span></a><ul id=button" + (i + 1) + "></ul></li>");
$("#buttonsDiv").append(newButton);
}
And after a certain object is clicked I would like to insert sub menu items:
function addEvents(attraction)
{
var newButton = $("<li><a href='#'><span>"+ attraction+ "</span></a></li>");
var ulChildren = document.getElementById('buttonsDiv').children;
var childrenLength = ulChildren.length;
for(var i = 0; i < childrenLength; i++){
if(ulChildren[i].children[1].id == day){
$(ulChildren[i].children[1]).append(newButton);
}
}
}
Now, the insertion is working as expected, when I "Inspect" the elements on the web (they are being added).
But for some reason it doesn't get the styles right, when I am hard coding the object I get the desired effect.
Does it have something to do with the DOM not recognizing my new elements?
Can anyone point me in the right direction?
EDIT:
This is a link to my CSS file :
http://triprecommendation.azurewebsites.net/project/buttons_styles.css
CSS:
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
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 {
width: 200px;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
.align-right {
float: right;
}
#cssmenu > ul > li > a {
padding: 15px 20px;
border-left: 1px solid #1682ba;
border-right: 1px solid #1682ba;
border-top: 1px solid #1682ba;
cursor: pointer;
z-index: 2;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
background: #36aae7;
background: -webkit-linear-gradient(#36aae7, #1fa0e4);
background: -moz-linear-gradient(#36aae7, #1fa0e4);
background: -o-linear-gradient(#36aae7, #1fa0e4);
background: -ms-linear-gradient(#36aae7, #1fa0e4);
background: linear-gradient(#36aae7, #1fa0e4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
color: #eeeeee;
background: #1fa0e4;
background: -webkit-linear-gradient(#1fa0e4, #1992d1);
background: -moz-linear-gradient(#1fa0e4, #1992d1);
background: -o-linear-gradient(#1fa0e4, #1992d1);
background: -ms-linear-gradient(#1fa0e4, #1992d1);
background: linear-gradient(#1fa0e4, #1992d1);
}
#cssmenu > ul > li.open > a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
border-bottom: 1px solid #1682ba;
}
.holder {
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
}
.holder::after,
.holder::before {
display: block;
position: absolute;
content: "";
width: 6px;
height: 6px;
right: 20px;
z-index: 10;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.holder::after {
top: 17px;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
border-color: #eeeeee;
}
.holder::before {
top: 18px;
border-top: 2px solid;
border-left: 2px solid;
border-top-color: inherit;
border-left-color: inherit;
}
#cssmenu ul ul li a {
cursor: pointer;
border-bottom: 1px solid #32373e;
border-left: 1px solid #32373e;
border-right: 1px solid #32373e;
padding: 10px 20px;
z-index: 1;
text-decoration: none;
font-size: 13px;
color: #eeeeee;
background: #49505a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #424852;
color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
display: block;
position: absolute;
content: "";
width: 5px;
height: 5px;
right: 20px;
z-index: 10;
top: 11.5px;
border-top: 2px solid #eeeeee;
border-left: 2px solid #eeeeee;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
border-color: #ffffff;
}
Manually working example :
<div id='cssmenu'>
<ul> <!-- buttonsDiv-->
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li><a href='#'><span>Pro 2</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='active has-sub'><a href='#'><span>Contact</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
</ul>
</li>
</ul>
</div>
Got it working!
It wasn't a problem with the CSS.
I have another file which has a click listener event for the buttons of the menu.
For some reason it didn't launch the event after a click on the dynamic added buttons. So I added an event for each upon creation and that solved it !
I'd like my Menu to be initially hidden on load and then clicking the text Menu reveals the Menu. Currently, the Menu is visible always. Why is this?
Demo: http://jsfiddle.net/eoxug3cz/
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menu = $(this).next('ul#menu-header');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
nav.columns ul {
padding-left: 0px;
}
nav.primary {
padding-top:0;
text-align:left;
float:left;
margin-top:0;
}
nav.primary > ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
nav.primary > ul > li > ul {
width: 100%;
display: block;
}
nav.primary.align-right ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li {
width: 100%;
display: block;
}
nav.primary.align-right ul ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li > a {
width: 100%;
display: block;
}
nav.primary ul li ul li a {
width: 100%;
}
nav.primary.align-center > ul {
text-align: left;
}
nav.primary.align-center > ul > li {
display: block;
}
nav.primary > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
nav.primary ul {
width: 100%;
}
nav.primary ul > li {
float: none;
width: 100%;
}
nav.primary ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
nav.primary ul > li:after {
display: none;
}
nav.primary ul li.has-sub > a:after,
nav.primary ul li.has-sub > a:before,
nav.primary ul li ul li.has-sub:after,
nav.primary ul li ul li.has-sub:before {
display: none;
}
nav.primary ul li ul,
nav.primary ul li ul li ul,
nav.primary ul li ul li:hover > ul,
nav.primary.align-right ul li ul,
nav.primary.align-right ul li ul li ul,
nav.primary.align-right ul li ul li:hover > ul {
left: 0;
position: relative;
right: auto;
}
nav.primary ul li ul li,
nav.primary ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
nav.primary ul li ul li a {
padding: 0px 20px 0px 35px;
}
nav.primary ul li ul ul li a {
padding: 0px 20px 0px 50px;
}
nav.primary ul li ul li:hover > a {
color: #000000;
}
nav.primary #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #111;
cursor: pointer;
}
nav.primary #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
nav.primary #menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
#media screen and (max-width: 480px) {
.sticky-header {
padding-top:0px;
position:absolute;
}
nav.primary #menu-button {
text-transform:lowercase;
padding: 30px 20px 10px 20px;
}
footer ul li {
border: 0;
display: block;
width: 100%;
padding: 0 20px!important;
}
nav.primary #menu-button:after,
nav.primary #menu-button:before {
display:none;
}
.primary-item:hover .sub-menu, .primary-item .sub-menu {
margin:0;
}
.selected {
background:#748d1b;
color:#fff!important;
}
li.primary-item {
background:#ddd;
padding-top:0;
padding-bottom:0;
border-bottom:2px solid #ccc;
}
li.primary-item a {
display:block;
}
#menu-button {
margin-top: 20px;
}
nav.primary > ul {
margin-top:10px;
}
nav.primary #menu-button {
padding: 10px 20px 10px 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<nav class="primary menu right">
<div class="menu-header-container">
<ul id="menu-header" class="menu menu inline naked horizontal bold">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item">About</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item">Team</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item">Work</li>
</ul>
</div>
</nav>
Thank you.
There is a problem with your css. Use nav.primary > div > ul instead of nav.primary > ul. Use > only for immediate children.
You can use JQuery toggle - JQuery toggle
JSFiddle example:
A working toggle exaple
JS
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menuItems = $(".menu-header-container");
menuItems.toggle();
});
CSS
.menu-header-container {
display:none;
}
If I understand correct :)
hope it's what you want
example
js
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
if(!$(".menu-header-container").hasClass("opened")) {
$(".menu-header-container").show();
$(".menu-header-container").addClass("opened");
}else {
$(".menu-header-container").hide();
$(".menu-header-container").removeClass("opened");
}
});
nav.columns ul {
padding-left: 0px;
}
nav.primary {
padding-top:0;
text-align:left;
float:left;
margin-top:0;
}
nav.primary > ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
nav.primary > ul > li > ul {
width: 100%;
display: block;
}
nav.primary.align-right ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li {
width: 100%;
display: block;
}
nav.primary.align-right ul ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li > a {
width: 100%;
display: block;
}
nav.primary ul li ul li a {
width: 100%;
}
nav.primary.align-center > ul {
text-align: left;
}
nav.primary.align-center > ul > li {
display: block;
}
nav.primary > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
nav.primary ul {
width: 100%;
}
nav.primary ul > li {
float: none;
width: 100%;
}
nav.primary ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
nav.primary ul > li:after {
display: none;
}
nav.primary ul li.has-sub > a:after,
nav.primary ul li.has-sub > a:before,
nav.primary ul li ul li.has-sub:after,
nav.primary ul li ul li.has-sub:before {
display: none;
}
nav.primary ul li ul,
nav.primary ul li ul li ul,
nav.primary ul li ul li:hover > ul,
nav.primary.align-right ul li ul,
nav.primary.align-right ul li ul li ul,
nav.primary.align-right ul li ul li:hover > ul {
left: 0;
position: relative;
right: auto;
}
nav.primary ul li ul li,
nav.primary ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
nav.primary ul li ul li a {
padding: 0px 20px 0px 35px;
}
nav.primary ul li ul ul li a {
padding: 0px 20px 0px 50px;
}
nav.primary ul li ul li:hover > a {
color: #000000;
}
nav.primary #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #111;
cursor: pointer;
}
nav.primary #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
nav.primary #menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
#media screen and (max-width: 480px) {
.sticky-header {
padding-top:0px;
position:absolute;
}
nav.primary #menu-button {
text-transform:lowercase;
padding: 30px 20px 10px 20px;
}
footer ul li {
border: 0;
display: block;
width: 100%;
padding: 0 20px!important;
}
nav.primary #menu-button:after,
nav.primary #menu-button:before {
display:none;
}
.primary-item:hover .sub-menu, .primary-item .sub-menu {
margin:0;
}
.selected {
background:#748d1b;
color:#fff!important;
}
li.primary-item {
background:#ddd;
padding-top:0;
padding-bottom:0;
border-bottom:2px solid #ccc;
}
li.primary-item a {
display:block;
}
#menu-button {
margin-top: 20px;
}
nav.primary > ul {
margin-top:10px;
}
nav.primary #menu-button {
padding: 10px 20px 10px 20px;
}
}
div.menu-header-container{
display:none;
}
div.menu-header-container.open{
display:block;
}
<nav class="primary menu right">
<div class="menu-header-container">
<ul id="menu-header" class="menu menu inline naked horizontal bold">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item">About</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item">Team</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item">Work</li>
</ul>
</div>
</nav>
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menu = $(this).next('div.menu-header-container');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
see demo
I have a menu in a joomla template, when you hover a link the link highlights. I would like to know how to get the parent to stay that way when hovering over the child (sub-menu).
My current Code: HTML
<div id="navigation">
<ul class="menu ">
<li class="item-101 current active">
Home</span><span class="menudesc"></span></li>
<li class="item-107 deeper parent">Jamie</span> <span class="menudesc"></span><i class="icon-angle-down"></i>
<ul class="sub-menu"><li class="item-108">Photos</span> <span class="menudesc"></span></li>
<li class="item-109">Thoughts</span> <span class="menudesc"></span></li></ul></li>
<li class="item-110">Mike</span> <span class="menudesc"></span></li>
<li class="item-111">John</span> <span class="menudesc"></span></li>
<li class="item-112 deeper parent">Carrie</span> <span class="menudesc"></span><i class="icon-angle-down"></i>
<ul class="sub-menu"><li class="item-113">Pictures</span> <span class="menudesc"></span></li>
<li class="item-114">Thoughts</span> <span class="menudesc"></span></li>
<li class="item-115">Make-up</span> <span class="menudesc"></span></li>
<li class="item-116">books</span> <span class="menudesc"></span></li></ul></li>
<li class="item-117">Contact</span> <span class="menudesc"></span></li></ul>
</div>
The CSS:
/* Navigation */
#navbar-wrap { padding: 0px; margin:0 0 10px 0; float:right!important}
#navbar { height: 55px; }
#navbar.row { margin-bottom: 0 }
#navigation { padding:0 10px;}
#navigation ul.menu { float:right}
#navigation .menu { margin: 0; padding: 0; list-style: none;}
#navigation .menu .icon-angle-right { position: absolute; right: 10px; top: 50%; margin-top: -6px; color: #aaa; font-size: 12px; }
#navigation .menu > li { display: block; float: left; }
#navigation .menu > li ul {}
#navigation .menu ul { position: absolute; left: 0; top: 100%; margin: 10px 0 0 0; /*IE6 only*/ _margin: 0; nowhitespace: afterproperty; opacity: 0; transition: all .2s ease-in-out; visibility: hidden; z-index: 99; }
#navigation .menu ul ul { left: 100%; top: 0; }
#navigation .menu ul ul li { width: 100% }
#navigation .menu li { position: relative }
#navigation .menu li:hover > ul { margin: 0; opacity: 1; visibility: visible; }
#navigation .menu a { display: block; position: relative; padding: 20px 10px 0 10px; font-family:'Oswald',Arial, Helvetica, sans-serif;}
/* current item */
#navigation .menu > li > a:hover, #navigation .menu > li.sfHover > a, #navigation .menu > .active > a, #navigation .active > a:hover, #navigation .active > a:hover{ color: #fff; background:#67ABC9;}
#navigation .menu > .active > a, #navigation li.active > a {color: #fff }
#navigation .menu > li { margin-right: 5px; padding:0; }
#navigation .menu a { height: 55px; color: #606060; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; line-height: 55px; font-size:16px; }
/*drop-down styles*/
#navigation .menu ul { border-top: none; background: #F5F5F5; border: 1px solid #ccc; min-width:200px;
box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2)}
#navigation .menu li:hover ul { margin-top: 0; }
#navigation .menu ul ul.sub-menu { margin-top: -1px; margin-left: 1px; }
#navigation .menu ul li { border-bottom: 1px solid #ccc }
#navigation .menu ul li:first-child { }
#navigation .menu ul li:last-child { border: 0 }
#navigation .menu ul li > a:hover { color: #67ABC9; background:none;}
#navigation .menu ul a { display: block; height: auto; margin: 0px; padding: 12px 15px; text-transform: none; border: 0px; line-height: 1.7em; }
#navigation .selector { display: none }
#navigation ul.sub-menu .icon-angle-down:before {content:"\f105"!important;}
#navigation ul.sub-menu a { font-size:12px;}
#navigation ul.sub-menu .active > a { color:#67ABC9}
#navigation i { text-align:right}
#menu-icon {display: none;}
#slide-wrap a:hover{ color:#fff}
Your stylesheet is messy, you have lots of different rules with the same selector, join them; and delete unused ones.
I have cleaned the first part, finish the cleaning yourself.
About your question, basically you need
#navigation > .menu > .active > a,
#navigation > .menu > li:hover > a{
color: #fff;
background:#67ABC9;
}
Note the use of li:hover > a instead of li> a:hover.
Demo
I think this is solution you are looking for.
http://jsfiddle.net/pzaF8/
#navigation .menu > LI:hover{background-color: #67ABC9; color: #FFF}
I add only this line o your css, I didn`t edit yours cause it looks messy.