CSS Diagonal Menu with Sprites

Below I decided to do another text wrapping experiment - similar to the "stair steps" in the previous post - where I'll have the right hand side of the text wrap along an angled series of graphics. The graphics depict the various "points of sail" of a sailboat. In this post rather than using invisible "steps" to force the wrapping, I'm going to use a fake stair approach where I'll just insert <br>'s into the text to break lines at appropriate words to form the angled right hand side. While I'll do this by hand for this example, it wouldn't be too hard to write some server side code to insert the br's at appropriate places.

That takes care of the text, but we also have to position the circles along a diagonal line. We'll do this with a combination of relative and absolute positioning. We'll also add a hover style to pop up a box of text explaining the point of sail you are currently hovering over.

In the outer div - POSwrap - we set the position to relative to establish a positioning context. Below, we set an absolute position for the ul. Since the ul is a descendant of POSwrap it will use the positioning context we established above.

By absolutely positioning the entire ul we can move around all the point of sail graphics as a single unit (that is, all the li's within the ul will move together as we move the ul). Note that we will need to adjust the ul's position to match the amount of text in the paragraphs above the graphics.

Within the ul, we again use absolute positioning for each of the child li's. This positioning establishes the angled line of circular graphics.

In the working example below, hover over the portholes to see the text overlayed on a semi-transparent background. We discussed CSS transparency in other posts. The CSS and markup are fully listed, I explain the sprites briefly. If you search the blog, you'll find many other posts where I talk about sprites. I finish off with Photoshop circles. Enjoy and watch where you are going! :-)

Points of Sail

A sailboat cannot sail directly into the eye of the wind, but can sail to within
45 degrees of the wind or closer when close-hauled. If you head into the
wind, your sails will start luffing and you will lose power and the
ability to steer. Describing a sailboat's course in relation
to the wind direction, the points of sale on the right
show a starboard tack and assume that the
wind is blowing from the top of your
screen. Boat drawings and info
from Chapman Piloting
and Seamanship,
65th edition
by E. Maloney.

• Run

  When the wind is almost directly aft, the boat is said to be "running". If the wind is light, it'll feel like you are not moving but just look behind the boat and you'll see a rippling line of water. In stronger winds, gybing can be dangerous with this sail.

• Close-Hauled

  When there's the smallest angle between wind direction and heading, the boat is said to be "close-hauled" meaning that it sails are hauled in close to the hull. My favorite sail.

• Close Reach

  When the angle between heading and wind direction is increased, the boat begins to "close reach". A close reach is somewhat toward the wind, and broad reach is a little bit away from the wind. Fast point of sale for most boats. The sails are eased about halfway out.

• Beam Reach

  The boat is "beam reaching" when the wind is on the beam at a right angle to the boat.
  

• Broad Reach

  Further increases to the angle between heading and wind direction (more than 90 degrees) bring the boat to a "broad reach"

THE CSS AND THE MARKUP

/* pos */
ul#pointsofsail { position: absolute;
padding: 0; margin: 0;
list-style-type: none;

/*these 2 points will position it from title of blog post*/
/*and the title of pointofsale element*/
top: 105px; /*go below positioning context s 0 0 - go below*/
left: -125px; /*go left of positioning context s 0 0 - go left*/
}

ul#pointsofsail li {
background-image: url("http://pics.cssrule.com/pics/pointsofsail.png");
background-repeat: none;
height: 102px;
width: 102px;
position: absolute;
}

ul#pointsofsail li span {
font: 13px Arial, Helvetica, sans-serif;
line-height: 16px;
color: #494949;
width: 200px;
background: #fcf6e6;
padding: 20px;

border: 3px solid #616161;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

opacity: .90;
filter: alpha(opacity=90);

display: none;
position: absolute;
top: 120px;
/*lines up with my blogger text but 8px works by shifting
the hover window a little to the right
*/
left: 8px;
text-align: justify;
}

/*the span is always the first child of the li in this
markup. We are really trying to get to the first
list item in the ul so the first-child goes to the li
element
I want the first popup window to be placed at 0 left and
not 8px like the rest of them
*/
#POSwrap ul#pointsofsail li:first-child span { left: 0; }

ul#pointsofsail li:hover span {
display: block;
}

#closehauled {
background-position: 0 0;
height: 102px;
width: 102px;
left: 571px;
top: 9px;
}
#closehauled:hover {
background-position: 0 -102px;
}

#closereach {
background-position: -102px 0;
left: 460px;
top: 72px;
}
#closereach:hover {
background-position: -102px -102px;
}

