I made a jQuery vertical drop down menu and I want to have white urls in all li-s hovered, not just the last one.
HTML:
<div class="left_menu">
<ul class="menu">
<li>
Categories
<ul>
<li>Add category</li>
<li>Manage categories</li>
</ul>
</li>
<li>
Galleries
<ul>
<li>Add gallery</li>
<li>Manage galleries</li>
</ul>
</li>
<li>
Pages
<ul>
<li>
Add page
<ul>
<li>Add page</li>
<li>Manage pages</li>
</ul>
</li>
<li>Manage pages</li>
</ul>
</li>
<li>Settings</li>
</ul>
</div>
CSS:
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.left_menu {
width: 219px;
}
.menu li {
font-weight: 300;
font-family: verdana;
font-size: 12px;
border-bottom: 1px solid #222222;
border-right: 1px solid #222222;
background-color: rgba(0,0,0, 0.2);
}
.menu li:hover {
background-color: rgba(0,0,0, 0.4);
}
.menu li:last-child {
border-bottom: none;
}
.menu li a {
text-decoration: none;
display: block;
color: #666666;
padding: 10px 15px;
}
.menu li a:hover {
color: #ffffff;
}
.menu li ul {
display: none;
position: absolute;
margin: -34px 0 0 219px;
width: 219px;
}
.menu li ul li {
background-color: rgba(0,0,0, 0.2);
}
.menu li ul li:hover {
background-color: rgba(0,0,0, 0.4);
}
jQuery:
$('.menu li').hover(function(){
$(this).children('ul').show();
}, function(){
$(this).children('ul').hide();
});
Please take a look here: JSFiddle
Also if you think you can improve my CSS and jQuery you are welcome. Thank you!
Have a look here http://jsfiddle.net/Xg6jR/3/
What I did was change the hover from on the a tag to the li tag which, and modified the path to be immediate to the a:
.menu li:hover > a {
color: #ffffff;
}
I also added the below line and remove the jQuery all together to make the menu show without javascript.
.menu li:hover > ul {
display: block;
}
Change the CSS to this:
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.left_menu {
width: 219px;
}
.menu li {
font-weight: 300;
font-family: verdana;
font-size: 12px;
border-bottom: 1px solid #222222;
border-right: 1px solid #222222;
background-color: rgba(0,0,0, 0.2);
}
.menu li:hover {
background-color: rgba(0,0,0, 0.4);
}
.menu li:hover > a {
color: #fff;
}
.menu li:last-child {
border-bottom: none;
}
.menu li a {
text-decoration: none;
display: block;
color: #666666;
padding: 10px 15px;
}
.menu li a:hover {
color: #ffffff;
}
.menu li ul {
display: none;
position: absolute;
margin: -34px 0 0 219px;
width: 219px;
}
.menu li ul li {
background-color: rgba(0,0,0, 0.2);
}
.menu li ul li:hover {
background-color: rgba(0,0,0, 0.4);
}
You could add this to your CSS:
.menu > li:hover > a, .menu > li > ul li:hover a {color: white}
Related
Everybody, I have been learning and trying to make a collapsible vertical menu using JavaScript and CSS.
What should I do so that when I expand both menus and I click again on user 1, the user 2 will be hidden?
Here's the coding:
body {
background:#ffffff;
margin: 0 auto;
}
#nav{
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display:none;
}
ul li a {
display:block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height:2em;
height:2em;
padding:2px 2px
}
li li a {
background:#D7DBDD
}
li:hover li a, li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
color: #000000;
background-color: #F4D03F ;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a{
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar
{
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb
{
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {}
li.on ul {
display:block
}
li.off ul {
display:none
}
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onclick=function() {
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li><strong>MENU</strong></li>
<li><strong>User 1 ></strong>
<ul>
<li>Name </li>
<li>Age</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name</li>
<li>Age</li>
</ul>
</li>
</div>
</div>
</ul>
</body>
off previously selected li by removing on class from other element
if(document.getElementsByClassName("on").length>0)
document.getElementsByClassName("on")[0].className = "off";
body {
background: #ffffff;
margin: 0 auto;
}
#nav {
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height: 2em;
height: 2em;
padding: 2px 2px
}
li li a {
background: #D7DBDD
}
li:hover li a,
li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a,
li.over a,
li:hover li a:hover,
li.over li a:hover {
color: #000000;
background-color: #F4D03F;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a {
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar {
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb {
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {} li.on ul {
display: block
}
li.off ul {
display: none
}
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i = 0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onclick = function() {
if(document.getElementsByClassName("on").length>0)
document.getElementsByClassName("on")[0].className = "off";
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload = startList;
//--><!]]>
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li><strong>MENU</strong>
</li>
<li><strong>User 1 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
</div>
</div>
</ul>
</body>
You can use jQuery to reduce your coding efforts.
Following is the only code you need.
body {
background: #ffffff;
margin: 0 auto;
}
#nav {
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height: 2em;
height: 2em;
padding: 2px 2px
}
li li a {
background: #D7DBDD
}
li:hover li a,
li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a,
li.over a,
li:hover li a:hover,
li.over li a:hover {
color: #000000;
background-color: #F4D03F;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a {
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar {
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb {
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {} li.on ul {
display: block
}
li.off ul {
display: none
}
<script type="text/javascript" src='https://code.jquery.com/jquery-3.1.1.min.js'> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav li").click(function(){
currentClass = $(this).attr('class');
$("#nav li").removeClass('on').addClass('off');
newClass = (currentClass == 'on' ? 'off' : 'on');
$(this).removeClass('off').addClass(newClass);
});
});
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li class=''><strong>MENU</strong>
</li>
<li><strong>User 1 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 3 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
</div>
</div>
</ul>
</body>
I made this nav menu for reference. It's responsive to screen size too.
var btn = document.getElementById('navBtn');
var ul = document.getElementById('navUl');
btn.addEventListener("click", function(){
ul.classList.toggle("active");
});
#bar {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background-color: #333;
}
nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
font-family: Verdana;
text-decoration: none;
}
nav ul li:hover {
background-color: #666;
}
#navBtn {
display: none;
}
#media screen and (max-width: 500px) {
nav ul li,
nav ul li a {
text-align: center;
display: block;
}
nav ul {
display: none;
}
nav ul.active {
display: block;
}
#navBtn {
display: block;
width: 60px;
height: 60px;
border: 1px solid #fff;
background-color: #333;
color: #fff;
}
}
<div id="bar">
<button id="navBtn">☰</button>
<nav>
<ul id="navUl">
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</nav>
</div>
As a side note, you can also technically do this with pure CSS (though, that's a bit tricky; you'd use a checkbox w/ labels for it).
Also, I saw your className = code, so I wanted to specifically point out the Element.classList bit in my code. It comes with .add(), .remove(), .toggle() and other useful methods.
I am using superfish menu and I want to keep the color of parent menu black when moving the mouse over the sub-menu. Currently when i move my mouse over the submenu the parent menu color becomes white same as the background. However i want the font color to be black instead of white. How can i achieve it. Please help me. Thanks in advance.
here is the my html code:
<div id="mainmenu">
<ul class="sf-menu">
<li><span>Home</span></li>
<li><span>About Us</span>
<ul>
<li><span>About 1</span></li>
<li><span>About 2</span></li>
</ul>
</li>
<li><span>Portfolio</span>
<ul>
<li><span>All Projects</span></li>
<li><span>Single Type #1</span></li>
<li><span>Single Type #2</span></li>
</ul>
</li>
<li><span>Services</span>
<ul>
<li><span>Services 1</span></li>
<li><span>Services 2</span></li>
</ul>
</li>
<li><span>News</span></li>
<li><span>Contact</span></li>
</ul>
</div>
css file code
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
}
.sf-menu ul {
box-shadow: 2px 2px 6px rgba(0,0,0,.2);
min-width: 12em; /* allow long menu items to determine submenu width */
*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu > li > a {
color: #fff;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
-webkit-font-smoothing: antialiased;
display: block;
margin: 0;
line-height: 70px;
padding: 0 40px;
}
.sf-menu a {
text-decoration: none;
zoom: 1; /* IE7 */
}
.sf-menu a {
color: #fff;
}
.sf-menu ul {
position: absolute;
min-width: 250px;
background: #fff;
z-index: 1000;
-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
padding: 30px 0 30px 30px;
}
.sf-menu li {
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */
-webkit-transition: background .2s;
transition: background .2s;
}
.sf-menu ul li {
background: #fff;
color: #888;
}
.sf-menu ul li a {
color: #888;
text-transform: uppercase;
font-size: 12px;
padding: 15px 20px;
display: block;
font-weight: 600;
}
.sf-menu ul ul li {
background: #fff;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
background: #fff;
color:#222;
/* only transition out, not in */
-webkit-transition: none;
transition: none;
}
/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
padding-right: 2.5em;
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
content: '';
position: absolute;
top: 50%;
right: 1em;
margin-top: -3px;
height: 0;
width: 0;
/* order of following 3 rules important for fallbacks to work */
border: 5px solid transparent;
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
margin-top: -5px;
margin-right: -3px;
border-color: transparent;
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
border-left-color: white;
}
/*** custom css ***/
.sf-menu li.selected,
.sf-menu li.current-cat,
.sf-menu li.current-cat-parent,
.sf-menu li.current_page_item,
.sf-menu li.current_page_parent,
.sf-menu li.current_page_ancestor {
background:#fff;
color:#222;
}
.sf-menu li.current_page_item a {
color:#222;
}
You need to include the anchor after the hover.
I've commented next to the section in your code, after this css .sf-menu li:hover a,
.sf-menu li.sfHover a {}
body {background: grey;}
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
}
.sf-menu ul {
box-shadow: 2px 2px 6px rgba(0,0,0,.2);
min-width: 12em; /* allow long menu items to determine submenu width */
*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu > li > a {
color: #fff;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
-webkit-font-smoothing: antialiased;
display: block;
margin: 0;
line-height: 70px;
padding: 0 40px;
}
.sf-menu a {
text-decoration: none;
zoom: 1; /* IE7 */
}
.sf-menu a {
color: #fff;
}
.sf-menu ul {
position: absolute;
min-width: 250px;
background: #fff;
z-index: 1000;
-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
padding: 30px 0 30px 30px;
}
.sf-menu li {
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */
-webkit-transition: background .2s;
transition: background .2s;
}
.sf-menu ul li {
background: #fff;
color: #888;
}
.sf-menu ul li a {
color: #888;
text-transform: uppercase;
font-size: 12px;
padding: 15px 20px;
display: block;
font-weight: 600;
}
.sf-menu ul ul li {
background: #fff;
}
.sf-menu li:hover a,
.sf-menu li.sfHover a { /* ADDED YOUR ANCHOR TO THIS SELECTOR */
background: #fff;
color:#222;
/* only transition out, not in */
-webkit-transition: none;
transition: none;
}
/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
padding-right: 2.5em;
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
content: '';
position: absolute;
top: 50%;
right: 1em;
margin-top: -3px;
height: 0;
width: 0;
/* order of following 3 rules important for fallbacks to work */
border: 5px solid transparent;
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
margin-top: -5px;
margin-right: -3px;
border-color: transparent;
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
border-left-color: white;
}
/*** custom css ***/
.sf-menu li.selected,
.sf-menu li.current-cat,
.sf-menu li.current-cat-parent,
.sf-menu li.current_page_item,
.sf-menu li.current_page_parent,
.sf-menu li.current_page_ancestor {
background:#fff;
color:#222;
}
.sf-menu li.current_page_item a {
color:#222;
}
<div id="mainmenu">
<ul class="sf-menu">
<li><span>Home</span></li>
<li><span>About Us</span>
<ul>
<li><span>About 1</span></li>
<li><span>About 2</span></li>
</ul>
</li>
<li><span>Portfolio</span>
<ul>
<li><span>All Projects</span></li>
<li><span>Single Type #1</span></li>
<li><span>Single Type #2</span></li>
</ul>
</li>
<li><span>Services</span>
<ul>
<li><span>Services 1</span></li>
<li><span>Services 2</span></li>
</ul>
</li>
<li><span>News</span></li>
<li><span>Contact</span></li>
</ul>
</div>
Change the below code
.sf-menu > li > a {color:#000}
Is this what you want?
.sf-menu > li a:hover{
color: red;
}
I would love to get some help with that.
I have menu with two fields: clickable field with arrow to collapse menu, and rest of the field to take me to the linked page.
I would like to have my menu to stay open when i click menu field with page link. Another words: menu stays open when page is active.
Best regards!
(function ($) {
$(document).ready(function () {
$('#cssmenu li.has-sub').prepend('<span class="holder"></span>');
$('#cssmenu li.has-sub > .holder').on('click', this, function(){
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
} else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
});
})(jQuery);
#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;
}
#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-top: 1px solid #1682ba;
cursor: pointer;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
background: #36aae7;
}
.has-sub > a:after {
content:"";
width: 0;
height: 0;
float: right;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
margin: 10px 10px 0 0;
border-top: 6px solid #5F5F5F;
}
.holder{
border: 1px solid transparent;
padding: 11px 26px;
z-index: 3;
position: absolute;
margin: 11px 12px 0 0;
right: 0;
background: rgba(255, 65, 65, 0.24);
}
#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;
}
#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: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 ul li.has-sub > a::after {
content:"";
width: 0;
height: 0;
float: right;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
margin: 10px 10px 0 0;
border-top: 6px solid #5F5F5F;
}
<type="text/javascript">
</script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a>
</li>
<li class='active has-sub'><a href='www.DontHideMePlease.com'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a>
</li>
<li class='last'><a href='#'><span>Sub Product</span></a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a>
</li>
<li class='last'><a href='#'><span>Sub Product</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a>
</li>
<li class='last'><a href='#'><span>Contact</span></a>
</li>
</ul>
</div>
http://jsfiddle.net/kwsa/ja8qy497/2/
Assuming your active class is added "when the page is active", you could use:
(function ($) {
$(document).ready(function () {
$('#cssmenu li.has-sub').prepend('<span class="holder"></span>');
$('#cssmenu li.has-sub > .holder').on('click', this, function() {
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
// Opens "active" Menu Item(s)
$('#cssmenu li.active').addClass('open').children('ul').slideDown();
});
})(jQuery);
Ohh it works! Found that wordpress adds .current-menu-item to acitve pages so it looks like that now:
$('#cssmenu li.current-menu-item').addClass('open').children('ul').slideDown();
But it's closing when i click any sub-page menu, despite the fact that also sub-pages have added .current-menu-item when they are active..
How can i keep menu open also when i click any sub-page link?
Sorry if this topic has been discussed too much. I created a navigation menu that will appear on the screen when the vertical scroll 100px and I managed to make it out of the tutorial from the internet. however I found that there is a blank page on the right side of the screen by approximately 5 times the size of the current screen.
Here is the HTML:
<header>
<div>
<ul>
<li style='margin-left:30px;'><a href='index.php'>Beranda</a></li>
<li><a href='#'>Tutorial ▾</a>
<ul class='sub-menu'>
<li><a href='#'>CSS</a></li>
<li><a href='#'>HTML5</a></li>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
<li><a href='#'>Web Design ▾</a>
<ul class='sub-menu'>
<li><a href='#'>Blogger Template</a></li>
<li><a href='#'>Menu Navigasi</a></li>
<li><a href='#'>Responsive Design</a></li>
<li><a href='#'>Codding</a></li>
</ul>
</li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</header>
Here is the CSS:
header {
position: fixed;
top: 0;
display: none;
width: 100%;
margin: 0;
height: 30px;
background-color: rgba(238,238,238,0.8);
z-index:100;
font-family:'Oswald', Arial, sans serif;
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
}
header ul, header ul ul.sub-menu {
padding:0;
margin: 0;
}
header ul li, header ul ul.sub-menu li, header ul ul.sub-menu ul.sub-sub-menu li {
list-style-type: none;
display: inline-block;
margin:0;
padding:0;
}
header ul li a {
padding:0 5px;
display: inline-block;
height: 30px;
text-align: left;
line-height: 30px;
text-decoration: none;
color:#333;
font-size:20px;
}
header li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li ul.sub-menu li a {
display: inline-block;
background: rgba(238,238,238,0.8);
color: #333;
height: 30px;
line-height: 20px;
font-size:14px;
font-weight:300;
min-width: 160px;
padding: 5px;
border-bottom: 1px solid #333;
}
header ul li ul.sub-menu li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li ul.sub-menu li ul.sub-sub-menu li a {
display: inline-block;
background: rgba(238,238,238,0.8);
color: #333;
height: 30px;
line-height: 20px;
font-size:14px;
font-weight:300;
min-width: 160px; padding: 5px;
border-bottom: 1px solid #333;
}
header ul li ul.sub-menu li ul.sub-sub-menu li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li {
position: relative;
}
header ul li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
header ul li:hover ul.sub-menu {
display: inline-block;
text-decoration: none;
font-weight:300;
}
header ul li ul.sub-menu li ul.sub-sub-menu {
display:none;
position: absolute;
top:0;
left: 100%;
width: 100px;
}
header ul li ul.sub-menu li:hover ul.sub-sub-menu {
display: inline-block;
text-decoration: none;
font-weight:300;
}
Here is the JS:
$(window).scroll(function () {
if ( $(this).scrollTop() > 100 && !$('header').hasClass('open') ) {
$('header').addClass('open');
$('header').slideDown();
} else if ( $(this).scrollTop() <= 100 ) {
$('header').removeClass('open');
$('header').slideUp();
}
});
I want to ask, if there are any errors in the CSS that I made?
Thank you for your help.
* sorry I was not very good at speaking English
It looks as though it works in this fiddle. I just added a declaration of body height like this:
body {
height: <any height greater than 100px>;
}
I think maybe a bit more info is needed to see what you are talking about. Do you have this page live somewhere? Even a slightly more complete picture of the html that you are working with. I can't see the 'blank area' you are talking about here.
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.