Menu drop down customisation - meganav style (done)
rht
Registered Users Posts: 41 Big grins
I have been hurriedly doing a restyle of my old site: https://reheatimages.smugmug.com/
It was very out of date. I'm still working on mobile and tablet size adjustments for some things (especially the hero-banner/carousel which I modified massively).
What I'm next wanting to do is restyle the navigation dropdowns to be more of a meganav style so they cover the same 80% width as the navigation block and have the navigation links presented in a tidy table arrangement rather than a very long vertical list.
Is there any documentation on what navigation system is used and the various CSS classes available? I figured I could probably use something like flex-box to get the drop down menu links presented how I want but it's not obvious how to adjust the positioning of the navigation dropdown, particularly not the offset from the main navigation buttons.
Torn between cycling and photography!
Comments
There is no documentation on the CSS classes. Your best bet is to use a tool like Firefox Web Developer to see the CSS.
There are some customizations available that were created by other SmugMug users. Here are links to some of them:
https://www.aaronmphotography.com/Customizations
https://portal.photom.me/category/customization/
https://gallery.imagesinthebackcountry.com/Smugmug-customization
Musings & ramblings at https://denisegoldberg.blogspot.com
Thanks. All the mods I did already were from using the code inspector in Firefox/Chrome and also digging into the Smugmug CSS which you can get via the same tools.
I did some digging and found this: https://clarle.github.io/yui3/yui/docs/node-menunav/
It might be helpful - it appears to be related.
Torn between cycling and photography!
That code requires Javascript to work and SmugMug doesn't allow it.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
If you look carefully in Smugmug, that appears to be the navigation framework they are using in their component. Compare the CSS of both.
From my comparisons it appears to be very similar so that might help with learning more about how further the navigation can be customised.
Torn between cycling and photography!
SmugMug can use JavaScript internally but as users, as @Hikin' Mike noted above - we can't add or change JavaScript on our sites.
Musings & ramblings at https://denisegoldberg.blogspot.com
I am not talking about the javascript - what I am trying (with a lot of frustration) to get across is that appears to be the same framework and by looking into that we might find more ways we can modify the navigation that Smugmug already has (by studying the CSS and the structure as documented).
To make it more clear:
Torn between cycling and photography!
Right, so here is the result thus far:
https://reheatimages.smugmug.com/
.horizontal .yui3-menu-open{
left:0 !important;
width:100%;
position:absolute;
z-index:8;
}
.yui3-menu > .yui3-menu-children {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2em;
justify-content:flex-start;
width: 100% !important;
padding:1em 1em 1em 0.5em;
background-color:#fff !important;
}
.yui3-menu > .yui3-menu-children li{
display:inline-block;
flex: 0 30%;
}
In the navigation I am pinning the .yui3-menu-open to the .horizontal.
.yui3-menu-open is set to position absolute and the .horizontal has a position:relative set on it - it is the container.
.yui3-menu > .yui3-menu-children is set to use CSS flexbox and the order of the items is set to row, which is also set to wrap. A gap of 2em is set and we justify the content to the flex-start (left). It's also possible to have the menu-items stretch if there are less than 3 but it can look unusual in this style of menu layout.
.yui3-menu > .yui3-menu-children li is giving us menu items set to 30% width.
Torn between cycling and photography!
Okay, I have it working:
https://reheatimages.smugmug.com/
`
.sm-page-widget-nav-popover .horizontal{
position:relative;
}
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu {
padding-top: 1em;
background-color: transparent;
}
.horizontal .yui3-menu-open{
left:0 !important;
width:100%;
position:absolute;
z-index:8;
}
.yui3-menu > .yui3-menu-children {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2em;
justify-content:flex-start;
width: 100% !important;
padding:1em 1em 1em 0.5em;
background-color:#fff !important;
}
.yui3-menu > .yui3-menu-children li{
display:inline-block;
flex: 0 0 0 30%;
width: 30%;
}
`
This is using CSS flex box to handle all the arrangement of the menu links. The drop down is set to be a child of the horizontal element.
I will put a page up on my site detailing how this works. You need to understand well to make it work and you may also need to make some media queries to fine tune to smaller screen sizes.
I have added this guide to my site:
https://reheatimages.smugmug.com/About-us/Smugmug-customisation/Mega-nav
Torn between cycling and photography!