Html5

Kullanım

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

Css : 

@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);
*{
  margin: 0;
  padding:0;
}
body{background-color:#333333;
  font-family: 'Archivo Narrow', sans-serif;
  text-transform: uppercase;
  font-size:0.8em;
}
nav {
  text-align: center;
  margin: 20px 0;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {
  background: #efefef; 
  background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
  background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 7px;  
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
    content: ""; clear: both; display: block;
  }
nav ul li {
  float: left;
}
nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
  }
nav ul li:hover a {
      color: #fff;
    }
nav ul li a {
    display: block; padding: 15px 30px;
    color: #757575; text-decoration: none;
  }
nav ul ul {
  background: #5f6975; border-radius: 0px; padding: 0;
  position: absolute; top: 100%;
}
nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
  }
nav ul ul li a {
      padding: 15px 30px;
      color: #fff;
    }
nav ul ul li a:hover {
        background: #4b545f;
      }
nav ul ul ul {
  position: absolute; left: 100%; top:0;
}
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

       <nav>
        	<ul>
        		<li><a href="http://mintik.com">Home</a></li>
        		<li><a href="http://mintik.com/category/webmaster/">Webmaster</a>
        			<ul>
        				<li><a href="http://mintik.com/category/css/">Css3</a></li>
        				<li><a href="http://mintik.com/category/html5/">Html5</a></li>
        				<li><a href="http://mintik.com/category/jquery/">jQuery</a>
        					<ul>
        						<li><a href="http://mintik.com/tag/eklenti/">Plugins</a></li>
        						<li><a href="http://mintik.com/tag/eklenti/">Examples</a></li>
        					</ul>
        				</li>
        			</ul>
        		</li>
        		<li><a href="http://mintik.com/category/scritp/">Script</a>
        			<ul>
        				<li><a href="http://mintik.com/category/php-scriptler/">Php</a></li>
        				<li><a href="http://mintik.com/category/flash/">Asp</a></li>
        			</ul>
        		</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/eklenti/">Plugin</a></li>
        				<li><a href="http://mintik.com/category/wordpress-widget/">Widget</a></li>
        			</ul>
        		</li>

        		<li><a href="http://mintik.com/category/photoshop/">Photoshop</a></li>
        		<li><a href="http://mintik.com/?p=13745">tutorial</a></li>
        	</ul>
        </nav>

Bu Yazıyı Paylaş

1 yorum "Multi level grey horizontal"

  1. Fatih Narin dedi ki:

    Merhaba
    Yukarıdaki kodları asp.net için uyarladığımda örnekteki gibi çalışmıyor. Nerede hata yapıyor olabilirim? Asp.net desteklemiyormu? Css stylesheet sayfasında 2.1 sürüm olduğunu görüyorum. Birde nav tagını tanımıyor gibi duruyor.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla