I can't get multi-level navigation in my first real project to work

So I’ve just started my first real project so that I have something fun to constantly work on while learning, I’ve also read a lot that the best way to learn is by actually building stuff so I’m giving it a go. For this project I’ve decided to build a ‘web journal’ which will pretty much be a normal journal only built using html, css and javascript. I’ll make tweaks to it over time and add journal entries, goals, links to other projects, etc.

Right now i’m trying to add another level to my vertical navigation which is opened by clicking a button. I want the second level to start from the “contents” list item and open up to the right of it. No matter what I try though I can’t get the navigation to show on the right of that item. Once i can at least get it to show in the right position I’ll add some css to make it hidden until the contents item is hovered.

The closest I got to making this work was after removing “overflow-x: hidden” from the side-nav css but that caused issues with position of the button used to close the nav menu.

Here is my project on codepen where I make my updates before updating the master files on my computer.


edit: I’d also like the read more button to be hidden when the side navigation is visible and reappear when the side navigation is closed. I’ve tried this by adding a few different functions in the open and close functions for the side-nav but nothing seems to work, any advise in this too?

Unless I just missed it, I can not find any code to display the sub navigation to the right of an list item via a mouseover or click event handler. If you have some code, update your project, so we can take a look and offer suggestions. Also, I recommend creating a script.js file to hold all of the your JavaScript and then link it into your html code at the bottom of your body section.

You have error in the console when clicking on the Read more button, because getElementByClassName is not a valid method for the document. Since your html does not actually have a button element, why not use document.querySelector(’.button’) to select the anchor element with class=“button”?

I’m trying to just get the sub nav to appear to the right of the ‘content’ list item first and I was thinking I would then just put the display of that code to hidden, and add a function to change it to visible. So I haven’t added the JavaScript to make it appear yet because I’m still trying to figure how to put it where I want it.