Hi, I hope one of you bright people can tell me what I am missing to get this to work.
I am using Materialize in Site Designer 5 and have produced a navigation menu bar, for a site, with all but one of the links just going to a single fixed page...works ok.
One of the links (Photo Gallery ), I want to drop down to offer a selection of choices........I have created that, and it works ok if you click on it. However, I want it to open and drop down when the link is 'hovered'' over.
I understand form my searches that the attribute 'hover = true' needs to be implemented somehow, but although I have tried lots of ways, I can't seem to get that to work, so I must be doing something wrong. Can anyone tell me where and how I can do that?
Here is the menu, I made it into a component and inserted it into a blank project, so that I can attach it easily here, so it has no other pages.
Any help would be appreciated....thank you
Materialize drop down menu on hover....
Brian Johnson
Registered User
15 posts
Steve
Senior Advisor
3,086 posts
Hi Brian,
To be honest I would not do the hover option as your users will have difficulty on their mobile devices as there is no hover ability from phones or ipads.
I would keep it to click if you want every device to be able to use.
To be honest I would not do the hover option as your users will have difficulty on their mobile devices as there is no hover ability from phones or ipads.
I would keep it to click if you want every device to be able to use.
Taking over the world one website at a time!
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Brian Johnson
Registered User
15 posts
Thanks Steve,
I was going to leave it as either option for users, as I am sure it could be operated by either a hover or click, but I still don't know how to get it to do hover.
.... I did notice your site menu opens on hover..
I was going to leave it as either option for users, as I am sure it could be operated by either a hover or click, but I still don't know how to get it to do hover.
.... I did notice your site menu opens on hover..
noname
Registered User
60 posts
Hi Brian,
perhaps you find what you are looking for under the link to the SD-goodies in my profile. You may want to look at the sections “Mega Menus” and “Selectors and Hover”.
perhaps you find what you are looking for under the link to the SD-goodies in my profile. You may want to look at the sections “Mega Menus” and “Selectors and Hover”.
Brian Johnson
Registered User
15 posts
Thank you René,
That is more complicated than I need , but the principle is the same, however, I can't work out how you get the hover to actuate the dropdowns in Materialize which is what I need to find out.
That is more complicated than I need , but the principle is the same, however, I can't work out how you get the hover to actuate the dropdowns in Materialize which is what I need to find out.
noname
Registered User
60 posts
Brian,
I assume you have the zip-file “demoMegaMenu” downloaded and opened “demoBigMenuMaterialize.rsd” in Site Designer.
You will see a main menu with three items (Menu 1-3). Each of them is part of its own list-item with the class “mainmenu-item”.
In that list-item is also a container with the class “submenu-wrapper”. In that container you find the complete submenu.
When you look under “Resources” you find a file “style.css” in the css-folder.
There you find (around line number 9) the class “submenu-wrapper” again. Its setting “display: none;” makes the complete submenu invisible on loading of the html-page.
In the same file, around line number 61, you find the other important part. With the selector “.mainmenu-item:hover div.submenu-wrapper” the submenu is made visible by the setting “display: block;”
What does this selector do? When you hover a main menu item with the class “mainmenu-item” the display-setting of each element within that main menu item that has the class of “submenu-wrapper” is changed to “block”. But only a long as you hover it, else the standard setting of “display: none;” is activated again.
The framework Materialize comes with similar hover functionality:
In the documentation you find the “Floating Action Button” with several hover possibilities.
I assume you have the zip-file “demoMegaMenu” downloaded and opened “demoBigMenuMaterialize.rsd” in Site Designer.
You will see a main menu with three items (Menu 1-3). Each of them is part of its own list-item with the class “mainmenu-item”.
In that list-item is also a container with the class “submenu-wrapper”. In that container you find the complete submenu.
When you look under “Resources” you find a file “style.css” in the css-folder.
There you find (around line number 9) the class “submenu-wrapper” again. Its setting “display: none;” makes the complete submenu invisible on loading of the html-page.
In the same file, around line number 61, you find the other important part. With the selector “.mainmenu-item:hover div.submenu-wrapper” the submenu is made visible by the setting “display: block;”
What does this selector do? When you hover a main menu item with the class “mainmenu-item” the display-setting of each element within that main menu item that has the class of “submenu-wrapper” is changed to “block”. But only a long as you hover it, else the standard setting of “display: none;” is activated again.
The framework Materialize comes with similar hover functionality:
In the documentation you find the “Floating Action Button” with several hover possibilities.
Brian Johnson
Registered User
15 posts
Thank you Rene,
I worked through your example.
Then using your css file, simplified it vastly to just include the elements being used.
I renamed my elements to correspond with the css class names.
I made l this into a small css file , put it in resources and linked it in the <head> of the page.
Looking at the page source when previewed in a browser, I can the link is there.
I can still click and open the 'Photo Gallery' submenu, but I still can't get it to work on hover.
I can't see what I am doing wrong that is different to your menu operation...it is most frustrating.
This is the new demo file after I altered all the above..................I seem to have to Zip it to upload it as despite it being an .RSD file, I get the error "Your attachment must be one of: .TXT, .SNP, .ZIP, .RSD, .RLM, .RLMP, .RED, .GIF, .JPG, or .PNG format." unless I do...weird.
I worked through your example.
Then using your css file, simplified it vastly to just include the elements being used.
I renamed my elements to correspond with the css class names.
I made l this into a small css file , put it in resources and linked it in the <head> of the page.
Looking at the page source when previewed in a browser, I can the link is there.
I can still click and open the 'Photo Gallery' submenu, but I still can't get it to work on hover.
I can't see what I am doing wrong that is different to your menu operation...it is most frustrating.
This is the new demo file after I altered all the above..................I seem to have to Zip it to upload it as despite it being an .RSD file, I get the error "Your attachment must be one of: .TXT, .SNP, .ZIP, .RSD, .RLM, .RLMP, .RED, .GIF, .JPG, or .PNG format." unless I do...weird.
noname
Registered User
60 posts
Brian,
I've added a new list container to your file and pasted in your container with the .submenu-wrapper class.
In order for it to work I had to remove the ID # dropdown1 and the class .dropdown content, otherwise the materialize logic is interfering.
Note, that I'm working with (what SD is calling) a List Container and not as you do, with an Unordered List.
That makes it possible to put other elements into List Item.
I've added a new list container to your file and pasted in your container with the .submenu-wrapper class.
In order for it to work I had to remove the ID # dropdown1 and the class .dropdown content, otherwise the materialize logic is interfering.
Note, that I'm working with (what SD is calling) a List Container and not as you do, with an Unordered List.
That makes it possible to put other elements into List Item.
Brian Johnson
Registered User
15 posts
hi René.
Thank you for taking the time to modify the file.
I see what you have done, and I will now see if I can make my menu do the same.
I like to know 'how' things work rather than just pasting someone else's mark up in without knowing what it does, as otherwise I will never learn, so thank you for your patience.
Site Designer is supposed to be able to be used without knowing or having to write css code, but I fail to see where I could get it to produce this particular bit of ccs using any of the interface controls.
Thanks again
Thank you for taking the time to modify the file.
I see what you have done, and I will now see if I can make my menu do the same.
I like to know 'how' things work rather than just pasting someone else's mark up in without knowing what it does, as otherwise I will never learn, so thank you for your patience.
Site Designer is supposed to be able to be used without knowing or having to write css code, but I fail to see where I could get it to produce this particular bit of ccs using any of the interface controls.
Thanks again
noname
Registered User
60 posts
Brian Johnson wrote:
I like to know 'how' things work rather than just pasting someone else's mark up in without knowing what it does, as otherwise I will never learn, so thank you for your patience.
I like to know 'how' things work rather than just pasting someone else's mark up in without knowing what it does, as otherwise I will never learn, so thank you for your patience.
I like your attitude.
Brian Johnson wrote:
Site Designer is supposed to be able to be used without knowing or having to write css code, but I fail to see where I could get it to produce this particular bit of ccs using any of the interface controls.
Site Designer is supposed to be able to be used without knowing or having to write css code, but I fail to see where I could get it to produce this particular bit of ccs using any of the interface controls.
Here we reached the borders of what SD can do. The way SD treats CSS selectors and how it enables users to visually handle those in the most efficient and effective way is sub-optimal. Some things you have to code yourself.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