#beamreach {
background-position: -204px 0;
left: 349px;
top: 138px;
}
#beamreach:hover {
background-position: -204px -102px;
}

#broadreach {
background-position: -306px 0;
background-position: -307px -2px;
left: 235px;
top: 202px;
}
#broadreach:hover {
background-position: -307px -104px;
}

#run {
background-position: -408px 0;
background-position: -409px -2px;
left: 125px;
top: 266px;
}
#run:hover {
background-position: -409px -104px;
}

div.post-body ul#pointsofsail li span h2 {
font-size: 15px;
line-height: 6px;
font-weight: bold;
padding: 0;
margin: 5px 0 20px 0;

/*to undo the effects of cascading*/
text-transform: none;
background: none;
font-family : Arial,Helvetica,sans-serif;
font-style : normal;
letter-spacing : normal;
line-height : 6px;
}

/*different colors*/
ul#pointsofsail li#closehauled span h2 {
color: #6a2df7;
}

ul#pointsofsail li#closereach span h2 {
color: #61a1e2;
}

ul#pointsofsail li#beamreach span h2 {
color: #23689c;
}

ul#pointsofsail li#broadreach span h2 {
color: #06c2d3;
}

ul#pointsofsail li#run span h2 {
color: #de0c1b;
}

div.post-body div#POSwrap {
width: 550px;
margin: 0;
padding: 0 0 90px;
font-family: "Helvetica Neue Medium",Helvetica,"Helvetica Neue",Arial,sans-serif;
position: relative;
}

div.post-body div#POSwrap h1 {
background: url(http://pics.cssrule.com/pics/h2transparent.png) no-repeat;
width: 244px;
height: 56px;
text-indent: -9999px;
margin-top: 20px;
}
/*end of pos*/

<div id="POSwrap">
<h1>
Points of Sail</h1>
<p>
A sailboat cannot sail directly into the eye of the wind, but can sail to within 
45 degrees of the wind or closer when close-hauled. If you head into the
wind, your sails will start luffing and you will lose power and the
ability to steer.  Describing a sailboat's course in relation
to the wind direction, the points of sale on the right
show a starboard tack and assume that the
wind is blowing from the top of your 
screen. Boat drawings and info 
from Chapman Piloting 
and Seamanship, 
65th edition 
by <em>E. Maloney</em>.
</p>

<ul id="pointsofsail">
<li id="run"><span><h2>
Run</h2>
When the wind is almost directly aft, the boat is said to be "running".  If the wind is light, it'll feel like you are not moving but just look behind the boat and you'll see a rippling line of water.  In stronger winds, gybing is a danger with this sail.  Aerodynamically simpler but can be the most dangerous point of sail.</span></li>
<li id="closehauled"><span><h2>
Close-Hauled</h2>
When there's the smallest angle between wind direction and heading, the boat is said to be "close-hauled" meaning that it sails are hauled in close to the hull.   My favorite sail :)</span></li>
<li id="closereach"><span><h2>
Close Reach</h2>
When the angle between heading and wind direction is increased, the boat begins to "close reach".  A close reach is somewhat toward the wind, and broad reach is a little bit away from the wind. Fast point of sale for most boats.  The sails are eased about halfway out.</span> </li>
<li id="beamreach"><span><h2>
Beam Reach</h2>
The boat is "beam reaching" when the wind is on the beam at a right angle to the boat.  </span>
</li>
<li id="broadreach"><span><h2>
Broad Reach</h2>
Further increases to the angle between heading and wind direction (more than 90 degrees) bring the boat to a "broad reach"</span></li>
</ul>
</div>    

CSS SPRITES

The same rules that set the absolute positions of the graphics, also implements the CSS sprite technique by setting the background position attribute. An additional hover style makes the sprite dynamic by changing the background offset when you hover over the graphic. As an added touch, hovering over a graphic also displays the block of text contained in the corresponding li's span element (see the li:hover span" rule).

Finally, for each of these blocks of text, we set the color of the heading to match the border color of the circular graphic.


The sprite file that I'm using has the the active (when an image is pressed) and the inactive state (the grey versions) of each bitmap. For detailed discussion of CSS Sprites, see these links.

HOLLOW PHOTOSHOP CIRCLES

Here is a video briefly describing the steps involved in drawing consistent see through circles in Adobe Photoshop. You will learn how to use the Ellipse tool to make perfect circles, Stroke, Blending Options Default, and Fill Opacity for vector shapes: