Menu drop down customisation - meganav style (done)

rht

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.

denisegoldberg

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

rht

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.

Hikin' Mike

@rht said:
I did some digging and found this: https://clarle.github.io/yui3/yui/docs/node-menunav/

That code requires Javascript to work and SmugMug doesn't allow it.

rht

@Hikin' Mike said:

@rht said:
I did some digging and found this: https://clarle.github.io/yui3/yui/docs/node-menunav/

That code requires Javascript to work and SmugMug doesn't allow it.

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.

denisegoldberg

@rht said:
If you look carefully in Smugmug, that appears to be the navigation framework they are using in their component. Compare the CSS of both.

SmugMug can use JavaScript internally but as users, as @Hikin' Mike noted above - we can't add or change JavaScript on our sites.

rht

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:

1. the documented framework
2. looks to be the same as what Smugmug is using
3. and by comparing the two
4. we might be able to learn some more customisation options
5. for the out of box Smugmug navigation

rht

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.

rht

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