How can I have white urls in all the selected li-s? - javascript

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

JavaScript + CSS Single Collapsible Vertical Menu

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.

Want to keep the font color of menu black on mouseover submenu

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;
}

How to prevernt accordion menu from closing when page is active

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?

Blank Page On Right Side After Nav Bar

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.

CSS Menu Help - child / parent issues

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.

Categories

Resources