Join 3,376 readers in helping fund MetaFilter (Hide)

Pure CSS Navigation
December 26, 2013 9:07 AM   Subscribe

I need a pure CSS navigation menu solution for a static, one page application, the simpler the better.

This is for a small, simple website with a left-hand navigation bar. It's a static site that will rarely be updated, but to simplify the site as much as possible I want it to be a single HTML file with no Javascript. That means switching content sections using CSS. I know this is possible, but trying to research it comes up with a lot of template websites and articles on how to do sliding transitions and the like. I want a no-frills solution.

If it matters, I don't care about supporting older versions of IE or older browsers in general. Mobile support is a must, however.
posted by jedicus to Computers & Internet (9 answers total) 3 users marked this as a favorite
I don't think you can do it. Pretty much every site that uses content switching in a single page will be using Javascript. Maybe only a couple of lines of the stuff, but Javascript nonetheless.

You may be able to hack it together using the hover state in CSS, or perhaps by scrolling a div up and down to different named anchors, but no-frills it isn't.

Is there any special reason why Javascript is ruled out?
posted by pipeski at 9:27 AM on December 26, 2013

I've boiled the method down to its pure form for you.

I do not approve.
posted by michaelh at 9:29 AM on December 26, 2013 [2 favorites]

I don't think you can do it.

I was thinking of something like this except without all the animation. It seems to be done without Javascript (certainly it works with Javascript disabled). But I don't actually understand how it works (my knowledge of CSS and Javascript are pretty limited at this point), so I can't readily simplify it to suit my needs.

Is there any special reason why Javascript is ruled out?

posted by jedicus at 1:40 PM on December 26, 2013

Since nobody have had answered your question, I might have misunderstood it but would something like this work?
posted by Ferrari328 at 2:47 PM on December 26, 2013

Well, it looks like you can do it!

On the whole, though, Javascript is going to be more appropriate for this task - it's what 99% of web developers would do. Doing this through pure CSS is kind of hack-y and requires a pretty advanced understanding of CSS (vs. a very basic understanding of Javascript). You'd probably want to check any CSS implementation on as many devices as possible.

If you throw in jQuery, you can show and hide elements with no trouble at all. At its simplest, you only need to use a snippet of script like '$("#element_id").show();' or '$("#element_id").hide();' to switch the visibility of a content container on and off. That's not too painful.

If laziness is the only obstacle, I'm happy to volunteer 10 minutes of my time to put together a quick page using jQuery for you...
posted by pipeski at 3:25 PM on December 26, 2013

I didn't realize you wanted to have hashtag links when I explained the method using inputs, but that makes sense. Here's the most basic implementation of the method using :target.
posted by michaelh at 3:41 PM on December 26, 2013

I went through and explained each CSS rule for you.
posted by michaelh at 3:54 PM on December 26, 2013

After a while of messing with it I realized that even if the CSS method worked it wouldn't be bookmarkable, which (I think) would also limit discoverability through search engines. I managed to get something more or less working using the jQuery hashtag plugin.

Thank you to michaelh for explaining the CSS approach and pipeski for helping convincing me that, while possible, it's not a good practice.
posted by jedicus at 5:55 PM on December 26, 2013

The :target method is also bookmarkable. It uses A elements, which are of interest to search engines, and clicking the link creates a history event and changes the URL. The correct content is visible when the URL with its corresponding hashtag is visited. The older method that uses hidden checkboxes isn't bookmarkable, though, and relies on label elements which aren't of interest to search engines.
posted by michaelh at 7:00 PM on December 26, 2013 [1 favorite]

« Older I am looking for a smartphone,...   |  What interesting (food) things... Newer »

You are not logged in, either login or create an account to post comments