Menu drop down customisation - meganav style (done)

rhtrht Registered Users Posts: 44 Big grins
edited April 6, 2024 in SmugMug Customization

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.

w: Reheat Images
Torn between cycling and photography!

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,382 moderator

    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

  • rhtrht Registered Users Posts: 44 Big grins
    edited April 3, 2024

    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.

    w: Reheat Images
    Torn between cycling and photography!
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
  • rhtrht Registered Users Posts: 44 Big grins

    @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.

    w: Reheat Images
    Torn between cycling and photography!
  • denisegoldbergdenisegoldberg Administrators Posts: 14,382 moderator
    edited April 5, 2024

    @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.

  • rhtrht Registered Users Posts: 44 Big grins
    edited April 6, 2024

    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
    w: Reheat Images
    Torn between cycling and photography!
  • rhtrht Registered Users Posts: 44 Big grins

    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.

    w: Reheat Images
    Torn between cycling and photography!
  • rhtrht Registered Users Posts: 44 Big grins
    edited April 27, 2024

    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

    w: Reheat Images
    Torn between cycling and photography!
Sign In or Register to comment.