Multi-column navigation dropdown

解決
Highlighted
新規投稿者

  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 いいね!
2件の承認済みベストアンサー

受理された解決策
Highlighted
名誉アドバイザー | Solutions Partner

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

- Jonathan Sumner
返信
0 いいね!
Highlighted
名誉アドバイザー | Solutions Partner

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

- Jonathan Sumner
返信
0 いいね!
3件の返信
Highlighted
名誉アドバイザー | Solutions Partner

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

- Jonathan Sumner
返信
0 いいね!
Highlighted
新規投稿者

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 いいね!
Highlighted
名誉アドバイザー | Solutions Partner

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

- Jonathan Sumner
返信
0 いいね!