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 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=”https://emil.linden.studio/demo/css3menu/” size=”large” target=”new”]Demo[/button]
 
 

Code below:

The HTML

  

    
Home
    
Portfolio
    
News
    
About me
    
Contact
  
  

  

    

      
      
      

        

        

      
    
  

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;
}