Develop Reference

How to make a CSS onhover menu vanish when clicking in mobile

So I'm using a hoverdown menu at the top of my good free photos site.
On desktop, it works just fine when you hover down on it, the menu appears.
When you hover off of it, it goes away.
However, mobile does not have the hover behaviour so when on mobile you click on the menu to make it appear, you can't get rid of it.
I need it to go away if you click on the menu (but not the sublinks) or anywhere else on the page.
Here is the HTML code I am using:
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
Good Free Photos Menu<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Free Stock Photos</li>
<li>Public Domain Images</li>
<li>Featured</li>
<li>Last 100 images</li>
<li>News</li>
<li>Tutorials</li>
</ul>
</li>
</ul>
</nav>
</div>
and the css:
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#919191;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#be5b70;
}
.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:#2e2728;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
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:#2e2728;
}
.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:#3e3436;
}
I know this may require some JavaScript, but I don't know what code.

You should read the following post :
CSS :hover behaviour on touchscreen devices
The problem with your current design is that it relies on the :hover state to work, which would not always work (for keyboard navigation, and causes problem with touchscreens).
A lot of accessible implementations for dropdown menus are well documented
Your current code may work within your current configuration, all you have to do is set the focus outside of your menu, for instance:
close menu
<div class="menu-wrap">
<nav class="menu">
But this won't make accessible your menu and won't make it work in the browsers where the :hover state is not recognized as :focus

Here's what I would do:
I would start by transferring the hover state from the css hover to a class name like .dropdown-open.
Using jquery:
if the website is viewed on a computer, control this class on mouseover and mousout.
else, toggle the class on mousedown of the element.
The jQuery would look something like this:
$(document).ready(function(){
function checkWidthForMenu(){
if($(window).width() > 760) {
$('.sub-menu').mouseover(function(){
$(this).addClass('dropdown-open');
});
$('.sub-menu').mouseout(function(){
$(this).removeClass('dropdown-open');
});
} else {
$(document).mousedown(function(){
$('.sub-menu.dropdown-open').removeClass('dropdown-open');
});
$('.sub-menu').mousedown(function(){
$(this).toggleClass('dropdown-open');
});
}
}
checkWidthForMenu();
$(window).resize(checkWidthForMenu());
});
Edit:
Adam has a good point for accessibility; so in your css, add the styles for the opened menu to .sub-menu.dropdown-open, .sub-menu:focus {...} This will make it open on hover and on focus (using the tab key as navigation)

CSS color property not working

