Drop-Down Green

Son windows  sürümü  olan Windows 8  tasarımı sayesinde  keskin köşeler  daha bir moda  oldu. Aslında  Css menü örneğinde  köşeleri hafif ova görünen bir menü  örneği  hazırlamak isterdim ama bu seferlik  keskin köşeli butonlardan oluşan bir  yatay üst menü örneği hazırladım. Menü butonlarına baktığınızda 3D gibi görünen bir özelliği var. İşin aslı 3D değil bu Css yatay menü örneği. Butonları  3px yukarı ve gölgesini de 2px aşağı (gölge bulanıklığı ile 3px eder) doğru ayarlayınca böyle  bir görüntü çıkıyor ortaya. Mouseyi butonların üstünde gezdirdiğinizde ise butonların gölgesi kayboluyor ve butonlar 3px  aşağı iniyor. Bu sefer de içeri batıyormuş  gibi  bir görünüm çıkıyor ortaya.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css :

<style>
* {
 margin: 0;
 padding:0;
 font-family: sans-serif;
}
.container {
  width:100%;
  height:50px;
  background-color:#8bcfa1;
  margin: 250px auto;
}
.menu {
  width:920px;
  height:50px;
  margin: 0 auto;
}
.menu > li {
  width: 150px;
  height:38px;
  list-style:none;
  background-color:#63be80;
  float:left;
  margin-top:-3px;
  text-align:center;
  margin-left:3px;
  padding-top:12px;
  position:relative;
  z-index: 3;
  box-shadow:1px 1px 1px rgb(71,71,71),1px 2px 0px rgba(0,0,0,0.6);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;  
}
.menu > li:hover {
 color: #468ECD;
 background-color:#009966;
 height:38px;
 margin-top:0px; 
  box-shadow:0px 0px 0px rgba(0,0,0,0.6);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}
.menu li a {
  font-size:20px;
  text-decoration:none;
  font-weight:bold;
  font-family:Georgia, "Times New Roman", Times, serif;
  text-transform:uppercase;
  color:#e9f7ee;
}
.menu ul {
visibility:hidden;
 position: absolute;
 background-color:#003333;

 width: 150px;
 top:0px;
 opacity: 0;
 text-align: left; 
}
.menu li:hover ul {
 opacity: 1;
 top: 50px;
 visibility:visible;
 background-color:#009966; 
}
.menu ul li{
  width: 150px;
  height:38px;
  list-style:none;
  background-color:#63be80;
  float:left;
  text-align:center;
  padding-top:12px;
  position:relative;
  z-index: 3;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s; 
}
.menu ul li:hover {
 display: block;
 position: relative;
 background-color:#009966;
}
</style>

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="container">
  <ul class="menu">
    <li><a href="http://mintik.com">Anasayfa</a></li>
    <li><a href="http://mintik.com/category/jquery/">jQuery</a></li>
    <li><a href="http://mintik.com/category/wordpress/">Wordpress</a>
		<ul>
		    <li><a href="http://mintik.com/category/theme/">Theme</a></li>
		    <li><a href="http://mintik.com/category/wordpress-eklentiler/">Plugin</a></li>
		    <li><a href="http://mintik.com/category/wordpress-widget/">Widget</a></li>		
		</ul>
	</li>
    <li><a href="http://mintik.com/category/css/">Css</a></li>	
    <li><a href="http://mintik.com/category/photoshop-tutorials/">Photoshop</a></li>
    <li><a href="http://mintik.com/?p=14967">Tutorial</a></li>
  </ul>	
</div>