Dropdown menu question

[Tennman]

Is it possible to make dropdown menu items appear when you hover over the primary menu button?  I'm new to IPS and I've not found a setting that will do it. Any help is appreciated.

[Joel R]

You should be able to add a drop-down menu as a top level item in the Menu Manager.  

[Tennman]

Thanks for the reply Joel.  Sorry that I wasn't clear with my last post.  I have made a drop-down menu and added several sub-menu items to it.   I have to click on the top level menu item to get the sub-menu (drop-down menu) to open to choose a sub-menu item.  Is there a way to get the sub-menu to drop down when I hover the mouse pointer over the top level menu item?

[Joel R]

I see what you mean now.  No, it is not possible.  Drop-down menus require a click.  

[Tennman]

OK, Thanks again for your help!

[Steve Silver]

Does anyone know how to create Hover menu's - to work the same as the default browse menu?  (rather than a drop down which has to be clicked to view) ?
+ Can a different menu item be set to be the default hover, rather than it always being 'browse' ?

[Joel R]

8 minutes ago, Steve Silver said:

Can a different menu item be set to be the default hover, rather than it always being 'browse' ?

Yes

Please refer to the Help Guide on Setting up your menu: https://invisioncommunity.com/4guides/getting-started/setting-up-your-menu-r27/

[Steve Silver]

Thanks Joel R
I looked through the guide - can't see anything which explains how to make the other menu's hover?  (rather than being drop downs)
& how to stop the browse menu from being the 1st default menu which hovers?  i.e I can move it's location, but where-ever it appears - it still defaults to being the main hover - it's contents appear as a hover, first.  

I'd like to create some new menu's - one of which then becomes the 1st default menu to hover.

So far - i've just tried drop down's, but the drop down items only stay visible for a second or 2, then disappear before you get time to click it!! maybe that's because there's no content assigned yet?  anyway, using all hovers would look neater - if that's possible /  anyone found a detailed guide how to set those up?

MANY THANKS

[Joel R]

13 minutes ago, Steve Silver said:

i.e I can move it's location, but where-ever it appears - it still defaults to being the main hover - it's contents appear as a hover, first.  

After you adjust the menu in the ACP to what you would like, please click "Publish this menu."  

[Pete T]

11 minutes ago, Steve Silver said:

Thanks Joel R
I looked through the guide - can't see anything which explains how to make the other menu's hover?  (rather than being drop downs)
& how to stop the browse menu from being the 1st default menu which hovers?  i.e I can move it's location, but where-ever it appears - it still defaults to being the main hover - it's contents appear as a hover, first.  

I'd like to create some new menu's - one of which then becomes the 1st default menu to hover.

So far - i've just tried drop down's, but the drop down items only stay visible for a second or 2, then disappear before you get time to click it!! maybe that's because there's no content assigned yet?  anyway, using all hovers would look neater - if that's possible /  anyone found a detailed guide how to set those up?

MANY THANKS

Hi @Steve Silver,

As standard not easy make dropdown menu hover vs standard click option but using custom css this option will allow the way you like.

But issue trying understand is the browser issue ? this normal becomes default because menu system and i bet forum is main item in there and will be classed active one due to forum would be default app. 

[Steve Silver]

I'm published, but still can't get the browse menu to stop being the default hover!  or see how to set up new hover items in a different menu 'hover' doesn't appear to be an option?  maybe if I create a new forum - then add that to a menu, will it then default to be a hover item under that menu?

4 minutes ago, Pete T said:

Hi @Steve Silver,

As standard not easy make dropdown menu hover vs standard click option but using custom css this option will allow the way you like.

But issue trying understand is the browser issue ? this normal becomes default because menu system and i bet forum is main item in there and will be classed active one due to forum would be default app. 

ok sounds like the 'Browse' menu - is always the default - which displays it's contents as a hover first?  anyway to change that?
I can see that 'ACTIVITIES' - is also a hover,  just can't figure out what it is that makes those contents hover!?  and how to replicate that for some new menu items?

[Pete T]

7 minutes ago, Steve Silver said:

I'm published, but still can't get the browse menu to stop being the default hover!  or see how to set up new hover items in a different menu 'hover' doesn't appear to be an option?  maybe if I create a new forum - then add that to a menu, will it then default to be a hover item under that menu?

