CODEWITHSUNDEEP
htmlcssnavigation
John
John

Reputation: 1797

Problems styling a navigation menu active tab HTML/CSS

I am having a bit of trouble styling a navigation menu where you can select packages.

This is going to be a nav menu for a mobile website.

The active green li tab I need to be evenly spaced across the full with of the ul

My problem is when I click on the tab to make it active the green doesnt fill up all the li and blue is still visible.

Secondly on the green active tab li I need to display a down arrow at the bottom center of the active tab.

I have included a fiddle with it more or less done, just need help with styling it to finish it off.

http://jsfiddle.net/8C3U3/

<ul id="navlist">
   <li><a href='#' class="m-active">Basic</a></li>
   <li class="spacer"><a  class="m-active"href='#'>Standard</a></li>
   <li><a  class="m-active"href='#'>Premium</a></li>
</ul>

Upvotes: 0

Views: 646

Answers (1)

jamesplease
jamesplease

Reputation: 12869

I. Why does the blue still display?

The blue still displays for a few reasons. I'll go through each of them.

  1. The first reason is that you've given your lis padding and a blue background color. Yet you assign the green background color to your as. Since the a is contained within the li, and the li has padding, the a couldn't possibly extend the full dimensions of the li and cover up the blue. View this JSFiddle, where that problem is corrected.

  2. The second reason is that your lis are set to be inline elements. Inline elements interpret all whitespace in your code (spacebar spaces, new lines, etc.) as a single space between the elements. To get rid of that spacing, get rid of the whitespace between the elements in the code itself. View that here.

Unsolved questions: You'll see that there's still blue visible. This is because borders are rendered outside of the element, and this border doesn't extend the whole height of your li (let alone the ul, which also has a blue background set). You'll need to figure out how to handle this. One option is that you could use :before and :after pseudoelement so that the spacing between the elements is closed.

II. Making an arrow beneath the active tab

The way I usually make arrows is with an :after pseudoelement. Here are the steps:

  1. We want to position the arrow as we want, which is best done by setting it to position: absolute;. To make it relative to the parent, we need to explicitly define the position on the parent. So let's go with position: relative;, as that won't change the location of the parent. Now we can move the arrow around wherever we want!
  2. Let's set the pseudoelement to be display: block; and give it empty content. This makes it display as we want it to.
  3. You can either use the border hack to create the triangle, or use the unicode triangle down character. I chose to use that in this JSFiddle.

Unsolved questions: Right now, your lis aren't the same width. This means that no single line of CSS code could center the triangles for all of the lis. You either need to set the lis to be the same width, then position the triangle, or target each li individually and manually place the triangle based on the width. I suggest the former of these two possibilities.

III. How I'd Do It

And here's how I'd make the menu, with most of the issues above resolved. Maybe this will be a place for you to work from.

If you're not planning on fading the arrow in, then you might prefer to use the border hack to create the triangle, which has deeper browser support.

Upvotes: 1

Related Questions