So today I ran into a conundrum as I was working on the “active” state for a menu for my one of my client’s redesign of their corporate site.
In the design there is an active state of a little triangle indicating what section is active as a full width submenu slides down from beneath the main menu (that tutorial is the works).
So the triangle itself isn’t a problem. I easily created that using the
The problem I ran into was the triangle itself has a border on the left and right sides and then extends across the page beneath the menu.
In this approach I am using the
:after pseudo-elements to add two triangles.
:after will be controlling the “top” triangle,
:before the bottom triangle – aka our fake border.
See it in action below. I’ve commented the CSS source to explain exactly what I did, and why. I’ve written up a brief explanation below of the process, but exploring the pen, and checking out the demo is really the easiest way to see how/why/what is making this work.
Basically, the approach I took went like this:
The menu was already built our from previous iterations and was an unordered list. I used floats to align the list items (
<li>s) all on one line. Now, within those
<li>s we have our links. I also floated the
<a>s to the left, and set them to
display:block. This grants me more control over the links stylistically. Specifically, in this case, the ability to set a height and borders that expand the full height of the item.
Now, the item I am targeting is a list item with a class of active (
<li class="active">). I want this item to have the faux triangle border effect. So, using
:after I create my two triangles.
:before is going to be our bigger, darker triangle, while
:after is going to match the background color of the body area below it, giving the appearance of a seamless transition from the body area below it to the triangle itself. The darker bottom triangle should be at least 2px greater in size than the triangle above it. In this case the indicator triangle itself has an 8px border width. The larger/darker is 10px;
I position the triangles using absolute positioning to the bottom of the menu item (make sure your
<li> has been set to have relative positioning so it will stay within the bounds of the item). Using the absolute positioning I give the triangles -1px (
:after triangle) and -2px (border triangle (
:before)), so it will overlap the border that is along the bottom of the menu, creating that seamless illusion.