Web · 16 May 2012

Menu using only css3

Just a css3 menu i made in some spare time.

Since this demo heavily relies on CSS3, make sure you view it using a CSS3 compatible browser. The Webkit browsers (Safari and Chrome) probably display the effect best, I havent tried it out in other browsers.

If you by any means can't view the demo correctly, here's how it should look.
If you by any means can't view the demo correctly, here's how it should look.

If you don’t think it’s to much work please leave a link to your website in the comments below if you’re going to use the code.

[button link=”http://emil.linden.studio/demo/css3menu/” size=”large” target=”new”]Demo[/button]
 
 

Code below:

The HTML


 
 

The CSS

body, ul, li, a {
  margin:0;
  padding:0;
}

body {
  background:#f9f9f9;
  padding:0;
  margin:100px;
}

#menu {
  width:960px;
  height:36px;
  margin:auto;
  box-shadow:0 2px 3px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.3);
  border-radius:8px;
  border:1px solid #c32a72;
  background-image: -webkit-linear-gradient(bottom, #d64d86 0%, #f26fa6 100%);
  overflow:hidden;
}

#menu ul li {
  list-style-type:none;
  display:inline;
}

#menu ul li a {
  color:#FFF;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  text-decoration:none;
  font-family: 'Open Sans', sans-serif;
  font-weight:600;
  font-size:14px;
  padding:7px 20px 8px;
  border-right:1px solid rgba(0,0,0,.1);
  border-left:1px solid rgba(255,255,255,.15);
  float:left;
  margin-top:1px;
}

#menu ul li a.active, #menu ul li a:hover {
  background:-webkit-linear-gradient(bottom, transparent, rgba(0, 0, 0, .4));
  margin-top:0;
  padding-top:8px;
  border-left:1px solid rgba(0,0,0,.1);
	
}

#menu #menuEnd {
  float:left;
  border-left:1px solid rgba(255,255,255,.15);
  height:34px;
  margin:1px 0;
}

#search {
  position:relative;
}

#search form, #search form input#searchField, #search form input#searchButton {
  margin:0;
  padding:0;
}

#search form {
  border:0;
  outline:none;
  border-radius:48px;
  border:1px solid #d64d86;
  background-image: -webkit-linear-gradient(top, #eee 0%, white 100%);
  float:right;
  margin-right:6px;
  margin-top:5px;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
  width:155px;
  height:22px;
}

#search form input#searchField {
  background:transparent;
  border:0;
  outline:none;
  height:100%;
  font-style:italic;
  margin-left:8px;
}

#search form input#searchField:focus {
  color:#555;
  font-style:normal;
}

#search form input#searchButton {
  height:22px;
  width:22px;
  border:0;
  margin-top:4px;
  margin-right:6px;
  position:absolute;
  top:2px;
  right:1px;
  z-index:2;
  background:transparent;
}

#search form input#searchButton:hover {
  opacity:1;
  cursor:pointer;
}


.mag {
  height:16px;
  width:16px;
  position:absolute;
  right:11px;
  top:11px;
  z-index:1;
}

.mag .circle {
  height:6px;
  width:6px;
  border-radius:6px;
  border:2px solid #aaa;
  position:absolute;
}

.mag .shaft {
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg);	
  width:2px;
  height:6px;
  background:#aaa;
  position:absolute;
  top:7px;
  left:9px;
}