Can responsive menu with only CSS and HTML be done?

I have seen CSS/HTML only menus, but one thing to consider is the separation of concerns. The semantic web tries to separate data markup, presentation and interactivity. In general, HTML is the markup, presentation is handled by CSS and interactivity is handled by JavaScript. If you get to crafty, you can end up blurring the lines.

Obviously, the lines aren't required, but we're finally getting away from the web where everything was jumbled together (think table for layouts!). Obviously, I'm sure there are simple, elegant menus done in CSS/HTML that are perfectly semantic, but if you try to make some really advanced menus, cutting out JS might be possible, but it might make your code unnecessarily complicated, it might introduce browser incompatibility or at the very least, it might make your code hard to understand.

Check this site I just created, the menu changes simply by using block > inline-block etc, the idea was to give a bigger button area on mobile devices while using just html, css; so no hamburger menu. Resize the web page to see it in action. It is basic, however it works. Let me know what you think of it and could send you the code or any extra help you need. Although some of the site is not finished, just doing some testing modification over next day or two.

www.hartebeauty.co.uk

:)

Perfect, that was exactly what i had in mind!

If you could send me the code so i can play around with it that would be great :)

You could make two menus and show/hide using media queries. You can also use the CSS pseudo class :focus to trigger a collapsed menu to open if the menu is a child or sibling of the element that triggers the opening.

Here's one option http://medialoot.com/preview/css-only-navigation-menu/index.html. I'm not a fan of the submenus showing on hover when in the mobile version.