Css Yatay Menü Örneği

Orlion

Uzman üye
18 Ocak 2012
1,755
0
YokGibiBişey
Merhaba Arkadaşlar Bu Konumda Sizlere Css Yatay Menü Kodlarını Vereceğim Lafı Fazla Uzatmadan Kodaları Veriyim :)

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<**** http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSSÖrnekleri.com</title>
		<style type="text/css">
			body {
				padding: 50px;
			}
			/* The CSS Code for the menu starts here */
			#menu {
				font-family: Arial, sans-serif;
				font-weight: bold;
				text-transform: uppercase;
				margin: 20px 0;
				padding: 0;
				list-style-type: none;
				background-color: #eee;
				font-size: 13px;
				height: 40px;
				border-top: 2px solid #eee;
				border-bottom: 2px solid #ccc;
			}
			#menu li {
				float: left;
				margin: 0;				
			}
			#menu li a {
				text-decoration: none;
				display: block;
				padding: 0 20px;
				line-height: 40px;
				color: #666;
			}
			#menu li a:hover, #menu li.active a {
				background-color: #f5f5f5;
				border-bottom: 2px solid #DDD;
				color: #999;
			}
			#menu_wrapper ul {margin-left: 12px;}
			#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
			#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
 
			/* Black Menu */
			#menu_wrapper.black ul {
				border-top: 2px solid #333;
				border-bottom: 2px solid #000;
				background: #333;}
			#menu_wrapper.black a {color: #CCC;}
			#menu_wrapper.black li a:hover, #menu_wrapper.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444;}
			#menu_wrapper.black {background: url(images/black.png) no-repeat right;}
			#menu_wrapper.black div {background: url(images/black.png) no-repeat left;}
 
			/* Blue Menu */
			#menu_wrapper.blue ul {
				border-top: 2px solid #356AA0;
				border-bottom: 2px solid #204061;
				background: #356AA0;}
			#menu_wrapper.blue a {color: #fff;}
			#menu_wrapper.blue li a:hover, #menu_wrapper.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}
			#menu_wrapper.blue {background: url(images/blue.png) no-repeat right;}
			#menu_wrapper.blue div {background: url(images/blue.png) no-repeat left;}
 
			/* Red Menu */
			#menu_wrapper.red ul {
				border-top: 2px solid #660000;
				border-bottom: 2px solid #450000;
				background: #660000;}
			#menu_wrapper.red a {color: #fff;}
			#menu_wrapper.red li a:hover, #menu_wrapper.red li.active a {color: #F27F84; background: #990000; border-bottom: 2px solid #660000;}
			#menu_wrapper.red {background: url(images/red.png) no-repeat right;}
			#menu_wrapper.red div {background: url(images/red.png) no-repeat left;}
 
			/* Orange Menu */
			#menu_wrapper.orange ul {
				border-top: 2px solid #d15600;
				border-bottom: 2px solid #B44500;
				background: #d15600;}
			#menu_wrapper.orange a {color: #fff;}
			#menu_wrapper.orange li a:hover, #menu_wrapper.orange li.active a {color: #FA9B5B; background: #B44500; border-bottom: 2px solid #d15600;}
			#menu_wrapper.orange {background: url(images/orange.png) no-repeat right;}
			#menu_wrapper.orange div {background: url(images/orange.png) no-repeat left;}
		</style>
	</head>
	<body>
		<!--  Menu -->
		<div id="menu_wrapper" class="grey">
			<div class="left"></div>
			<ul id="menu">
				<li><a href="http://www.cssornekleri.com">Ana Sayfa</a></li>
				<li class="active"><a href="http://www.cssornekleri.com">Hakkımızda</a></li>
				<li><a href="http://www.cssornekleri.com">Hizmetlerimiz</a></li>
				<li><a href="http://www.cssornekleri.com">İletişim</a></li>
			</ul>
		</div>
 
		<!-- Siyah Menu -->
		<div id="menu_wrapper" class="black">
		<div class="left"></div>
			<ul id="menu">
				<li><a href="http://www.cssornekleri.com">Ana Sayfa</a></li>
				<li class="active"><a href="http://www.cssornekleri.com">Hakkımızda</a></li>
				<li><a href="http://www.cssornekleri.com">Hizmetlerimiz</a></li>
				<li><a href="http://www.cssornekleri.com">İletişim</a></li>
			</ul>
		</div>
 
		<!-- Mavi Menu -->
		<div id="menu_wrapper" class="blue">
		<div class="left"></div>
			<ul id="menu">
				<li><a href="http://www.cssornekleri.com">Ana Sayfa</a></li>
				<li class="active"><a href="http://www.cssornekleri.com">Hakkımızda</a></li>
				<li><a href="http://www.cssornekleri.com">Hizmetlerimiz</a></li>
				<li><a href="http://www.cssornekleri.com">İletişim</a></li>
			</ul>
		</div>
 
		<!-- Kırımızı Menu -->
		<div id="menu_wrapper" class="red">
		<div class="left"></div>
			<ul id="menu">
				<li><a href="http://www.cssornekleri.com">Ana Sayfa</a></li>
				<li class="active"><a href="http://www.cssornekleri.com">Hakkımızda</a></li>
				<li><a href="http://www.cssornekleri.com">Hizmetlerimiz</a></li>
				<li><a href="http://www.cssornekleri.com">İletişim</a></li>
			</ul>
		</div>
 
		<!-- Turuncu Menu -->
		<div id="menu_wrapper" class="orange">
		<div class="left"></div>
			<ul id="menu">
				<li><a href="http://www.cssornekleri.com">Ana Sayfa</a></li>
				<li class="active"><a href="http://www.cssornekleri.com">Hakkımızda</a></li>
				<li><a href="http://www.cssornekleri.com">Hizmetlerimiz</a></li>
				<li><a href="http://www.cssornekleri.com">İletişim</a></li>
			</ul>
		</div>
	</body>
</html>

Umarım İşinze Yarar :)
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.