Help me with Dropdown menu

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
Mannix_
Registered User
Posts: 148
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Help me with Dropdown menu

Post by Mannix_ » Sat Sep 23, 2017 4:13 pm

Hello everyone,
I'm working on customizing my style and thought about changing the way you access the dropdown menus Display and sorting options for example. Right now to access it you need to click on the button but I would want to change that to just hovering over the button and the menu would drop down. The same way it's done with the extra navbar About, Downloads etc here on this page. How you would go about that because I'm not that experienced with css to accomplish that please help
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

User avatar
pit-PL
Registered User
Posts: 3055
Joined: Sat Nov 21, 2009 12:24 pm

Re: Help me with Dropdown menu

Post by pit-PL » Thu Sep 28, 2017 2:37 pm

Try

Code: Select all

.sort-tools:hover .dropdown {
	display: block;
}

User avatar
Mannix_
Registered User
Posts: 148
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Help me with Dropdown menu

Post by Mannix_ » Thu Sep 28, 2017 3:09 pm

pit-PL wrote:
Thu Sep 28, 2017 2:37 pm
Try

Code: Select all

.sort-tools:hover .dropdown {
	display: block;
}
OMG it works I can't believe it was that simple. Thank you very much for your assistance once again Pit :D
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

jibranseo
Registered User
Posts: 3
Joined: Tue Jul 30, 2013 12:32 am
Location: Karachi, Pakistan
Name: JIBRAN AHMED
Contact:

Re: Help me with Dropdown menu

Post by jibranseo » Sat Sep 30, 2017 5:54 pm

is your problem solve ?

User avatar
Mannix_
Registered User
Posts: 148
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Help me with Dropdown menu

Post by Mannix_ » Sat Sep 30, 2017 6:10 pm

jibranseo wrote:
Sat Sep 30, 2017 5:54 pm
is your problem solve ?
Yes but I need to figure out how to prevent the buttons from being clickable. Right now if you click on the button that has the hover option it breaks that option and it stays open and keep them being clickable on mobile view, also today I discovered if i change the trigger-dropdown click function in the forum_fn.js to false all the dropdown menus drop down on hover but the click "bug" still exists.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 547
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Help me with Dropdown menu

Post by Hanakin » Sun Oct 01, 2017 2:10 pm

pit-PL wrote:
Thu Sep 28, 2017 2:37 pm
Try

Code: Select all

.sort-tools:hover .dropdown {
	display: block;
}
try adding focus as well

Code: Select all

.sort-tools:hover .dropdown,
.sort-tools:focus .dropdown {
	display: block;
}
not sure if this will work but generally with dropdowns you add a hover/focus to the containers. Not sure exactly what your issue is without seeing it. You also need them to work on mobile/tablet devices so a click needs to be accounted for which is usually done via js.

https://codepen.io/lawnch/pen/QbKzRX

User avatar
Mannix_
Registered User
Posts: 148
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Help me with Dropdown menu

Post by Mannix_ » Sun Oct 01, 2017 6:17 pm

Hanakin wrote:
Sun Oct 01, 2017 2:10 pm
pit-PL wrote:
Thu Sep 28, 2017 2:37 pm
Try

Code: Select all

.sort-tools:hover .dropdown {
	display: block;
}
try adding focus as well

Code: Select all

.sort-tools:hover .dropdown,
.sort-tools:focus .dropdown {
	display: block;
}
not sure if this will work but generally with dropdowns you add a hover/focus to the containers. Not sure exactly what your issue is without seeing it. You also need them to work on mobile/tablet devices so a click needs to be accounted for which is usually done via js.

https://codepen.io/lawnch/pen/QbKzRX
Ok Let me show you what I want to achieve. By going to this link http://mannixboard.5v.pl/viewforum.php?f=2 you will be able to see the sort-tools button for my style and what I want is to make it dropdown the content of it by hover over it. As for right know the look of that button isn't intuitive enough (imo) as that's the case for the standard look of the button for prosilver style (the arrow pointing down). So I thought that I could make the content of the button to show up when you hover over it and Pit pointed me in the right direction with the edit he suggested but I've spotted a problem when you "accidentally" press the button the content appear and then when you try hide it back by click it again it "breaks" the button because if you click somewhere else on the empty space it pops up back again and you can't hide it. So I would need to somehow disable the option to click on it so only hover option would work but that would only have to apply to the desktop view as mobile is forced to be click only so I guess you would have to make two sets of the buttons with different option for them one for desktop with only hover and mobile with click only. I don't know if that's possible and that's why I ask for your help. If the procedure will bee too complicated I would have to settle to leave it as it is and forget about the hover option.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 547
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Help me with Dropdown menu

Post by Hanakin » Sun Oct 01, 2017 10:59 pm

as i said its a js issue the fact that the current way dropdowns are handled is very bad practice and self coded rather than by using a third party plugin which is the proper way. you need to rename the classes for the entire object to break the js.

User avatar
Mannix_
Registered User
Posts: 148
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Help me with Dropdown menu

Post by Mannix_ » Mon Oct 02, 2017 11:39 am

Hanakin wrote:
Sun Oct 01, 2017 10:59 pm
as i said its a js issue the fact that the current way dropdowns are handled is very bad practice and self coded rather than by using a third party plugin which is the proper way. you need to rename the classes for the entire object to break the js.
Ok thanks for clarification. After thinking about it I've added the down arrow as in prosilver and adjusted the look of it in css and I'm quite happy with the result. Thanks for all the help guys again :D
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

Post Reply

Return to “[3.2.x] Styles Support & Discussion”

Who is online

Users browsing this forum: Witter and 3 guests

cron