CMS Development

SonjaElena
Participant

Sidebar Menu with parent and child elements

Hi!

 

I want to create a page with a sidebar menu. Creating the menu worked fine, but now I'm having trouble adjusting the settings for the advanced menu.

 

This is what I have so far:

http://gramm-medical-6269990.hs-sites.com/de/augenspuelungen

 

As you can see, all the child elements are showing, which is really chaotic and makes the menu unbearably long.

 

I would like it to work this way:

The menu only shows the parent elements, so: Erste Hilfe, Augenspülungen, Pflaster, Verbandstoffe and Rettung+Medizintechnik. As soon as the user clicks on "Erste Hilfe" (for example), the parent "Erste Hilfe" will expand to show the child elements belonging to it. E.g. "Verbandkoffer, Branchenkoffer, etc."

 

What I've tried so far:

Okay, so I thought I could get this to work using the Advanced Menu settings in the Design Manager. But no matter if I choose "static menu", "dynamic by section" or "dynamic by page" - it keeps messing up.

 

Static Menu:

static-menu.JPG

 

Dynamic by Section:

dynamic-by-section.JPG

 

Dynamic by Page:

dynamic-by-page.JPG

 

None of the above advanced menu settings is doing what I want it to do... Does anyone have an idea how I can get this to work?

 

Oh and maybe worth mentioning: We do have a normal menu on the top of the page - this sidebar menu would be used on our product pages provide a separate menu to navigate in between product categories.

 

Thanks in advance! 🙂

0 Upvotes
3 Replies 3
Venki
Contributor

Sidebar Menu with parent and child elements

All the best Sonja!
Happy Coding!

0 Upvotes
SonjaElena
Participant

Sidebar Menu with parent and child elements

Hi Venki,

 

thanks for the detailed reply!

 

I want the child elements to be displayed permanently when the user clicks on the parent element. Not as a dropdown, but more like an accordion element. Click on the parent element unfolds the child elements beneath. The problem with dropdown on hover or click ist that the child elements would cover the other menu elements and would disappear when the cursor ist moved or the user clicks elsewhere on the page.

 

Here is an example of a different page that employs such a sidebar menu: https://www.plum-deutschland.de/produkte/erste-hilfe

The child elements of the active parent are displayed beneath the parent. I'd like it to look like that...

 

I'm starting to think that the amount of time/work it would take to create this kind of menu isn't worth it.. 😄 I'll be pitching a different menu solution tomorrow - if that gets accepted I won't have to deal with the whole menu hassle at all 😄

0 Upvotes
Venki
Contributor

Sidebar Menu with parent and child elements

Hi Sonja,

Seems like you want to display child elements when you hover on the main menu.
I can suggest a way and let me know if it works for you.

Refer this. I edited the existing coding suiting your requirement.

https://www.w3schools.com/code/tryit.asp?filename=GJES3Z9QNC65

 

Output:Untitled.png
My Solution

Locate the template and create a custom coded navigation menu.
This will help you but you must know how to add the coding in the template.
Hope you can do it. 🙂

Locate the class or create your own class and add css styling and html.

You can add  CSS and HTML on the template page like this, 

or u can create a external style and link it to the current page.

 

CSS Coding

<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

</style>


HTML Coding
<div class="dropdown">
<button class="dropbtn">Erste Hilfe</button>
<div class="dropdown-content">
<a href="#">VERBANDKOFFER</a>
<a href="#">BRANCHENKOFFER</a>
<a href="#">VERBANDSCHRÄNKE</a>
<a href="#">NOTFALLAUSRÜSTUNG</a>
<a href="#">SCHILDER</a>
</div>
</div>
<br>
<br>
<div class="dropdown">
<button class="dropbtn">AUGENSPÜLUNGEN</button>
<div class="dropdown-content">
<a href="#">AUGENSPÜLFLASCHEN</a>
<a href="#">AUGENSPÜLSTATIONEN/a>
<a href="#">TWIN AUGENSPÜLFLASCHEN</a>
</div>
</div>

This is just a reference for you, you can customize it based on your reference.

Note: If you want to display dropdown menu based on a button click refer this:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown
Needs Javascript coding for button click event.

Let me know how it went!