Envato Inspired Menu – Pure CSS

Note: When copying the code, please click on plain-text due to the fact that the google syntax highlighter messed up a few of the border-top-right-radius CSS properties.

Introduction

I am one of the frequent lurkers on the Envato/Tuts+ sites and I’ve always found the Envato Network menu sexy. The following is a horrible attempt at reproducing the same menu using pure markup+css.

Demo:

http://failboat.me/envato.html

Markup

I’m not going to go out of a limb here to explain how or why the markup should be formatted so I’ll just use one of the generic markup hierarchy for the menu.

	<div class='envato'>

		<a href = '#' class = 'envato-top'>
			Demos<span>+ Network</span>
		</a> 

		<ul>
			<li>
				<a href='#' class = 'envato-item'>
					Demos+ <span>Tutorials & Resources</span>
				</a>
			</li>

			...
		</ul>
	</div>

where .envato is the container, .envato-top is the menu button, and .envato-item’s are the individual menu items.

Following there, let’s create the actual style for the markup.

Style

body{
	background-color:#41342B;
}

div.envato{
	display:block;

	position: absolute;

	top:50%;
	left:50%;

	padding:0;

	margin-left:-152px;
	margin-top:-227px;
}
	div.envato a.envato-top{
		display:block;

		text-decoration:none;

		font-size:20px;
		font-family:"Arial Rounded MT Bold";

		padding:7px;
		color:#EEE;
		background-color:#B03B01;

		-moz-border-radius-topright: 15px;
		-webkit-border-top-right-radius: 15px;
		border-top-right-radius: 15px;

		-moz-border-radius-bottomleft: 15px;
		-webkit-border-bottom-left-radius: 15px;
		border-bottom-left-radius: 15px;

		border-style: none;
		-moz-outline:none;
		outline:none;
	}

		div.envato a.envato-top span{
			border-style: none;
		}

			div.envato a.envato-top:hover span{
				color:#CCC;
			}

		div.envato a.envato-top:hover{
			color:#FFF;
			background-color:#AE0D1F;
			border-style: none;
			-moz-outline:none;
			outline:none;
		}

		div.envato a.envato-top:focus, div.envato a.envato-top:active{
			border-style: none;
			-moz-outline:none;
			outline:none;

			color:#FFF;
			background-color:#AE0D1F;
		}

		div.envato a.envato-top:focus  + ul, div.envato a.envato-top:active  + ul {
			border-style: none;
			visibility:visible;
		}

	div.envato ul{
		position:absolute;

		width:270px;

		padding:10px 0;
		margin:0;
		left:20px;
		background:#1B1813;

		visibility:hidden;

		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		border-radius: 8px;

		-moz-border-radius-topleft: 0px;
		-webkit-border-top-left-radius: 0px;
		border-top-left-radius: 0px;

	}
		div.envato ul:hover, div.envato ul li:hover, div.envato ul li a.envato-item:hover{
			visibility:visible;
		}

		div.envato ul li{
			padding:10px 20px;
			list-style:none;
			display:block;

		}	

		div.envato ul li a.envato-item{
			text-decoration:none;

			color:#86785B;

			display:block;
			width:100%;

			font-size:14px;
		}

			div.envato ul li a.envato-item:hover{
				color:#FFFFFF;
			}

			div.envato ul li a.envato-item:focus{
				color:#FFFFFF;
				border-style: none;
				-moz-outline:none;
				outline:none;
			}

			div.envato ul li a.envato-item span{
				color:#aaa;

				position:absolute;

				right:10px;
				left:130px;

				padding-top:3px;

				font-size:10px;

				cursor:pointer;
			}
				div.envato ul li a.envato-item:hover span{
					text-decoration:underline;
				}

Summary of Style

Here’s a generalized summary of the style. We just stylize the markup as we would usually do. (Not within the scope of this tutorial. This is mechanics versus aesthetics.)

Mechanics

The first challenge comes near the div.envato ul lu a.envato-item span element. If you look at the envato menu, the description span is actually uniformly spaced with regards to the ABSOLUTE position of the a.envato element. Thus we need to define that the position be absolute and that it needs to be 130px; from the left.

The second challenge comes when you try to link the click behavior to the visibility of the UL element. This is where you would need to read up on some of the more advanced CSS selectors. Thank god it’s 2009 and not 2005. We can now safely presume that the majority of our users at least have a browser with near-complete CSS 2 compatibility. (IE6 < has what, 10% of the market share now?) You might have noticed that I juxtaposed the envato-top and the ul elements as siblings within the document hierarchy. This is because there's no sure way of determining the parent element with only the CSS 2 selectors and so we have to make do with what we have. In order to access the UL element from the .envato-top element, we need to use the following selector:

div.envato a.envato-top:pseudo + ul

so in this case, our pseudo selector is active so we would use

div.envato a.envato-top:active + ul

This however does not work in a few browsers (I'm looking at you IE) due to the fact that these browsers automatically remove the pseudo-selector active as soon as the click event finishes, so we would have to change this to.

div.envato a.envato-top:active + ul, div.envato a.envato-top:focus + ul

Additional information

There are a few snippets of arbitrary css properties that we’ve used during the tutorial. Here’s a list of them for those of you who just can’t find the energy to google them.

• border-radius
  We use

  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  
  -moz-border-radius-topright: 15px;
  -webkit-border-top-right-radius: 15px;
  border-top-right-radius: 15px;
  

  to create the rounded corners. These are not supported in any version of IE nor Opera.

• outline

  -moz-outline:none;
  outline:none;
  

  This removes the outline on the links. Does not work for IE

Everything else should be included in your standard CSS Bible.