Question

I’m pretty new to wordpress, html, css, and javascript and would love your help if possible:

I’m trying to get the wp_nav_menu for my site to resemble the tabs from https://market.android.com/books. The tabs are layered, change color on hover, and load the contents of the tab without navigating away from the page (I DO NOT NEED THIS FUNCTION).

Any help would be much appreciated.

Answer 1

You would do well to download Firebug or use Chrome developer tools to inspect the CSS and markup of the page. It’s the best way to find out exactly how someone is getting a specific effect.

That being said, there are a couple things in play here.

The actual shape of the tabs is being created with a neat trick that uses borders to create shapes. In this case, the markup for the tabs is just an unordered list with spans for the tab text. Using border-bottom and border-right, the shape of the tabs is created:

border-bottom: 24px solid #3D3D3D;
border-right: 24px solid transparent;

The tabs are then given a negative right margin to cause them to overlap with each other:

margin-right: -12px;

Finally, all tabs except for the selected tab are given an opacity of 0.35, which causes the transparency you see:

opacity: 0.35;

EDIT: Wow, I somehow completely overlooked the fact that you are using WordPress. I’m not familiar with WP, but assuming that the nav can be output as an unordered list with spans containing the text, you should be just fine. This is a pretty standard way to do navigation, so all you really need is the CSS.