If you visit the above link and make your browser 480px or less, you will see the mobile navigation I have designed. However, I have yet to figure out a way to have the children navigation links display.
Ideally, I would like to be able to click on a parent element and have the child elements slide into place, pushing the other parent elements downward – however, I’m assuming that way be rather complicated.
Another idea was to have the children elements only appear in the navigation when you are on a parent page that has children links. For example, if you clicked the “Services” page, once that paged loaded the navigation would now include all of the parent elements as well as the child elements of services. You can see an example of this at RedManPowerChair.com.
Suggestions and thoughts on how to implement the code? I would put the code into CodePen, but because the links are dynamic, things get a bit busy.