Dropdown menu - can it work on Hover, instead of click?
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?
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.
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.
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?
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
Help.... please... lol
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Dropdown menu - can it work on Hover, instead of click?
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?
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.
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.
All the best from the United Kingdom.
Re: Dropdown menu - can it work on Hover, instead of click?
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 wrote:A delay would not work. the menus we have are extensive, so wouldn't want the reader looking down and then randomly disappears.
-
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?
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?
How?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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?
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.
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?
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.
All the best from the United Kingdom.
Re: Dropdown menu - can it work on Hover, instead of click?
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?
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.
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.
All the best from the United Kingdom.
Re: Dropdown menu - can it work on Hover, instead of click?
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?
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.
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.
All the best from the United Kingdom.
Re: Dropdown menu - can it work on Hover, instead of click?
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?
Re: Dropdown menu - can it work on Hover, instead of click?
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.
Re: Dropdown menu - can it work on Hover, instead of click?
Code: Select all
.cbp-hrmenu > ul > li:hover {
background: #47a3da;
}