CSS responsive sidebar menu
Hello, does anyone know how to create a sidebar menu like this: https://medicine.duke.edu/divisions/cardiology/about/leadership where parent link is clickable and the carrot expands menu? I would like to do it with css only.
Leadership | Duke Department of Medicine
Manesh Patel, MD Chief, Division of Cardiology Christy P. Johnson Division Chief's Assistant E-mail: christy.p.johnson@duke.edu Phone: 919-681-4441 Andrew Wang, MD Vice Chief of Clinical Services Anita Kelsey, MD, MBA Vice Chief for Noninvasive Imaging
20 Replies
https://codepen.io/z-/pen/qBJoYyO/9feb3164c119f344dad91f8d61eb52fb this would be a CSS only way without using
:has (it would be simpler with that but FF still doesn't support it without flags)
Or https://codepen.io/z-/pen/oNaqyXB/eac24c10daed2a486db8c681e8092455
Just depends on how you want things laid out html-wise (both pens have identical visual results) whether you want the stacked containers together or make it look like they're together
Once :has has more support you could take the first but move the dropdown to a sibling of .nav_list which would provide better formatting opportunitiesDo you have an example where the menu would expand by clicking only and not hover?
I don't think that's good UX to do it that way and I can't think of a good way to make it close afterwards CSS only. The nav links could be details or checkboxes and you use that rather than hover, but you then need to allow the user to both click the link (needing a double click) but also now a way to close it. It's entirely possible but I would recommend against it
gotcha so for that I would need to use javascript?
You can do it CSS only, just that what you've described (essentially what I've made but clicking rather than hovering to see the extra container) sounds like a flawed idea and it's not something that should be made
I thought you wanted the link also clickable as shown in the first website you linked
A thing to note about this is that it will block clicks for other things once to close it, so if you have a button then you may end up clicking that twice. However links can be raised to above the blocker if you're leaving the page as it doesn't matter to close it before leaving
If your website's only interactive elements are links then that's fine. But if you have any buttons or another one of these dropdowns there will be issues
Yeah I see what you are saying now. Your first example the first link is clickable and everything else expands on hover. Is that correct?
All links can be clicked but hovering presents more options (it can contain more links, I just put in random text)
so how would that work/look on mobile? Clicking would expand the other content inside link?
You'd replace the nav menu to probably an accordion. You can use
<details> for itThank you for all this info it has been very helpful. Do you have any thoughts if a menu should be css only or use a combination of css and js?
Honestly, JS because you can make it accessible and that's more important than CSS-only gimmicks (although I do love my CSS-only gimmicks that replace JavaScript https://codepen.io/z-/pen/LYPqaME https://codepen.io/z-/pen/jOeZbNy https://codepen.io/z-/details/abqEgpq https://codepen.io/z-/pen/GRgZExW)
very cool stuff. Do you have any codepen examples of the type of menu I'm looking for with css and javascript?
I don't and I'm about to make myself dinner, but I can make a simple example after if you need
Yes that would be great if you could. After dinner of course lol.
Although I know Kevin has done something similar (visually it's different but the principle is the same). All of the important stuff about opening a container can be copied over
I'll find the video
Kevin Powell
YouTube
Build a responsive, animated, accessible accordion that looks prett...
Accordions are a pretty common thing that we find on websites these days, but they’re often… a little bit lacking, either with awkward animations, or a complete lack of animations, and sometimes just looking pretty ugly.
I recently came across an awesome codepen by Zed Dash that looked fantastic, and I thought it would be the perfect starting p...
I remember it, for reasons
Thanks I will give it a watch,