Dropdown menu - can it work on Hover, instead of click?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Dropdown menu - can it work on Hover, instead of click?

Post by simonmlewis »

http://tympanus.net/codrops/2013/03/05/ ... down-menu/

Hi

How do I make the dropdowns work via hover....?
We want the main menu buttons to all bit clickable to go to pages, but the dropdowns to appear on hover.

Any ideas? I have tried changing all "click" to "hover" in the javascript but it doesn't work.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Dropdown menu - can it work on Hover, instead of click?

Post by simonmlewis »

Update: I managed to make it appear on hover, by changing the javascript to "mouseover" and "mouseout", but it also means when you move your mouse over the "dropped down area", that' appeared, it disappears because you have moved away from the menu.

Help.... please... lol
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Dropdown menu - can it work on Hover, instead of click?

Post by Celauran »

You don't even need JS for this, really. Can all be done through CSS. That said, have you tried adding a delay to the mouse out event? Having the hover event on the hidden element (once it's revealed) control display toggling?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Dropdown menu - can it work on Hover, instead of click?

Post by simonmlewis »

A delay would not work. the menus we have are extensive, so wouldn't want the reader looking down and then randomly disappears.
I would think have a hover event on the hidden element would help, so if the mouse is over there, it stays put. But I dont know how to add that into the code.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Dropdown menu - can it work on Hover, instead of click?

Post by Celauran »

simonmlewis wrote:A delay would not work. the menus we have are extensive, so wouldn't want the reader looking down and then randomly disappears.
The delay was to allow time for the mouse to go from the main nav to the subnav without the subnav disappearing. We're talking milliseconds, not seconds or minutes.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Dropdown menu - can it work on Hover, instead of click?

Post by simonmlewis »

Sorry I don't quite understand. Do you mean a delay so that the millisecond between leaving the original mouseover area and reaching the subnav div, so that it doesn't lose it in between? and having something in the CSS or JS for the subnav to keep it showing?

How?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Dropdown menu - can it work on Hover, instead of click?

Post by simonmlewis »

i think what you are saying is to add a timer delay for the mouse out, and add a CSS so that when the mouse is over the subnav, it's set to be "on". But not sure how to add the delay timer, nor the subnav. I suspect the subnav is on hover, display: block, but not certain.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Dropdown menu - can it work on Hover, instead of click?

Post by simonmlewis »

I've tried this with a timer, but it doesn't do anything at all. Move the mouse down and the subnav disappears instantly.

Code: Select all

/**
 * cbpHorizontalMenu.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpHorizontalMenu = (function() {

	var $listItems = $( '#cbp-hrmenu > ul > li' ),
		$menuItems = $listItems.children( 'a' ),
		$body = $( 'body' ),
		current = -1;

	function init() {
		$menuItems.on( 'mouseover', open );
		$listItems.on( 'mouseover', function( event ) { event.stopPropagation(); } );
	}

	function open( event ) {

		if( current !== -1 ) {
			$listItems.eq( current ).removeClass( 'cbp-hropen' );
		}

		var $item = $( event.currentTarget ).parent( 'li' ),
			idx = $item.index();

		if( current === idx ) {
			$item.removeClass( 'cbp-hropen' );
			current = -1;
		}
		else {
			$item.addClass( 'cbp-hropen' );
			current = idx;
			$body.off( 'mouseout' ).on( 'mouseout', close );
		}

		return $item.children().length === 1;

	}

setTimeout(close, 30000);

	function close( event ) {
		$listItems.eq( current ).removeClass( 'cbp-hropen' );
		current = -1;
	}

	return { init : init };

})();
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Dropdown menu - can it work on Hover, instead of click?

Post by Celauran »

Just get rid of the JS altogether and do it in pure CSS.

Code: Select all

.cbp-hrmenu {
    width: 100%;
    margin-top: 2em;
    border-bottom: 4px solid #47a3da;
    position: relative; /* Added this */
}

/* general ul style */
.cbp-hrmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
    width: 90%;
    max-width: 70em;
    margin: 0 auto;
    padding: 0 1.875em;
}

