Back to Front End Portfolio

No JS Toggle Nav

An interesting task I had an idea for, was to try make a website pure css only. No javascript.

The first step was to develop a navbar.
The first difficulty was to make the dropdown work. Everybody has done this with checkboxes, etc.
My take on this was to use selectors for "Focus". If the element is focused, then the children are displayed.

The next issue was to make it "Toggle". So, it you click the anchor while it is open, it closes.
The solution I had for this was to add a hidden anchor. Height and Width the same as the sibling. On "Focus" of the main anchor, the "Phantom" anchor is shown overtop. This way, if you click the Phantom, the focus is taken away.

The final hurdle was to make it full-width. Of couse I could have written some janky Javascript, that would never work exactly right, but why sue that we the magic of Flexbox exists?

 

Click the link below to view the code in action.

See the Pen Pure CSS Toggle Navigation by Damian Small (@EffakT) on CodePen.