I am having some trouble changing the color property of a link when its class is changed. Here is the code
<div id="information">
<ul class="pagination">
<li><span>Administration</span><small>Learn Site Administration</small></li>
<li><span>Management</span><small>Learn Access Management</small></li>
<li><span>Dashboard</span><small>Learn Dashboard Functions</small></li>
<li><span>Visitors</span><small>Learn Visitor Management</small></li>
</ul>
</div>
This is the html code i am using to create my list with no inline style or anything else.
Now here is my css.
#information {
width: 1000px;
height: 350px;
margin: 0 auto;
background:url(../images/information-bg.jpg) no-repeat 25px 5px;
}
#information ul{
list-style: none;
margin: 0;
padding: 0;
}
#information ul.pagination{
float: left;
list-style:none;
padding:0;
margin:0;
width:246px;
height:350px;
background:url(../images/pagination-bg.jpg) no-repeat left top;
}
#information ul.pagination li {
padding:5px 0 0 5px;
margin-bottom:-5px;
}
#information ul.pagination li a {
width:270px;
height:85px;
background-repeat:no-repeat;
background-position:left -85px;
background-image:url(../images/thumb-sprite.png);
text-decoration:none;
display:block;
color: #464646;
}
#information ul.pagination li.current a {
background-position:left top;
color: white;
}
#information ul.pagination li a span {
font-size: 26px;
line-height: 1.2em;
display: block;
padding: 14px 0 0 0;
}
#information ul.pagination li a small {
display:inline-block;
color:#428301;
background-repeat:no-repeat;
background-position:right -80px;
background-image:url(../images/arrows.gif);
padding:0 17px 0 0;
font-size: 10px;
}
#information ul.pagination li.current a small {
font-size: 10px;
color: #89C100;
background-position:right 5px;
}
#information ul.pagination li a span, #information ul.pagination li a small {
padding-left:40px;
}
Currently no element have a class .current so I add class to first element through script and , here is the script
$("document").ready(function(){
//Adding class to pagination and showing first image
var currentPagination = $("ul.pagination li:eq(0)").addClass("current");
var currentslide = $("ul.slides li:eq(0)").fadeIn(2000);
//On click of pagination link, changing background of pagination and anmating new slide
$("ul.pagination li").click(function (){
currentPagination.removeClass("current");
currentPagination = $(this).addClass("current");
var ul = $(this).parent();
var index = ul.children().index(this);
});
});
The dilemma here is that, the background of the li with class = current is changing correctly but the color property of the element is not changing, which you can see in css property of ( #information ul.pagination li.current a ), i dont know whats wrong with it, but i have been stuck for so long finally i decided to ask of forum.
Please note that the script is working fine because background is changing perfectly. Even at the start of webpage li with current class has the color #fff but it doesnt work afterwards, any help will be much appreciated.
P.S Here is the URL in which you can see it works fine at start but after that background image positioning changes but color does not

Its working perfectly. as you can see in JSFiddle
http://jsfiddle.net/banded_krait/m9kV9/1/
if it's still not working in your code try to put !important to that css.
#information ul.pagination li.current a {
background-position:left top;
color: red !important;
}
for the subtitle color put this css
#information ul.pagination li.current a small {
color: red !important;
}
I also updated my jsfiddle. please see.
I changed the color from white to red to see that it's working or not.

It works fine in this DEMO
I have added
#information ul.pagination li.current a {
background-position:left top;
background-color: black;
color: white;
}
So that it is easily visible
Updated Answer
try to override the default link color by specifying the following property
#information ul.pagination li.current a:active{
color: #FFF;
}

try
#information ul.pagination li.current a {
background-position:left top;
color: red;
}
your code is working fine , the thing is you are using color: white;
so link is not showing .

I don't see any error here
$("document").ready(function(){
//Adding class to pagination and showing first image
var currentPagination = $("ul.pagination li:eq(0)").addClass("current");
var currentslide = $("ul.slides li:eq(0)").fadeIn(2000);
//On click of pagination link, changing background of pagination and anmating new slide
$("ul.pagination li").click(function (){
currentPagination.removeClass("current");
currentPagination = $(this).addClass("current");
var ul = $(this).parent();
var index = ul.children().index(this);
});
});

How to make drop-down menu appear over slideshow?

I have my drop down menu directly above the slideshow. Because of this, the sub-menus get hidden behind the slideshow when I hover over the menu. I would like the sub-menus to appear over the slideshow.
Slideshow Code
var o=String.fromCharCode(60);var c=String.fromCharCode(62)
document.write(o+'iframe sr'+'c="http://slideful.com/vid.htm" frameborder="0" sty'+'le="border:0px;padding:0px;margin:0px;width:900px;height:563px;" allowtransparency="true"'+c+o+'/iframe'+c)
Dropdown Code
.tab {
font-family: arial, verdana, san-serif;
font-size: 14px;
}
.asd {
text-decoration: none;
font-family: arial, verdana, san-serif;
font-size: 13px;
color:#4234ff;
}
/*****remove the list style****/
#nav {
margin:0;
padding:0;
list-style:none;
}
/*****LI display inline *****/
#nav li {
float:left;
display:block;
width:100px;
background:#1E5B91;
position:relative;
z-index:500;
margin:0 1px;
}
/*****parent menu*****/
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:700;
height:23px;
text-decoration:none;
color:#ffffff;
text-align:center;
color:#ffeecc;
}
#nav li a:hover {
color:#470020;
}
#nav a.selected { /* style for default selected value */
color:#4234ff;
}
#nav ul { /* submenu */
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li {
width:100px;
float:left;
border-top:1px solid #fff;
}
#nav ul a { /* display block will make the link fill the whole area of LI */
display:block;
height:15px;
padding: 8px 5px;
color:#ff7777;
}
#nav ul a:hover {
text-decoration:underline;
padding-left:15px;
}
Dropdown jQuery
$(document).ready(function () {
$('#nav li').hover(function () {
$('ul', this).slideDown(350); //show its submenu
}, function () {
$('ul', this).slideUp(350); //hide its submenu
});
});
Dropdown HTML
<input type=hidden name=arav value="1*#*#*2">
<ul id='nav'>
<li><a href='#'>SHOP</a>
<ul>
<li style='background-color:#b0c4de;'><a href=http://link.com>Womens</a></li>
<li style='background-color:#bebebe;'><a href=http://link.com>Mens</a></li>
</ul>
</li>
</ul>
</input
I would like my submenus that are shown when you hover over the "Shop" button to show up over the slideshow that is below it. They hide under it.

