CMS Development

sarahbaker
Membre

Multi-column navigation dropdown

Résolue

  Hi all–

Our team wants to modify our website's navigation to have a multi-column layout, like Hubspot itself uses (example attached). I'm not sure how this would work in terms of interacting with the Menu Tree on Hubspot. I'm thinking we'll need to hire this out, and just wanted to inquire to get a general feel for the scope of this project, or if it's even possible. We'd need the final effect to still be editable, as we're always adding new links, etc.


Any info is appreciated! Thank you

 

ExampleExample

 

 

 

 

0 Votes
2 Solutions acceptées
Jsum
Solution
Conseiller clé

Multi-column navigation dropdown

Résolue

@sarahbaker,

 

You have 2 pretty simple options:

 

1. Use one advanced menu - Your example shows 3 menus but it could very possibly be just one. When you have multi-level menus what you actually have is nested <ul> elements. That looks like this:

<ul>
    <li><a href=#">level 1 item</a>
        <ul>
            <li><a href="#">level 2 item</a></li>
        </ul>
    </li>
</ul>

So you can consider the section heades in your example the level 1 items, and the menus below them to be the level 2 items. All you need to do is style them this way.


Example:

ul {
    /*Level 1 unordered list styling */
}

ul > li {
    /*Level 1 list item styling */
} 

ul > li a {
    /*Level 1 link styling */
}

ul li ul  {
   /* level 2 unordered list styling */
}

ul li ul li  {
   /* level 2 list item styling */
}

ul li ul li a {
   /* level 2 link styling */
}

 

2. Use h4 header modules for your list titles and create an advanced menu for each section. Easier to set up, a little boring and uninspired, and involves more advanced menus (i.e. Footer Menu 1, Footer Menu 2, Footer Menu 3) in your advanced menu section. but you could set this up your self for sure and possible style it depending on your knowledge of css and the use of the browser console (ctrl or cmd + shift + i).

Voir la solution dans l'envoi d'origine

0 Votes
Jsum
Solution
Conseiller clé

Multi-column navigation dropdown

Résolue

@sarahbaker,

 

You don't have to have the second tier items flyout, they can be static. In fact, for your footer I would suggest static placement.

 

Either way, when styling Hubspot generated menus you will find some key classes within the structure (view the source code or check in the element inspector). You can target these classes to make the magic happen.

 

as an example, list items with a sub menu have a class that is something like ".has-children" (not exactly this but similar) so it would look like this:

<ul>
    <li class="has-children">
        <ul>
            <li></li>
        </ul>
    </li>
    <li></li>
</ul>

so you could target the sub menu like:

li.has-children ul {

}

li.has-children:hover ul {

}

li.has-children ul li {

}

Check check out the source code for the classes.

 

Just a note, having the menu titles as first tier menu items is actually the more complicated option. not only will you need to figure out have to display the menu to look like your example but you will have to reverse hubspots default second tier styling from positions to hover effects if you are using Hubspots default stylesheets. It's my favorite option but not the easiest. If you want easy just go with the option of create an advanced menu for each section.

Voir la solution dans l'envoi d'origine

0 Votes
3 Réponses
Jsum
Solution
Conseiller clé

Multi-column navigation dropdown

Résolue

@sarahbaker,

 

You have 2 pretty simple options:

 

1. Use one advanced menu - Your example shows 3 menus but it could very possibly be just one. When you have multi-level menus what you actually have is nested <ul> elements. That looks like this:

<ul>
    <li><a href=#">level 1 item</a>
        <ul>
            <li><a href="#">level 2 item</a></li>
        </ul>
    </li>
</ul>

So you can consider the section heades in your example the level 1 items, and the menus below them to be the level 2 items. All you need to do is style them this way.


Example:

ul {
    /*Level 1 unordered list styling */
}

ul > li {
    /*Level 1 list item styling */
} 

ul > li a {
    /*Level 1 link styling */
}

ul li ul  {
   /* level 2 unordered list styling */
}

ul li ul li  {
   /* level 2 list item styling */
}

ul li ul li a {
   /* level 2 link styling */
}

 

2. Use h4 header modules for your list titles and create an advanced menu for each section. Easier to set up, a little boring and uninspired, and involves more advanced menus (i.e. Footer Menu 1, Footer Menu 2, Footer Menu 3) in your advanced menu section. but you could set this up your self for sure and possible style it depending on your knowledge of css and the use of the browser console (ctrl or cmd + shift + i).

0 Votes
sarahbaker
Membre

Multi-column navigation dropdown

Résolue

Hi there,

Thank you for the response! I think I'm understanding – I just need a little help clarifying the dropdown/flyaway treatment . In the Hubspot example I attached, the column-style menu drops down when you hover over the first-level menu items. If I use the simpler method of using H4 headers as the first-level menu items, how can I have the advanced menu apear when I hover over the H4 headers? 

Hope I explained that right.... Thank you!

 

 

0 Votes
Jsum
Solution
Conseiller clé

Multi-column navigation dropdown

Résolue

@sarahbaker,

 

You don't have to have the second tier items flyout, they can be static. In fact, for your footer I would suggest static placement.

 

Either way, when styling Hubspot generated menus you will find some key classes within the structure (view the source code or check in the element inspector). You can target these classes to make the magic happen.

 

as an example, list items with a sub menu have a class that is something like ".has-children" (not exactly this but similar) so it would look like this:

<ul>
    <li class="has-children">
        <ul>
            <li></li>
        </ul>
    </li>
    <li></li>
</ul>

so you could target the sub menu like:

li.has-children ul {

}

li.has-children:hover ul {

}

li.has-children ul li {

}

Check check out the source code for the classes.

 

Just a note, having the menu titles as first tier menu items is actually the more complicated option. not only will you need to figure out have to display the menu to look like your example but you will have to reverse hubspots default second tier styling from positions to hover effects if you are using Hubspots default stylesheets. It's my favorite option but not the easiest. If you want easy just go with the option of create an advanced menu for each section.

0 Votes