.cbp-hrmenu > ul > li {
    display: inline-block;
}

.cbp-hrmenu > ul > li > a {
    font-weight: 700;
    padding: 1em 2em;
    color: #999;
    display: inline-block;
}

/* Added this rule */
.cbp-hrmenu > ul > li:hover {
    background: #47a3da;
}

/* Added this rule */
.cbp-hrmenu > ul > li:hover a {
    color: #fff;
}

/* Added this rule */
.cbp-hrmenu > ul > li:hover > .cbp-hrsub {
    display: block;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
    color: #fff;
    background: #47a3da;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: absolute;
    background: #47a3da;
    width: 100%;
    left: 0;
}

.cbp-hropen .cbp-hrsub {
    display: block;
    padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
    width: 33%;
    float: left;
    padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
    content: " ";
    display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
    clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
    line-height: 2em;
}

.cbp-hrsub h4 {
    color: #afdefa;
    padding: 2em 0 0.6em;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) {

    .cbp-hrmenu {
        font-size: 80%;
    }

}

@media screen and (max-width: 43em) {

    .cbp-hrmenu {
        font-size: 120%;
        border: none;
    }

    .cbp-hrmenu > ul,
    .cbp-hrmenu .cbp-hrsub-inner {
        width: 100%;
        padding: 0;
    }

    .cbp-hrmenu .cbp-hrsub-inner {
        padding: 0 2em;
        font-size: 75%;
    }

    .cbp-hrmenu > ul > li {
        display: block;
        border-bottom: 4px solid #47a3da;
    }

    .cbp-hrmenu > ul > li > a {
        display: block;
        padding: 1em 3em;
    }

    .cbp-hrmenu .cbp-hrsub {
        position: relative;
    }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }

}

@media screen and (max-width: 36em) {
    .cbp-hrmenu .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Dropdown menu - can it work on Hover, instead of click?

Post by simonmlewis »

Hi there. What exactly did you add or change, as i have tweaked it my end for styling. So pasting that is breaks out style.
If you can tell me what u altered, I can try it. Thanks.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Dropdown menu - can it work on Hover, instead of click?

Post by Celauran »

I marked every change. Look at comments in the CSS. Added position: relative to parent menu and added three rules all near the top of the file.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Dropdown menu - can it work on Hover, instead of click?

Post by simonmlewis »

Sorry yes I saw your comments.
The menu bar tho, when you hover over each item on mine the background goes black. CAnnot see how to change that.

Attached is my full *custom* CSS. With your additions.

Code: Select all

.cbp-hrmenu {
	width: 100%;
text-transform: uppercase;
}

.menu_category
{
display: block;
font-weight: 600;
text-align: left;
}

.menu_subcategory
{
display: block;
font-size: 0.9em;
text-align: left;
}

.menu_extra_container
{
text-align: center;
border-bottom: 1px solid #333333;
}

.menulink { 
font-family: "Open Sans", arial;
text-transform: uppercase;
color: #ffffff;
font-size: 18px;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
display: inline-block;
}


.menulink:hover { 
color: #ff5500;
}

.menu_extra
{
display: inline-block;
padding: 7px;
}

.menu_extra a
{
font-size: 0.9em;
text-transform: uppercase;
text-decoration: none;
display: block;
}

/* general ul style */
.cbp-hrmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
text-align: center;
	width: 100%;
	max-width: 78em;
	margin: 0 auto;
	padding: 0 0.0em;
}

.cbp-hrmenu > ul > li {
	display: inline-block;
background-color: #ffffff;
}

.cbp-hrmenu > ul > li img {
width: 25px;
}


.cbp-hrmenu > ul > li > a {
	font-weight: normal;
	padding: 1.65em 0.55em;
	color: #999;
	display: inline-block;
text-decoration: none;
font-family: Montserrat, "open sans", arial;
text-transform: uppercase;
font-size: 1.15em;
font-weight: 300;
color: #333333;
}

.cbp-hrmenu > ul > li > a:hover {
	color: #ff5500;

}

/* Added this rule */
.cbp-hrmenu > ul > li:hover a {
    color: #ff5500;
}

