Reputation: 757
I think my problem has been answered many times before, but I can't find exactly my case.
I have a vertical menu with submenus and I want to show the submenu only if the parent was clicked (not hovered), showing only one submenu at a time and after click somewhere out the menu, I want the submenu to disappear.
This is what I've got now - it is based on hovering now. I tried to change a:hover to something like a:active, but it doesn't work well (I am not very good in CSS).
/* The container */
#cssmenu > ul {
display: block;
position: relative;
//width: 190px;
width: 100%;
}
/* The list elements which contain the links */
#cssmenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 100%;
}
/* General link styling */
#cssmenu > ul li a {
display: block;
position: relative;
margin: 2;
width: 95%;
height: 50px;
background-color: #abc578;
border-left: solid 0px #ffffff;
border-bottom: solid 1px #ffffff;
font: 0.7em Tahoma, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
padding-top: 30px;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li > a:hover,
#cssmenu > ul li:hover > a {
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
background: #82c500;
background: -webkit-linear-gradient(bottom, #82c500, #000000);
background: -ms-linear-gradient(bottom, #82c500, #000000);
background: -moz-linear-gradient(bottom, #82c500, #000000);
background: -o-linear-gradient(bottom, #82c500, #000000);
border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
content: "";
position: absolute;
top: 34px;
right: 8px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
content: "";
position: absolute;
top: 35px;
right: 8px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
border-left: 4px solid rgba(0, 0, 0, 0.3);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
position: absolute;
left: 95%;
width: 100%;
top: -9999px;
padding-left: 5px;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
top: -2px;
opacity: 1;
}
Does anyone have some idea please?
Upvotes: 4
Views: 2774
Reputation: 757
OK, I used this to solve my problem: How do I detect a click outside an element?
Now I have something like this in the footer of website:
$('html').click(function() {
hideSubMenu();
});
$("#cssmenu").click(function(event){
event.stopPropagation();
});
And when I clicked on submenu, I call subMenu function that shows submenu:
<div id='cssmenu'>
<ul>
<li class='has-sub '><a href='#' onclick="subMenu('handleSubMenu1')">
...
Upvotes: 2