CSS Tabbed Arrows
Today I encountered an issue involving CSS tabs with tiny little arrow indicators which ‘indicate’ where you are at
. I’d like to say
Just like the one’s you see on the Yahoo Homepage
But what I’m really getting at is: exactly like them, except without the fuss of javascript. This would be truly a CSS Menu
.
Of course, without digging into the problem much deeper, I thought surely this would have already been posted on MaxDesign’s List-O-matic, but it wasn’t, and I was disappointed. Quickly I scoped out the Submit a List Link, and to my unfortunate hazzard, they stopped accepting entries. So voila, you’re getting mine straight from me.
Please see CSS Arrow Tabs.
July 7th, 2005 at 10:37 am
Semantically speaking, I don’t see the need to wrap the currently chosen item with an anchor since it should not be a clickable item.
In doing this, you are differentiating your active item from the other items since one can assume the list item without a child anchor is the currently active item. This allows you to style the list item as if it is the currently selected item, then apply styles to the child anchor of the list item to give styles to the selectable items.
Here’s an example of what I mean
In your example, the image extends out of the boundry of the list item (visually speaking) so I’m not sure if this approach works in that case.
Thoughts?
July 7th, 2005 at 10:53 am
Well, I think it’s a rare case where you need to disable the current page you’re on. As you can tell, I’ve done the same thing with my own website. If one is concerned on having the link be ‘not a link’ - perhaps <strong> - then so be it.
The fact of the matter remains the same. The goal was to show a list with an arrow head indicating that it is the current page. That’s more or less where I was getting at with this example.
Take a look at all the lists on the list-O-matic website and you’ll see they follow the same pattern.
Visually speaking. ‘Yes’ - the image is suppose to stick out - and that was the point. I’m not sure where you’re getting at?
July 7th, 2005 at 11:50 am
I’m saying my approach does not lend itself well to having the image extend out of the containing box, but your approach does.
I was trying to do this “tabbed” solution without the need to apply an ID (or class) to the active menu item, but there does not appear to be a way…at least not with CSS2.
I like the idea of using a strong (maybe an em is better) to wrap the active item instead of an anchor.
July 7th, 2005 at 11:55 am
> I think it’s a rare case where you need to disable the current page you’re on.
That is not a rare case, it is typical. Take Google’s navigation links for example, you cannot click on “Web” when you’re already there.
To me, providing a navigation link to the current page will only cause confusion.
July 7th, 2005 at 6:54 pm
hmm..
providing a link to the current page doesn’t seem all that bad. In this case of the arrow pulling down, it should be a good indicator that you’re on that page.
Not to cop out of making a good argument against it - but it doesn’t seem to be that imperative of an issue if you see folks like Zeldman, Molly, Mike Davidson, Jeff Croft, even the HCI duo at Ok-Cancel not taking your advice.
So with all due respect, I really don’t think it’s that big of a deal “Semantically Speaking.”
July 8th, 2005 at 3:01 pm
Yes there is no universal agreement on this, as you have shown.
Providing a link to the current page is easy to do and I think that is the main reason we see it on so many sites. Most CMS systems by default will wrap the currently selected menu item with an anchor, so to actually remove the link would involve a little bit of work.
Seeing that some big shots in the developer world do it is not reason enough for me to justify *why* it is done that way.
Is it a big deal? Absolutely not! I don’t know if semantics are ever considered a “big deal”. It just does not make sense to me and from a coding perspective, it is very easy to fix.
Say I walk into a bank and there is this rather noticable sign that says “If you’d like to enter the bank, walk out this door and then come back in”. That would be weird right?
By providing a link back to the current page, you are greatly increasing the chances of confusing your visitor. Confusing the visitor is undesirable, so why not eliminate these types of problems when they are noticed?
To me, it’s the little things we do that give the visitor the best experience they can have. Not providing a link to the current page is just one of those little things, I think there are hundreds similar issues that are equally important and easy to avoid/fix.
Just a little discussion between developers, no big deal :)
July 8th, 2005 at 3:23 pm
Boy. I logged into my control panel and found 12 comments from you.
Hehe. Not your fault. It’ my movableCheese.
Anyway, I think having the link isn’t much like explicitly saying “come back in again.” Although visually, I guess it does. It does make an assumption, but one that is taking very little risk.
In all contrasts, one could say it can be useful to re-load the current page. Instead of clicking the ‘refresh’ button and causing double-posting, one could just use the link. Likely? I don’t know, would be an interesting use-case. Most likely an edge-case.
Nevermind all the matter, it really just comes to preference. There’s no way of proving either one without conducting a survey.
And now, *wish me luck as I hit the post button*
August 26th, 2005 at 10:19 am
Justin, your splitting hairs. As long as the code is clean and works within the standard it is intended to.. thats all that matters. If his code is semantic but a little problem… I think really, there should be no complaints. I can understand people wanting to create accessible websites and such but I think you’re going too far by complaining about such a trivial thing.
August 26th, 2005 at 3:47 pm
Agreed, not the end of the world. But I understand Justin’s peeve. I share it.
Some systems make it easy to solve, some don’t. When left with no other choices, I just use CSS to make the “go-to-current-page” link look like it isn’t a link. I usually use the class or id that I made to visually distinguish “current-page” vs. “other-pages” and reset the attributes that encourage clickability.
It’s still clickable, but there’s no visual indicator that it would be. I know it’s very wrong of me, but I have often wished there was an “active=no” CSS attribute for A.
September 2nd, 2005 at 6:21 pm
You could in fact do that with JavaScript. Simply add the fake attribute and do what you will with it after the DOM has loaded.
Valid? I don’t know.
Clever? Yes.
November 3rd, 2005 at 8:40 pm
I think there are times when it’s nice to have a link to the current page. Any site that gets updated fairly often it can be a nice quick way to load new content. Either way it’s merely a preference thing.
November 30th, 2005 at 2:35 pm
just a little tip… it can be found on the net..
http://www.simplebits.com/bits/minitab_shapes.html
Njoy
November 30th, 2005 at 2:38 pm
Heidi,
good find. I must have missed that from Dan’s site.
February 1st, 2006 at 9:48 am
One thing I sometimes do (though obviously not on my blog site) is remove the hover effects for the “page you are currently on” link and also add “cursor: default”. This way, the “page you are currently on” doesn’t really look like a link, even though it is.
February 7th, 2006 at 11:43 am
I’m using a php include for a nav, but would like to disable the link for the page that user is on. I know there is a way to do it if there is php nav, whereby I can say something like if url=this page, link state is this. But I don’t want to redo the whole nav that way, and I am not capable of it anyway.
So far I’ve tried using a layer to place an arrow next to the link, and I suppose I could cover the whole link with one that shows a different state, but the cursor would still change when user hovers over the covered link. Is there a way to put some css code in the base page to say link is disabled to override the css class for that page? Something like if url=this page, override the link class, or replace with a class that shows the state as inactive?
Peter
April 11th, 2007 at 7:42 pm
But I noticed that Yahoo isn’t using this anymore. Do you know if that was a design decision or was there a useability issue?
April 12th, 2007 at 7:47 am
I like your work.
You are a good webmaster/designer :)
January 9th, 2008 at 9:31 am
Keeping a link to the current page, in my own opinion, is simply for aesthetics. If your design adjusts simply by the content of your navigation, ie. remove a link to the current page, it’s likely to confuse and frustrate your basic user.