Gri drop down üst-menü tasarımı

1
132
Okunma

Html5 Gri  drop down üst menü tasarımı

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>

1 Yorum

  1. 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.

CEVAP VER

Lütfen yorumunuzu girin!
Please enter your name here