when I hover around submenu , then when dragging cursor over submenu and hovering over the submenu disappers and only sometimes appear when I select any other nav menu and hover there but it only works sometimes.
Here is my code
html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
#menubar
{ width: 880px;
height: 46px;}
ul#menu
{ float: right;
margin: 0;}
ul#menu li
{ float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;}
ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;}
ul#menu li.selected a
{ height: 20px;
padding: 6px 35px 5px 28px;}
ul#menu li.selected
{ margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}
ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;}
ul#menu li a:hover
{ color: #E4EC04;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 35px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu" >
<li ><a href="#" >Home</a></li>
<li ><a ref="#" >Contact Us</a></li>
<li >
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
How can I solve this ..
Ay help is appreciated. I tried but I failed and Have no idea how to solve this.
Thanks in advance.
It's because there is a space between the "Dropdown" menu and the dropdown list. Instead of hard coding the margin in px use a percentage. I also recommend using top instead of margin-top. Replace .dropdown-content css with:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
top: 100%; //To move it up or down more you can use calc like: calc(100% + 1px) or calc(100% - 2px)
}
when you move the mouse from the dropdown menu toggle, into the submenu, you are briefly not hovering over the div due to the margin-top value of the submenu. If you really want that divide between the two add white top border (i.e. border-top: 2px solid white;).
Heres a JSFiddle
Change the CSS as follows:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
Change the HTML as follows:
<li class="dropdown">
<div>
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
The issue is simply a gap between li.dropdown and .dropdown-content. It is worth noting that when you move the cursor quickly from the dropdown button to the dropdown list, it does not disappear. However, doing that slowly vanishes the list.
The simplest solution I could think of here is to decrease the top margin of the dropdown list, while adding a top padding to the first list item to compensate for that lost margin (a top margin won't work here). So, your code for the dropdown menu would look like this:
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a,
ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:first-child {
padding-top:17px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu">
<li>Home</li>
<li><a ref="#">Contact Us</a></li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
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'm currently writing a on-click drop-down menu in CSS. I want to position my div container for my submenu directly beneath my label. I've hard coded the percentage from the left on each specific container, but the second it is displayed on a larger screen, everything shifts. I know that was a wrong way to go about it, I just couldn't get anything else to work. I don't know Javascript or Jquery. What is the easiest way to achieve this look that will work on multiple browsers and screen size?
input {
opacity: .3;
margin-right: -.7em;
margin-left: 0em;
overflow: visible;
}
input + label {
color: #fff;
display: inline-block;
padding: 6px 8px 10px 24px;
background-image: black url(../images/glossyback2.gif);
height: 8px;
margin: 0;
line-height: 12px;
position: relative;
}
input:hover + label:hover {
background: #3385D6;
}
input + label + div {
margin: 0;
margin-top: 2px;
padding: 16px;
border: 1px solid;
width: 100%;
height: auto;
position: absolute;
top: 23px;
display: none;
}
input:checked + label + div {
display: block;
}
input:checked + label {
z-index: 3;
}
/* GUI styled: */
.menu {
z-index: 1000;
height: 1px;
width: 100%;
padding: 20px;
position: relative;
background-image: black url(../images/glossyback.gif);
background-color: #0066CC;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
.menu a {
text-decoration: none;
color: #fff;
}
.menu input {
display: none;
}
.menu div a {
text-decoration: none;
color: blue;
}
.menu div td:hover {
text-decoration: none;
background-color: #3385D6;
color: #ffffff;
}
.menu div input {
display: inline;
opacity: 1;
margin: 0;
}
div.menu input + label {
z-index: 1000;
padding: 0;
border-color: #ccc;
border-width: 0 1px;
height: 19px;
margin: 0 -.23em;
}
.menu label span {
z-index: 1000;
font-size: 12px;
line-height: 9px;
padding: 6px 1em 12px 1em;
display: block;
margin-top: -1px;
background-image: url(../images/glossyback.gif) repeat-x bottom left;
}
.menu label span a:hover {
background-image: black url(../images/glossyback2.gif);
}
.menu label span.startcap, .menu label span.endcap {
text-decoration: none;
z-index: 1000;
padding: 0;
background-image: black url(../images/glossyback.gif);
float: left;
width: 8px;
height: 24px;
margin-left: -6px;
}
.menu label span.endcap {
z-index: 1000;
background-image: black url(../images/glossyback.gif);
float: right;
margin-right: -6px;
}
.menu input + label + div {
position: absolute;
border: 1px solid #808080;
border-width: 2px 1px 1px 1px;
background: #F0F6FC;
text-align: left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
width: 15%;
top: 35px;
left: 35px;
}
.menu input + label + div > div p {
font-size: 12px;
line-height: 18px;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: left;
z-index: 1000;
}
.menu input + label + div > div {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #ABABAB;
border-width: 2px 1px 1px 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 16px;
padding-top: 5px;
background-image: url(../images/glossyback2.gif));
}
.menu input:checked + label {
background-color: #AFCEEE;
border-color: #6696CB;
z-index: 1000;
}
.menu input:checked + label span {
background-image: url(../images/glossyback.gif);
}
.menu input:checked + label span.startcap {
background-image: url(../images/glossyback.gif);
}
.menu input:checked + label span.endcap {
background-image: url(../images/glossyback.gif);
z-index: 1000;
}
<div class="menu">
<input type="radio" name="UItab" id="taba" checked="checked">
<label for="taba"><span class="startcap"></span><span>
Home</span></label>
<input type="radio" name="UItab" id="tabb">
<label for="tabb"><span>Users</span></label>
<div style="height:5px;left:34.25%;width:10.5%">
<div>
<table>
<tr>
<td id="linka"><a href="index.php?page=user_management">
User Management</a></td>
</tr>
</table>
</div>
</div>
<input type="radio" name="UItab" id="tabc">
<label for="tabc"><span>Elements</span></label>
<div style="height:20px;left:38.5%;width:10.5%;">
<div>
<table>
<tr>
<td id="linkb"><a href="index.php?page=new_element">
New Element</a></td>
</tr>
<tr>
<td id="linkc"><a href="index.php?page=exst_element">
Existing Elements</a></td>
</tr>
</table>
</div>
</div>
Wrap the input and the menu in a container with position: relative and set to the menu position: absolute and top: 100% just like in this example:
.wrapper{
position: relative;
display: inline-block;
margin-right: 30px;
}
.my-menu{
display: none;
position: absolute;
top: 100%;
left: 0;
background: #4197CF;
width: 80px;
padding: 0 5px;
}
input:checked + label + .my-menu {
display: block;
}
<div class="wrapper">
<input type="radio" name="UItab" id="tabb">
<label for="tabb"><span>Users</span></label>
<div class="my-menu">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
</div>
<div class="wrapper">
<input type="radio" name="UItab" id="tabb1">
<label for="tabb1"><span>Other Users</span></label>
<div class="my-menu">
<p>Element 4</p>
<p>Element 5</p>
<p>Element 6</p>
</div>
</div>
The above is a basic example just to show you how to do it. Just add your styles.
Check this example out.
I used this website as a reference to make a similar drop-down setup. This has some added features that make it a bit more flashy and fluid. Figured I'd provide an alternative so you have some options for how you want to set up your drop-downs.
HTML:
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Users <span class="arrow">▼</span>
<ul class="sub-menu">
<li>New Element</li>
</ul>
</li>
<li>
Elements <span class="arrow">▼</span>
<ul class="sub-menu">
<li>New Element</li>
<li>Existing Elements</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.menu {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu li {
margin: 0px;
list-style: none;
font-family: Verdana, Geneva, sans-serif;
background-color: #0066CC;
}
.menu a {
transition: all linear 0.15s;
color: white;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: #F4F9FD1;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #80B2E6;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #005CB8;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #80B2E6;
}
I have a header that has a transparent header and then when the user scrolls it changes to a white background. I need the nav bar text to change from white to grey when user scrolls as well but cannot get this to work. I'm not sure my code or css is particularly accurate either.
Thanks in advance.
Header HTML is
<div class="header">
<div class="topbar"></div>
<div class="sitelogo"></div>
<nav id="navigation">
<ul>
<li id="twitter"><em>Twitter</em></li>
<li>Contact</li>
<li>Blog</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<div style="clear:both;"></div>
css code is
.header.active {
background: #fff;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 0.2s ease-in-out;
height: auto;
background-color:transparent;
text-align: center;
line-height: 40px;
}
#navigation {
width:400px;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
float:left;
text-align:center;
}
#navigation ul a {
display: block;
width: 50px;
height: 18px;
float:left;
}
#navigation ul a em {
display: none;
width:50px;
}
#navigation ul li {
float: right;
height: 18px;
}
#navigation ul #twitter {
background-image:url(../images/twitter_sprite_small.png);
display: block;
width:18px;
float:right;
margin-left:20px;
opacity:0.4;
background-repeat:no-repeat;
}
#navigation ul #twitter:hover {
background-image:url(../images/twitter_sprite_small.png);
display: block;
background-position: 0px -18px;
background-repeat:no-repeat;
}
nav {
float:right;
margin-top: 40px;
margin-right:78px;
}
nav a {
display:inline-block;
margin-left:20px;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #676767;
text-decoration:none;
float:right;
}
nav a:hover {
display:inline-block;
margin-left:20px;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #0171bd;
text-decoration:none;
}
JQuery
$(window).on("scroll", function() {
if($(window).scrollTop() > 1) {
$(".header").addClass("active");
} else {
//remove the background property so it comes transparent again (defined in your css)
$(".header").removeClass("active");
}
});// JavaScript Document
Thanks in advance
.header.active #navigation ul a{
color: grey;
}
I am attempting to make a image slider, using the design my client is already using. But I have never made an image slider that changes images every 6 seconds, and you can choose to go to image 1, 2, or 3. Right now I am using 3 <div>'s and each one has the image assigned to them with the background.
Please excuse my sad attempt of Javascript, I am very new with it, and only know a few ways to work with it and jQuery.
And yes, I do have jQuery included on my page.
Oh, and all the <div>'s are display:none;, so to make them visible, I am adding a class called .active.
Here's a jsFiddle to my current work - http://jsfiddle.net/377Ma/4/
And here's the code.
HTML
<div class="art-slider art-slidecontainerheader" data-width="800" data-height="250">
<div class="art-slider-inner">
<div class="art-slide-item art-slideheader0 active" style="" id="img1">
</div>
<div class="art-slide-item art-slideheader1 active" style="" id="img2">
</div>
<div class="art-slide-item art-slideheader2" style="" id="img3">
</div>
</div>
</div>
<div class="art-slidenavigator art-slidenavigatorheader" data-left="92">
</div>
<div class="art-shapes">
</div>
</header>
<nav class="art-nav desktop-nav">
<ul class="art-hmenu menu-3">
<li class="menu-item-45"><a title="shop" href="http://www.iamsotare.storenvy.com">shop</a>
</li>
<li class="menu-item-116"><a title="blog" href="http://iamsotare.com/blog/">blog</a>
</li>
<li class="menu-item-115"><a title="story" href="http://iamsotare.com/story/">story</a>
</li>
<li class="menu-item-114"><a title="connect" href="http://iamsotare.com/connect/">connect</a>
</li>
<li class="menu-item-113"><a title="FAQs" href="http://iamsotare.com/faqs/">FAQs</a>
</li>
</ul>
</nav>
</div>
CSS - sorry, I couldn't find the exact spots needed, it's a bit long.
#content{
margin-left:auto;
margin-right:auto;
width:100%;
max-width:800px;
}
.active{
display:block;
}
.a
header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-hmenu a, .art-vmenu a, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
}
header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul
{
list-style-type: none;
}
ol
{
list-style-position: inside;
}
html, body
{
height: 100%;
}
body
{
padding: 0;
margin:0;
color: #303F50;
}
.art-header:before, #art-header-bg:before, .art-layout-cell:before, .art-layout-wrapper:before, .art-footer:before, .art-nav:before, #art-hmenu-bg:before, .art-sheet:before
{
width: 100%;
content: " ";
display: table;
}
.art-header:after, #art-header-bg:after, .art-layout-cell:after, .art-layout-wrapper:after, .art-footer:after, .art-nav:after, #art-hmenu-bg:after, .art-sheet:after,
.cleared, .clearfix:after {
clear: both;
font: 0/0 serif;
display: block;
content: " ";
}
.art-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 0;
}
.art-slider-inner {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.art-slidenavigator > a {
display: inline-block;
vertical-align: middle;
outline-style: none;
font-size: 1px;
}
.art-slidenavigator > a:last-child {
margin-right: 0 !important;
}
.art-slidecontainerheader {
position: relative;
width: 100%;
height: 100%;
}
.art-slidecontainerheader .art-slide-item {
-webkit-transition: 800ms ease-in-out opacity;
-moz-transition: 800ms ease-in-out opacity;
-ms-transition: 800ms ease-in-out opacity;
-o-transition: 800ms ease-in-out opacity;
transition: 800ms ease-in-out opacity;
position: absolute;
display: none;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.art-slidecontainerheader .active, .art-slidecontainerheader .next, .art-slidecontainerheader .prev {
display: block;
}
.art-slidecontainerheader .active {
opacity: 1;
}
.art-slidecontainerheader .next, .art-slidecontainerheader .prev {
width: 100%;
}
.art-slidecontainerheader .next.forward, .art-slidecontainerheader .prev.back {
opacity: 1;
}
.art-slidecontainerheader .active.forward {
opacity: 0;
}
.art-slidecontainerheader .active.back {
opacity: 0;
}
.art-slideheader0 {
background-image: url('slideheader0.jpg');
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader1 {
background-image: url('slideheader1.jpg');
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader2 {
background-image: url('slideheader2.jpg');
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slidenavigatorheader {
display: inline-block;
position: absolute;
direction: ltr !important;
top: 226px;
left: 92%;
z-index: 101;
line-height: 0 !important;
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
}
.art-slidenavigatorheader
{
background: #B9C2CB;background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -webkit-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -moz-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -o-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -ms-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;-svg-background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;
padding:7px;
}
.art-slidenavigatorheader > a
{
background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;-svg-background: #728597;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
margin:0 10px 0 0;
width: 10px;
height: 10px;
}
.art-slidenavigatorheader > a.active
{
background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;-svg-background: #FA681E;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
margin:0 10px 0 0;
width: 10px;
height: 10px;
}
.art-slidenavigatorheader > a:hover
{
background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;-svg-background: #455B73;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
margin:0 10px 0 0;
width: 10px;
height: 10px;
}
.art-sheet
{
background: #FFFFFF;
-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25);
box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25);
margin:0 auto;
position:relative;
cursor:auto;
width: 800px;
z-index: auto !important;
}
.art-header
{
margin:0 auto;
height: 250px;
background-image: none;
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
z-index: auto !important;
}
.responsive .art-header
{
background-image: none;
background-position: center center;
}
.art-header>.widget
{
position:absolute;
z-index:101;
}
.art-nav
{
margin:0 auto;
position: relative;
z-index: 499;
text-align: center;
}
ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.art-hmenu, ul.art-hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}
ul.art-hmenu li:hover
{
z-index: 10000;
white-space: normal;
}
ul.art-hmenu:after, ul.art-hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.art-hmenu, ul.art-hmenu ul
{
min-height: 0;
}
ul.art-hmenu
{
display: inline-block;
vertical-align: bottom;
}
.art-nav:before
{
content:' ';
}
.art-hmenu-extra1
{
position: relative;
display: block;
float: left;
width: auto;
height: auto;
background-position: center;
}
.art-hmenu-extra2
{
position: relative;
display: block;
float: right;
width: auto;
height: auto;
background-position: center;
}
.art-menuitemcontainer
{
margin:0 auto;
}
ul.art-hmenu>li {
margin-left: 11px;
}
ul.art-hmenu>li:first-child {
margin-left: 5px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
margin-right: 5px;
}
ul.art-hmenu>li>a
{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 20px;
margin:0 auto;
position: relative;
display: block;
height: 55px;
cursor: pointer;
text-decoration: none;
color: #33ADFF;
line-height: 55px;
text-align: center;
}
.art-hmenu a,
.art-hmenu a:link,
.art-hmenu a:visited,
.art-hmenu a.active,
.art-hmenu a:hover
{
font-size: 28px;
font-family: KidTYPEPaintregular, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
}
ul.art-hmenu>li>a.active
{
background: #FFFFFF;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 20px;
margin:0 auto;
color: #33ADFF;
text-decoration: none;
}
ul.art-hmenu>li>a:visited,
ul.art-hmenu>li>a:hover,
ul.art-hmenu>li:hover>a {
text-decoration: none;
}
ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 20px;
margin:0 auto;
}
ul.art-hmenu>li>a:hover,
.desktop ul.art-hmenu>li:hover>a {
color: #FF05CD;
text-decoration: none;
}
ul.art-hmenu>li:before
{
position:absolute;
display: block;
content:' ';
top:0;
left: -11px;
width:11px;
height: 55px;
background: url('menuseparator.png') center center no-repeat;
}
ul.art-hmenu>li:first-child:before{
display:none;
}
ul.art-hmenu li li a
{
background: #B9C2CB;
background: transparent;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 10px;
margin:0 auto;
}
ul.art-hmenu li li
{
float: none;
width: auto;
margin-top: 2px;
margin-bottom: 2px;
}
.desktop ul.art-hmenu li li ul>li:first-child
{
margin-top: 0;
}
ul.art-hmenu li li ul>li:last-child
{
margin-bottom: 0;
}
.art-hmenu ul a
{
display: block;
white-space: nowrap;
height: 24px;
min-width: 7em;
border: 0 solid transparent;
text-align: left;
line-height: 24px;
color: #6A7D90;
font-size: 13px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
margin:0;
}
.art-hmenu ul a:link,
.art-hmenu ul a:visited,
.art-hmenu ul a.active,
.art-hmenu ul a:hover
{
text-align: left;
line-height: 24px;
color: #6A7D90;
font-size: 13px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
margin:0;
}
ul.art-hmenu li li:after
{
display: block;
position: absolute;
content: ' ';
height: 0;
top: -1px;
left: 0;
right: 0;
z-index: 1;
border-bottom: 1px dotted #C6D1DD;
}
.desktop ul.art-hmenu li li:first-child:before,
.desktop ul.art-hmenu li li:first-child:after
{
display: none;
}
ul.art-hmenu ul li a:hover, .desktop ul.art-hmenu ul li:hover>a
{
background: #FFFFFF;
background: transparent;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:0 auto;
}
.art-hmenu ul a:hover
{
text-decoration: none;
}
.art-hmenu ul li a:hover
{
color: #F05305;
}
.desktop .art-hmenu ul li:hover>a
{
color: #F05305;
}
ul.art-hmenu ul:before
{
background: #EFF2F5;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px dotted rgba(207, 216, 226, 0.9);
margin:0 auto;
display: block;
position: absolute;
content: ' ';
z-index: 1;
}
/* Begin Additional CSS Styles */
#font-face {
font-family: 'kidtypepaintregular';
src: url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.eot');
src: url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.woff') format('woff'),
url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.ttf') format('truetype'),
url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.svg#kidtypepaintregular') format('svg');
font-weight: normal;
font-style: normal;
}
.BLUE {
font-family: 'KidTypepaintregular';
color: #0000FF;
font-weight: normal;
}
/* End Additional CSS Styles */
And my sad excuse of Javascript... Haha
var imgcount = 1;
if(imgcount = 1){
$('#img1').addClass("active")
var $this = $(this);
setTimeout(function() {
}, 6000);
imgcount = 2;
}
else if(imgcount = 2){
$('#img1').removeClass("active")
$('#img2').addClass("active")
var $this = $(this);
setTimeout(function() {
}, 6000);
imgcount = 3;
}
else if(imgcount = 3){
$('#img2').removeClass("active")
$('#img3').addClass("active")
var $this = $(this);
setTimeout(function() {
}, 6000);
imgcount = 1;
}
This is not the edit of your posted fiddle.It is the fiddle that i created before and edited for this answer now.
Try this fiddle:
http://jsfiddle.net/kzQFQ/77/
var check=0;
var timer;
var Wwidth=$(window).width()-9;
$(document).ready(function () {
$('.contentContainer').css({'width':''+Wwidth+'px'});
$('.three').click(function () {
$('.container').animate({
'left': '-1120px'
});
clearTimeout(timer);
timer=setTimeout(function () {$('.one').click();}, 6000);
});
$('.two').click(function () {
$('.container').animate({
'left': '-560px'
});
clearTimeout(timer);
timer=setTimeout(function () {$('.three').click();}, 6000);
});
$('.one').click(function () {
$('.container').animate({
'left': ''+0+'px'
});
clearTimeout(timer);
timer=setTimeout(function () {$('.two').click();}, 6000);
});
timer=setTimeout(function () {$('.two').click();}, 6000);
});