Responsive centered menu - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu

Description

Responsive centered menu

Demo Code

ResultView the demo in separate window 

<!--<!--from  w w w  .jav a2s  . co m-->
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
 <head> 
  <style>
body,
html {
   background:Chartreuse;
   padding:0;
   margin:0;
}

.logo {
   width:100px;
   height:100px;
   background:yellow;
   margin:4% auto;
   border-radius:51%;
   box-sizing:border-box;
   border:6px solid yellow;
}

#nav {
   text-align:center
}

#nav a {
   background:blue;
   display:inline-block;
   color:pink;
   text-decoration:none;
   font-size:15px;
   font-family:monospace;
   padding:6px 21px 4px;
   box-shadow:5px 5px 0px 0px OrangeRed;
   transform:rotate(3deg) skew(3deg);
   margin:6px 4%;
}

#nav a span {
   transform:rotate(-3deg) skew(-3deg);
   display:block;
}

#nav a:nth-child(even) {
   transform:rotate(-3deg) skew(-3deg)
}

#nav a:nth-child(even) span {
   transform:rotate(3deg) skew(3deg)
}
</style> 
 </head> 
 <body> 
  <div class="logo"></div> 
  <nav id="nav"> 
   <a href="#"> <span>Lore</span> </a> 
   <a href="#"> <span>Lore</span> </a> 
   <a href="#"> <span>Lore</span> </a> 
   <a href="#"> <span>Lore</span> </a> 
   <a href="#"> <span>Lore</span> </a> 
  </nav>  
 </body>
</html>

Related Tutorials