ok sounds like the 'Browse' menu - is always the default - which displays it's contents as a hover first?  anyway to change that?
I can see that 'ACTIVITIES' - is also a hover,  just can't figure out what it is that makes those contents hover!?  and how to replicate that for some new menu items?

So browse as said has likely forums in correct ? if that case will be main item shows as active due to application default settings so better help you can i ask what trying to do and guide you correct way.

[Steve Silver]

I'm basically trying to set up some new menus that have hover options, (rather than a drop down click) e.g I'd like a menu title as a category to say 'Buy Sell'  and then under that would be hovers for all the sub forums,

[Pete T]

7 minutes ago, Steve Silver said:

I'm basically trying to set up some new menus that have hover options, (rather than a drop down click) e.g I'd like a menu title as a category to say 'Buy Sell'  and then under that would be hovers for all the sub forums,

This custom css will allow hover vs click menus

/* Primary navigation level */

.ipsNavBar_primary > ul > li.ipsNavBar_active > a {
    color: COLOR;
}

html[dir="ltr"] .ipsNavBar_primary > ul > li > a {
    margin-right: 4px;
    height: 48px;
}

.ipsNavBar_primary > ul > li > a {
    font-size: 16px;
    color: COLOR;
    padding: 15px 15px;
    border-radius: 1px 1px 0px 0px;
}

.ipsNavBar_primary > ul > li > a:hover {
    color: COLOR;
}

.ipsNavBar_primary {
    top: 0px;
    position: relative;
    padding-left: 15px;
    padding-bottom: 0px;
}

/* Secondary navigation level */

.ipsNavBar_secondary {
  background: COLOR;
}

.ipsNavBar_secondary > li.ipsNavBar_active a {
    font-weight: bold;
    color: COLOR;
}

.ipsNavBar_secondary > li > a:hover {
    color: COLOR;
}

html[dir="ltr"] ul.ipsNavBar_secondary > li, html[dir="rtl"] ul.ipsNavBar_secondary > li {
    float: none;
    display: block;
    border: transparent;
    border-top: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background: transparent;
}

.ipsNavBar_secondary > li > a {
    color: COLOR;
    font-size: 13px;
    padding: 12px 18px 8px;
    float: none;
    background-color: COLOR;
}

ul.ipsNavBar_secondary {
    top: 48px;
    left: initial;
    right: initial;
    min-width: 180px;
}

.ipsNavBar_primary > ul > li.ipsNavBar_active > ul.ipsNavBar_secondary, .ipsNavBar_primary:not( .ipsNavBar_noSubBars ) > ul:before {
    display: none;
}

.ipsNavBar_primary > ul > li.ipsNavBar_active:hover > ul.ipsNavBar_secondary {
    display: block;
}

html[dir="ltr"] ul.ipsNavBar_secondary > li > a {
    text-align: left;
}

html[dir="rtl"] ul.ipsNavBar_secondary > li > a {
    text-align: right;
}

where you see COLOR you will need tweak to your own style as for the menu having forum menu etc you would need make this yourself using menu system adding custom links and adding custom text.

[Steve Silver]

Fantastic, THANKS A LOT for that Pete T
so - I'd just copy and paste that into the custom css box in themes edit?  then match the colours to my existing menu theme colours,

CHEERS 

[Pete T]

1 minute ago, Steve Silver said:

Fantastic, THANKS A LOT for that Pete T
so - I'd just copy and paste that into the custom css box in themes edit?  then match the colours to my existing menu theme colours,

CHEERS 

Yeah so best copy and paste it into custom.css this because when any update done this or any custom stylesheets will not been updated so no code is lost etc, and where COLOR is match it with your theme if need find the color code use chrome or firefox inspect tool and provide you with the selected css code you need that displays color code.

[Steve Silver]

Thanks again Pete,  coincidently - I think I've also just discovered another way of achieving same Hover end results, totally by accident/trial! - If I have a menu set as a standard drop down, then create a category, use the category as a custom url which = the forum category,  everything that was once a drop down now appears as a hover menu instead, like magic! no code,  will see if it actually works! so far so good.