#nav ul { /* submenu */
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
z-index:9999;
}
#nav ul li {
width:100px;
float:left;
z-index:9999;
border-top:1px solid #fff;
}
Using z-index you can achieve this.

You will want to wrap your iframe and give that container a z-index value of 1 and the navigation container should have a z-index value of 2.
You will also need to set the position property value to relative for both of these containers.
#nav {position: relative; z-index: 2;}
#iframeContainerName {position: relative; z-index: 1;}
Also, you may want to look into other ways of implementing the slideshow. Using document.write has potential issues: Why is document.write considered a "bad practice"?

I'm not sure how this would work if you're viewing your slideshow as in your code above (I'm not very familiar with Javascript or how this would work with iframes).
However, I came here also searching for answers, so I will post my solution in the case that it may help anyone who finds this page as I did.
I had the same issue, although my slideshow code looked like this.
<ul class="bjqs">
<li><img src="kjdsajkdhsja.png"></li>
</ul>
I found that changing the z-index to all the elements relating to the slideshow to lower than the drop down elements would not work - until I made my images background images in divs, as so:
<ul class="bjqs">
<li><div style="background-image:url(kjdsajkdhsja.png);width:200px;height:75px;"></div></li>
</ul>
Crummy workaround, but it did me fine for the project I was on.

For showing dropdown menu over slide show
write the code in css where you have written dropdown menu code
.dropdown_menu { visibility: visible; z-index: 100; }
it will work

Importing a feature of phpFox to SocialEngine

phpFox has released a theme named "Nebula" with the version 3.5.0. On this theme, there is button on the Header and the menu slides down when the user clicks the button. (Actually not a button, but a div)
I want to add this feature to SocialEngine. But JavaScript Code contains a phpFox variable and I don't know what it refers to. I am not so good at JavaScript.
HTML:
<div id="nb_features">
Features
<div id="nb_features_holder">
Menu widget code will be added here...
</div>
</div>
JavaScript:
$Behavior.customNebula = function(){
$('#nb_features_link').click(function(){
if ($(this).hasClass('nb_is_clicked')) {
$(this).removeClass('nb_is_clicked');
$('#nb_features_holder').slideUp('fast');
} else {
$(this).addClass('nb_is_clicked');
$('#nb_features_holder').slideDown('fast');
}
return false;
});
};
CSS:
#nb_features {
position:absolute;
top:0px;
right:0px;
}
#nb_features_link,
#nb_features_link:hover {
display:block;
width:40px;
height:40px;
line-height:40px;
text-indent:-1000px;
overflow:hidden;
background:url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
margin-top:-7px;
margin-right:20px;
}
#nb_features_link:hover {
background:#334d83 url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
}
#nb_features a.nb_is_clicked,
#nb_features a.nb_is_clicked:hover {
background:#334d83 url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
}
#nb_features_holder {
position:absolute;
background:#4f4f4f;
right:0px;
width:980px;
border:1px #304779 solid;
border-top:0px;
display:none;
margin-top:20px;
}
#nb_features_holder ul li a,
#nb_features_holder ul li a:hover {
float:left;
color:#fff;
height:30px;
line-height:30px;
padding:0px 10px 0px 10px;
text-decoration:none;
}
#nb_features_holder ul li a.menu_is_selected,
#nb_features_holder ul li a.menu_is_selected:hover {
background:#009AEF;
color:#fff;
}
#nb_features_holder ul li a:hover {
background:#2F2F2F;
-webkit-transition: all 0.50s ease;
-moz-transition: all 0.50s ease;
-o-transition: all 0.50s ease;
}
What should I do to make this code work with SocialEngine?

