How to create dropdown menu in sidebar


#1

Hi using Blackburn theme and trying to create dropdown menu in sidebar. this is my config file:

languageCode = "en-us"
title = "Reiki for Peace                يكي للسلام"
theme = "blackburn"

[menu]
  # Shown in the side menu.
  [[menu.main]]
    name = "Mission Statement"
    pre = "<i class='fa fa-fw'></i>"
    weight = 1
    url = "/mission-statement/"

[[menu.main]]
    Name = "What is Reiki"
    identifier = "whatisreiki"
    URL = "/#/"
    Weight = 1.0  
  
  [[menu.main]]
    name = "Reiki"
    parent = "whatisreiki"
    pre = "<i class='fa fa-fw'></i>"
    url = "/reiki/"
    weight = 1.1  

   [[menu.main]]
    name = "How Reiki Works"
    parent = "whatisreiki"
    pre = "<i class='fa fa-fw'></i>"
    url = "/how-reiki-works/"
    weight = 1.2  

  [[menu.main]]
    name = "How to get Reiki"
    parent = "whatisreiki"
    pre = "<i class='fa fa-fw'></i>"
    url = "/how-to-get-reiki/"
    weight = 1.3  

  [[menu.main]]
    name = "A First Degree Reiki Course"
    parent = "whatisreiki"
    pre = "<i class='fa fa-fw'></i>"
    url = "/first-degree-reiki-course/"
    weight = 1.4 

front matter of each md is

+++
title = "Page Title"
menu = "mainmenu"
+++

All that appears in the sidebar is
Mission Statment - which displays the md page when clicked - and
What is Reiki > which does nothing except add a # to the url

What else do I need to do to create a dropdown menu?

Thanks for any help
David


#2

Please read Requesting Help and edit your post to include more information, so folks can easily reproduce what you have so far.

What is a “dropdown menu”?


#3

Hi Maiki, Sorry, written in desperation at 3 in the morning when nothing’s working,
I’m using the Blackburn theme, trying to create a nested tree structure of pages in the sidebar like so:

|—A ▼
|—B ▼
|—C ▲
… |----D ▲
… … …page1
… … … page2
… … … page3
… … … …|----E ▲
… … … … … page4

Not sure if its a menu or a toc - or even possible - but I just need (detailed) advice on how to do this. I try to Google this stuff, but it’s difficult to find the whole story in one place.

Thanks for any help
David


#4

HI

I already test the theme and add some submenu. The menu template is fine and hugo render the submenu (you can check it by viewing the source code in the browser)

The problem is on CSS or maybe Javascipt not working for the submenu I suggest you to contact the author


#5

Hi Yudy, Thanks for this - are you referring to the Blackburn theme on github?
I can’t test it 'cause I don’t know how to, so I don’t know if the problem’s mine or the theme.
For instance something very basic which I don’t know - and found no reference to - is do I need to setup my pages in a directory structure that reflects the menu/toc/tree structure I want to display or can I store all my pages in the content directory - without any sub-directories. Where do I write the structure in the config file or in the front matter of each md file? What Partials do I need? What is the content of these Partials? Where do I include them? Is all this documented in one place?
Sorry for all the questions - just trying to make sense of it all.

Thanks
David


#6

Yes I’m reffering the Blackburn theme on GH and I’m using Your menu configuration for the test

My answer is only base on assumption. in this case It will be hard find the real answer if you did not include a complete information or your project repo, that’s why @maiki ask you to read Requesting Help

This probably caused by the CSS (overflow: hidden or else) so you cant see anything when you click the parent menu

this can be a clue (again only base on assumption)


https://purecss.io/menus/#vertical-menu-with-submenus

For better answer consider to contact the theme’s author


#7

Hi Yudy, Thanks for clarifying, and testing - I’m working on it - let you know on progress or not.


#8

Hi Yudy, and anyone else having a problem with vertical menus in the Blackburn theme.
I did contact the author, he says:

I haven’t managed to get this to work at my end either, I’m afraid. Perhaps you can compare how your rendered page differ from this page?

https://purecss.io/menus/#vertical-menu-with-submenus

So the solution for me was to look for another theme