PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sun Jul 23, 2017 9:52 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 32 posts ]  Go to page 1, 2, 3  Next
Author Message
PostPosted: Mon Oct 03, 2016 4:04 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4231
Location: United Kingdom
http://tympanus.net/codrops/2013/03/05/horizontal-drop-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.


Top
 Profile  
 
PostPosted: Mon Oct 03, 2016 5:48 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4231
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Mon Oct 03, 2016 8:34 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6254
Location: Montreal, Canada
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?

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Mon Oct 03, 2016 8:42 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4231
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Mon Oct 03, 2016 8:46 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6254
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Mon Oct 03, 2016 8:47 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4231
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 3:18 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4231
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 3:27 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4231
Location: United Kingdom
I've tried this with a timer, but it doesn't do anything at all. Move the mouse down and the subnav disappears instantly.

Syntax: [ Download ] [ Hide ]
/**
 * 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.


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 7:15 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6254
Location: Montreal, Canada
Just get rid of the JS altogether and do it in pure CSS.

Syntax: [ Download ] [ Hide ]
.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;
    }
}

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 7:21 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4231
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 7:23 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6254
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 7:29 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4231
Location: United Kingdom
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.

Syntax: [ Download ] [ Hide ]
.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.


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 7:37 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6254
Location: Montreal, Canada
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?

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 7:38 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6254
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 7:41 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6254
Location: Montreal, Canada
Syntax: [ Download ] [ Hide ]
.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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 32 posts ]  Go to page 1, 2, 3  Next

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group