Well the $Behavior namespace is a wrapper for the onLoad event, is this the js variable you were talking about? If it is you can replace it for the more conventional jquery/mootools/etc way and it would probably work although you would have to match the selectors properly, dont know if the code you posted is everything you need

How to set clicked <a> tag style?

I found a menu sample, and want to use it in my site. When mouse enter menu item, its style changes, but when mouse leave menu item, its style is as previous style. User doesn't see which menu item is selected.
It is css code part:
.navigation ul#topnav li{
width:auto;
float:left;
padding:0;
position:relative;
}
.navigation ul#topnav li a{
color:#fff;
background-color:inherit;
padding:0 7px;
text-align:center;
display:block;
border-left:5px solid transparent !important;
border-right:5px solid transparent !important;
position: relative;
z-index: 50;
}
.navigation ul#topnav li a:hover{
color:#824d97;
background-color:inherit;
background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
border-left:5px solid #6c1b93 !important;
border-right:5px solid #6c1b93 !important;
}
I want when mouse leave menu item after click, its style to be shown as hover, and user see which item is selected.

Update your third CSS selector to something like:
.navigation ul#topnav li a:hover, .navigation ul#topnav li a.selected {
...so that those settings apply both to the <a> being hovered over and any <a> with the class "selected". Or if you want the clicked link to have some variation on the hover styles add .navigation ul#topnav li a.selected { as a separate entry.
Then in your JS code when a link is clicked you add the "selected" class to it and remove the class from any others:
$("#topnav li a").click(function() {
// whatever else you do on click, then
$(this).addClass("selected");
$("#topnav li a").not(this).removeClass("selected");
});
EDIT: Place that code in a $(document).ready() handler or in a script block at the end of the page.
Working demo: http://jsfiddle.net/VFJ7c/
Note: I was assuming (and I think the other answers assumed) that your menu was loading content via Ajax or showing and hiding existing content. If your menu has standard links that reload the entire page then this won't work and you'll need to either apply the "selected" class to the appropriate link in your server-side code or otherwise do it on DOM-ready rather than on click.

since you're using Jquery you can do the following:
$(function(){
$('.navigation ul#topnav li a').hover(
function(){
//remove the active class from all links on mouseover
$('.navigation ul#topnav li a').removeClass('.active');
},
function(){
//add active class to current link on mouseout
$(this).addClass('active');
}
);
});
...then add styles for the active class in your css:
.navigation ul#topnav li a.active{
/*your styles*/
}

You have to use jquery for this.
$('.links').click(function(){
$(this).addClass('clicked');
});
And then have a style for clicked links.
.clicked{
color:red;
}

You can also add a new style for the selected state:
.navigation ul#topnav li a:selected{
//Your Style Here
}

Need to add the another class and add it to the element on click.
JS
$('.navigation ul#topnav li a').click(function(){
$(this).addClass('active');
});
CSS
.navigation ul#topnav li a.active{
color:#824d97;
background-color:inherit;
background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
border-left:5px solid #6c1b93 !important;
border-right:5px solid #6c1b93 !important;
}

Try the below:
.navigation ul#topnav li a:visited{
color:#824d97;
background-color:inherit;
background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
border-left:5px solid #6c1b93 !important;
border-right:5px solid #6c1b93 !important;
}

Make javascript/jQuery code for it.
OnLoad/ready DOM
jQuery
$(".navigation ul#topnav li").click(function() {
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
CSS
.navigation ul#topnav li.selected {
background-color:#selectedcolor
}