/* Added this rule */
.cbp-hrmenu > ul > li:hover > .cbp-hrsub {
    display: block;
}

.cbp-hrmenu > ul > li:hover > .cbp-hrsub a
{
color: #ffffff;
}


.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
	color: #fff;
	background: #000000;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
	display: none;
	position: absolute;
	background: #000000;
	width: 100%;
	left: 0;
	-webkit-box-shadow: 0px 7px 5px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 7px 5px -7px rgba(0,0,0,0.75);
box-shadow: 0px 7px 5px -7px rgba(0,0,0,0.75);
}

.cbp-hropen .cbp-hrsub {
	display: block;
	padding-bottom: 1em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
	width: 25%;
	float: left;
	padding: 0 0em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
	content: " ";
	display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
	clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
	line-height: 1.8em;
}

.cbp-hrsub h4 {
	color: #afdefa;
	padding: 0.2em 0 0.0em;
	margin: 0;
	font-size: 110%;
font-family: "Open Sans", Arial;
	font-weight: normal;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) {  
   
	.cbp-hrmenu {
		font-size: 80%;
	}

}

@media screen and (max-width: 43em) { 

	.cbp-hrmenu {
		font-size: 120%;
		border: none;
	}

	.cbp-hrmenu > ul,
	.cbp-hrmenu .cbp-hrsub-inner {
		width: 100%;
		padding: 0;
	}

	.cbp-hrmenu .cbp-hrsub-inner {
		padding: 0 2em;
		font-size: 75%;
letter-spacing: 1px;
	}

	.cbp-hrmenu > ul > li {
		display: block;
letter-spacing: 1px;
background-color: #5F5F5F;
color: #ffffff;
border-top: 1px solid #333333;
font-family: "Open Sans", Arial;
	}
	
	.menulink { 
font-family: Helvetica Light, Arial;
text-transform: uppercase;
color: #ffffff;
font-size: 18px;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
display: inline-block;
}

	.cbp-hrmenu > ul > li > a {
font-size: 0.95em; 
color: #ffffff;
		display: block;
		font-weight: 300;
		font-family: Montserrat, "Open Sans", Arial;
		padding: 0.50em 2em;
	}

	.cbp-hrmenu .cbp-hrsub { 
		position: relative;
	}

	.cbp-hrsub h4 {
		padding-top: 0.6em;
	}

}

@media screen and (max-width: 36em) { 

.menulink:hover { 
color: #ff5500;
}

.menu_extra
{
display: block;
text-align: left;
padding: 10px;
padding-left: 2.1em;
border-top: 1px solid #333333;
}

.menu_extra a
{
text-transform: uppercase;
text-decoration: none;
display: block;
font-size: 0.85em;
}

	.cbp-hrmenu .cbp-hrsub-inner > div {
		width: 100%;
		float: none;
		padding: 0 2em;
	}

.cbp-hrmenu .cbp-hrsub-inner > div a {
	line-height: 2em;
}

.menu_category
{
font-size: 1.3em;
font-weight: 300;
font-family: Montserrat, 'Open Sans', sans-serif;
}


.menu_subcategory
{
border-bottom: 1px solid #333333;
font-size: 1.1em;
display: block;
padding-top: 5px;
padding-bottom: 5px;
font-weight: 300;
font-family: 'Open Sans', sans-serif;
}

.cbp-hrmenu > ul > li
{
text-align: left;
}
}
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Dropdown menu - can it work on Hover, instead of click?

Post by Celauran »

Just so I understand, you're saying you want the top level items to change to a black background with orange text but can't work out how?
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Dropdown menu - can it work on Hover, instead of click?

Post by Celauran »

Also bear in mind that I've only got HTML/CSS from the original package, so if you've modified your HTML as well my changes may not translate directly.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Dropdown menu - can it work on Hover, instead of click?

Post by Celauran »

Code: Select all

.cbp-hrmenu > ul > li:hover {
    background: #47a3da;
}
I had added that in my original modifications. That changes the background of the top nav items when you hover over them. You appear to have removed that rule.
Post Reply