HTML - CSS ile Dikey ve Yatay Menü Örnekleri

HTML etiketlerinden liste kullanılarak ve CSS ile biçimlendirerek dikey ve yatay menüler örneklendirilmiştir.

Dikey Menü Örnekleri

Örnek 1:

<html>
	<head>
		<style type="text/css">
			.menu
			{
				list-style:none;
				margin:0; padding:0;
			}
			
			.menu li
			{
				margin:5px;
			}
			  
			.menu a
			{
				display:block;
				width:150px;
				text-decoration:none;
				color:#606;
				font-weight:bold;
				padding:5px;
				background:#FC9;
				border-left:5px solid #933;
				border-right:5px solid #933;
				line-height:25px;
			  }
			  
			.menu a:hover
			{
				margin-left:5px;
				border-left:5px solid #004;
				border-right:5px solid #004;
				color:#004;
			}
		</style>
	</head>

	<body>
		<ul class="menu">
			<li><a href="#">ANASAYFA</a></li>
			<li><a href="#">PROJELER</a></li>
			<li><a href="#">REFERANSLAR</a></li>
			<li><a href="#">HAKKINDA</a></li>
			<li><a href="#">İLETİŞİM</a></li>
		</ul>
	</body>
</html>

<html>

<head>

.menu

{

list-style:none;

margin:0; padding:0;

}

.menu li

{

margin:5px;

}

.menu a

{

display:block;

width:150px;

text-decoration:none;

color:#606;

font-weight:bold;

padding:5px;

background:#FC9;

border-left:5px solid #933;

border-right:5px solid #933;

line-height:25px;

}

.menu a:hover

{

margin-left:5px;

border-left:5px solid #004;

border-right:5px solid #004;

color:#004;

}

</style>

</head>

<body>

<li><a href="#">ANASAYFA</a></li>

<li><a href="#">PROJELER</a></li>

<li><a href="#">REFERANSLAR</a></li>

<li><a href="#">HAKKINDA</a></li>

<li><a href="#">İLETİŞİM</a></li>

</ul>

</body>

</html>

Örnek 2:

<html>
	<head>
		<style type="text/css">
			.menu
			{
				list-style:none;
				margin:0; padding:0;
			}
			
			.menu li
			{
				margin:5px;
			}
			  
			.menu a
			{
				display:block;
				width:120px;
				text-decoration:none;
				color:#933;
				font-weight:bold;
				padding:2px;
				border-bottom:5px solid #933;
				text-align:center;	
			  }
			  
			.menu a:hover
			{
		
				border-bottom:5px solid #0cf;
				color:#0cf;
			}
		</style>
	</head>

	<body>
		<ul class="menu">
			<li><a href="#">ANASAYFA</a></li>
			<li><a href="#">PROJELER</a></li>
			<li><a href="#">REFERANSLAR</a></li>
			<li><a href="#">HAKKINDA</a></li>
			<li><a href="#">İLETİŞİM</a></li>
		</ul>
	</body>
</html>

<html>

<head>

.menu

{

list-style:none;

margin:0; padding:0;

}

.menu li

{

margin:5px;

}

.menu a

{

display:block;

width:120px;

text-decoration:none;

color:#933;

font-weight:bold;

padding:2px;

border-bottom:5px solid #933;

text-align:center;

}

.menu a:hover

{

border-bottom:5px solid #0cf;

color:#0cf;

}

</style>

</head>

<body>

<li><a href="#">ANASAYFA</a></li>

<li><a href="#">PROJELER</a></li>

<li><a href="#">REFERANSLAR</a></li>

<li><a href="#">HAKKINDA</a></li>

<li><a href="#">İLETİŞİM</a></li>

</ul>

</body>

</html>

Yatay Menü Örnekleri

Örnek 3:

<html>
	<head>
		<style type="text/css">
		*{margin:0;padding:0;}
		.menu {list-style:none;}
		.menu li {float:left;}
		.menu a{
			text-decoration:none;
			display:inline-block;
			width:150px;
			
			/* şekillendirmeler*/
			background:#DDD;
			color:#001;
			margin:5px;
			text-align:center;
		}
		.menu a:hover{
			/* şekillendirmeler*/
			color:#c30;	
		}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li><a href="#">ANASAYFA</a></li>
			<li><a href="#">PROJELER</a></li>
			<li><a href="#">REFERANSLAR</a></li>
			<li><a href="#">HAKKINDA</a></li>
			<li><a href="#">İLETİŞİM</a></li>
		</ul>
	</body>
</html>

<html>

<head>

*{margin:0;padding:0;}

.menu {list-style:none;}

.menu li {float:left;}

.menu a{

text-decoration:none;

display:inline-block;

width:150px;

/* şekillendirmeler*/

background:#DDD;

color:#001;

margin:5px;

text-align:center;

}

.menu a:hover{

/* şekillendirmeler*/

color:#c30;

}

</style>

</head>

<body>

<li><a href="#">ANASAYFA</a></li>

<li><a href="#">PROJELER</a></li>

<li><a href="#">REFERANSLAR</a></li>

<li><a href="#">HAKKINDA</a></li>

<li><a href="#">İLETİŞİM</a></li>

</ul>

</body>

</html>

Örnek 4:

<html>
	<head>
		<style type="text/css">
		*{margin:0; padding:0;}
		.menu {list-style:none;}
		.menu li {float:left;}
		.menu a{
			text-decoration:none;
			display:block;
			width:150px;
			color:gray;
			font-weight:bold;
			margin:5px;
			text-align:center;
			border:5px dashed white;
		}
		.menu a:hover{
			color:orange;
			border:5px dashed orange;
		}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li><a href="#">ANASAYFA</a></li>
			<li><a href="#">ALBÜM</a></li>
			<li><a href="#">REFERANSLAR</a></li>
			<li><a href="#">İLETİŞİM</a></li>
		</ul>
	</body>
</html>

<html>

<head>

*{margin:0; padding:0;}

.menu {list-style:none;}

.menu li {float:left;}

.menu a{

text-decoration:none;

display:block;

width:150px;

color:gray;

font-weight:bold;

margin:5px;

text-align:center;

border:5px dashed white;

}

.menu a:hover{

color:orange;

border:5px dashed orange;

}

</style>

</head>

<body>

<li><a href="#">ANASAYFA</a></li>

<li><a href="#">ALBÜM</a></li>

<li><a href="#">REFERANSLAR</a></li>

<li><a href="#">İLETİŞİM</a></li>

</ul>

</body>

</html>

Örnek 5:

<html>
	<head>
		<style type="text/css">
		*{margin:0; padding:0;}
		.menu {list-style:none;}
		.menu li {float:left;}
		.menu a{
			text-decoration:none;
			display:inline-block;
			width:150px;
			color:#933;
			font-weight:bold;
			margin:5px;
			text-align:center;
			border-bottom:5px solid #933;
		}
		.menu a:hover{
			color:#0cf;
			border-bottom:5px solid #0cf;
		}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li><a href="#">ANASAYFA</a></li>
			<li><a href="#">PROJELER</a></li>
			<li><a href="#">REFERANSLAR</a></li>
			<li><a href="#">HAKKINDA</a></li>
			<li><a href="#">İLETİŞİM</a></li>
		</ul>
	</body>
</html>

<html>

<head>

*{margin:0; padding:0;}

.menu {list-style:none;}

.menu li {float:left;}

.menu a{

text-decoration:none;

display:inline-block;

width:150px;

color:#933;

font-weight:bold;

margin:5px;

text-align:center;

border-bottom:5px solid #933;

}

.menu a:hover{

color:#0cf;

border-bottom:5px solid #0cf;

}

</style>

</head>

<body>

<li><a href="#">ANASAYFA</a></li>

<li><a href="#">PROJELER</a></li>

<li><a href="#">REFERANSLAR</a></li>

<li><a href="#">HAKKINDA</a></li>

<li><a href="#">İLETİŞİM</a></li>

</ul>

</body>

</html>

Örnek 6:

Burak KILIÇ tarafından tasarlanmıştır. Katkılarından dolayı teşekkür ederiz.

<html>
	<head>
		<style type="text/css">
			body 
			{
				background-color:white;
			}
			
			.menu
			{
				list-style:none;
				margin:0; padding:0;
			}
			
			.menu li
			{
				float:left;
				margin:5px;
				float:left;
			}
			
			.menu a
			{
				text-decoration:none;
				color:#FF9800;
				font-weight:bold;
				border-top:5px solid #FF9800;
				border-bottom:5px solid #FB8C00;
				border-left:5px solid #F57C00;
				border-right:5px solid #EF6C00;
				background-color:gray;
				
				width:150px;
				display:block;
				line-height:25px;
				padding:5px;
				text-align:center;
				text-shadow:5px 3px 1px #424242;
			}
			
			.menu a:hover
			{
				color:cyan;
				
			}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li><a href="anasayfa.html">ANASAYFA</a></li>
			<li><a href="projeler.html">PROJELER</a></li>
			<li><a href="referanslar.html">REFERANSLAR</a></li>
			<li><a href="hakkinda.html">HAKKINDA</a></li>
			<li><a href="iletisim.html">İLETİŞİM</a></li>
		</ul>
	</body>
</html>

<html>

<head>

body

{

background-color:white;

}

.menu

{

list-style:none;

margin:0; padding:0;

}

.menu li

{

float:left;

margin:5px;

float:left;

}

.menu a

{

text-decoration:none;

color:#FF9800;

font-weight:bold;

border-top:5px solid #FF9800;

border-bottom:5px solid #FB8C00;

border-left:5px solid #F57C00;

border-right:5px solid #EF6C00;

background-color:gray;

width:150px;

display:block;

line-height:25px;

padding:5px;

text-align:center;

text-shadow:5px 3px 1px #424242;

}

.menu a:hover

{

color:cyan;

}

</style>

</head>

<body>

<li><a href="anasayfa.html">ANASAYFA</a></li>

<li><a href="projeler.html">PROJELER</a></li>

<li><a href="referanslar.html">REFERANSLAR</a></li>

<li><a href="hakkinda.html">HAKKINDA</a></li>

<li><a href="iletisim.html">İLETİŞİM</a></li>

</ul>

</body>

</html>

Örnek 7:

Melih AY tarafından tasarlanmıştır. Katkılarından dolayı teşekkür ederiz.

<html>
	<head>
		<style type="text/css">	
			body
			{
				background-color:white;
			}
			.menu
			{
				list-style:none;
				margin:"0"; padding:0;
			}
			.menu li
			{
				float:left;
				margin:0px;
			}
			.menu a
			{
				text-align:center;
				background:black;
				border-bottom:1px red solid;
				border-left:1px white solid;
				text-decoration:none;
				color:white;
				width:100;
				display:block;
			}
			.menu a:hover
			{
				background: linear-gradient(black,red);
				color:white;
				border-bottom:1px solid red;
				
			}
			
		</style>
	</head> 
	<body>
		<ul class="menu">
			<li><a href="#">Anasayfa</a></li>
			<li><a href="#">Albüm</a></li>
			<li><a href="#">Referanslar</a></li>
			<li><a href="#">İletişim</a></li>
			<li><a href="#">Hakkında</a></li>
		</ul>
	</body>
</html>

<html>

<head>

body

{

background-color:white;

}

.menu

{

list-style:none;

margin:"0"; padding:0;

}

.menu li

{

float:left;

margin:0px;

}

.menu a

{

text-align:center;

background:black;

border-bottom:1px red solid;

border-left:1px white solid;

text-decoration:none;

color:white;

width:100;

display:block;

}

.menu a:hover

{

background: linear-gradient(black,red);

color:white;

border-bottom:1px solid red;

}

</style>

</head>

<body>

<li><a href="#">Anasayfa</a></li>

<li><a href="#">Albüm</a></li>

<li><a href="#">Referanslar</a></li>

<li><a href="#">İletişim</a></li>

<li><a href="#">Hakkında</a></li>

</ul>

</body>

</html>

Örnek 8:

Semih MANDALI tarafından tasarlanmıştır. Katkılarından dolayı teşekkür ederiz.

<html>
	<head>
		<style type="text/css">
		.pembe a
		{
			
			background:#EB4E7E;
		}
		.mavi a
		{
			background:#53BFE2;
		}
		.sari a
		{
			background:#FED051;
		}
		.mor a
		{
			background:#DF6DC2;
		}
		.yesil a
		{
			background:#33CC00;
		}
		.menu
		{
			list-style:none;
			margin:0; padding:0;
		}
		
		.menu li
		{
			
			margin:5px;
		}
		.menu a 
		{
			font-size:20px;
			text-decoration:none;  
			 font-weight:bolder;
			padding:5px; 
			line-height:25px;
			text-align:center;
			padding:5px;
			color:white;
			border:1px solid black;
			width:240px;
			display:block;
		}
		
		.menu a:hover
		{
			border-top:3px dashed #EB4E7E;
			border-right:3px dashed #53BFE2 ;
			border-left:3px dashed #FED051;
			border-bottom:3px dashed #DF6DC2;
		}
		
		</style>
	</head>
	<body>
		<ul class="menu" >
			<li class="pembe"><a href="ANASAYFA.html">ANA SAYFA</a></li>
			<li class="mavi"><a href="PROJELER.html">CSHARP</a></li>
			<li class="sari"><a href="referanslar.html">WEB TASARIM</a></li>
			<li class="mor"><a href="HAKKINDA.html">BTT</a></li>
			<li class="yesil"><a href="İLETİŞİM.html">İLETİŞİM</a></li>
		</ul>
	</body>
</html>

<html>

<head>

.pembe a

{

background:#EB4E7E;

}

.mavi a

{

background:#53BFE2;

}

.sari a

{

background:#FED051;

}

.mor a

{

background:#DF6DC2;

}

.yesil a

{

background:#33CC00;

}

.menu

{

list-style:none;

margin:0; padding:0;

}

.menu li

{

margin:5px;

}

.menu a

{

font-size:20px;

text-decoration:none;

font-weight:bolder;

padding:5px;

line-height:25px;

text-align:center;

padding:5px;

color:white;

border:1px solid black;

width:240px;

display:block;

}

.menu a:hover

{

border-top:3px dashed #EB4E7E;

border-right:3px dashed #53BFE2 ;

border-left:3px dashed #FED051;

border-bottom:3px dashed #DF6DC2;

}

</style>

</head>

<body>

<li class="pembe"><a href="ANASAYFA.html">ANA SAYFA</a></li>

<li class="mavi"><a href="PROJELER.html">CSHARP</a></li>

<li class="sari"><a href="referanslar.html">WEB TASARIM</a></li>

<li class="yesil"><a href="İLETİŞİM.html">İLETİŞİM</a></li>

</ul>

</body>

</html>

Örnek 9:

Şahin GEVREK tarafından tasarlanmıştır. Katkılarından dolayı teşekkür ederiz.

<html>
	<head>
		<style type="text/css">
			body
			{
				background-color:f0f8ff;
			}
			.menü
			{
				list-style:none;
				margin:0;padding:0;
			}
			.menü li
			{
				margin:5px;
			}
			.menü a
			{
				text-decoration:none;
				color:yellow;
				font-weight:bold;
				border:1px solid yellow;
				border-left:5px solid yellow;
				border-right:5px solid yellow;
				border-top:5px solid yellow;
				background:gray;
				width:150px;
				display:block;
				padding:5px;
				line-height:25px;
			}
			.menü a:hover
			{
				margin-left:5px;
				border-left:5px solid #606;
				border-right:5px solid #606;
				border-top:5px solid #606;
				color:#606;
				text-shadow:5px 4px 1px #dddddd;
			}
			
		</style>
	</head>
	<body>
		<ul class="menü">
			<li><a href="#">ANASAYFA</a></li>
			<li><a href="#">PROJELER</a></li>
			<li><a href="#">REFERANSLAR</a></li>
			<li><a href="#">HAKKINDA</a></li>
			<li><a href="#">İLETİŞİM</a></li>
	</body>
</html>

<html>

<head>

body

{

background-color:f0f8ff;

}

.menü

{

list-style:none;

margin:0;padding:0;

}

.menü li

{

margin:5px;

}

.menü a

{

text-decoration:none;

color:yellow;

font-weight:bold;

border:1px solid yellow;

border-left:5px solid yellow;

border-right:5px solid yellow;

border-top:5px solid yellow;

background:gray;

width:150px;

display:block;

padding:5px;

line-height:25px;

}

.menü a:hover

{

margin-left:5px;

border-left:5px solid #606;

border-right:5px solid #606;

border-top:5px solid #606;

color:#606;

text-shadow:5px 4px 1px #dddddd;

}

</style>

</head>

<body>

<li><a href="#">ANASAYFA</a></li>

<li><a href="#">PROJELER</a></li>

<li><a href="#">REFERANSLAR</a></li>

<li><a href="#">HAKKINDA</a></li>

<li><a href="#">İLETİŞİM</a></li>

</body>

</html>

Örnek 10:

Rabia AKTAŞ tarafından tasarlanmıştır. Katkılarından dolayı teşekkür ederiz.

<html>
	<head>
		<style type="text/css">
				body
				{
					background-color:white;
				}
				.menu
				{
					list-style:none;
					margin:0; 
					padding:0;
				}
				.menu li
				{
					margin:5px;
				}
				.menu a
				{
					text-decoration:none;
					color:grey;
					font-family:verdana;
					font-weight:180px;
					border:1px solid #609;
					border-bottom:5px solid purple;
					background:#60040;
					width:120px;
					display:block;
					padding:5px;
					line-height:25px;
					text-align:center;
				}
				.menu a:hover
				{
					margin-top:5px;
					border-bottom:5px solid #c08000;
					color:#4060ff;
					margin-left:20px;
					text-decoration:line-through;
					font-style:italic;
				}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li><a href="#">ANASAYFA</a></li>
			<li><a href="#">HTML</a></li>
			<li><a href="#">CSS</a></li>
			<li><a href="#">PHP</a></li>
			<li><a href="#">JAVASCRİPT</a></li>
		</ul>			
	</body>
</html>

<html>

<head>

body

{

background-color:white;

}

.menu

{

list-style:none;

margin:0;

padding:0;

}

.menu li

{

margin:5px;

}

.menu a

{

text-decoration:none;

color:grey;

font-family:verdana;

font-weight:180px;

border:1px solid #609;

border-bottom:5px solid purple;

background:#60040;

width:120px;

display:block;

padding:5px;

line-height:25px;

text-align:center;

}

.menu a:hover

{

margin-top:5px;

border-bottom:5px solid #c08000;

color:#4060ff;

margin-left:20px;

text-decoration:line-through;

font-style:italic;

}

</style>

</head>

<body>

<li><a href="#">ANASAYFA</a></li>

<li><a href="#">JAVASCRİPT</a></li>

</ul>

</body>

</html>

Örnek 11:

Vahdet DEVECİ tarafından tasarlanmıştır. Katkılarından dolayı teşekkür ederiz.

<html>
	<head>
		<style type="text/css">
			.body
			{
				background-color:#yellow;
			}
			.menu
			{
				list-style:none;
				margin:0 padding:0;
				
			}
			.menu li
			{
				margin:4px;
				padding:4px;
			}
			.menu a
			{
				text-decoration:none;
				border-bottom:5px solid #4c4c4c;
				color:#4c4c4c;
				text-align:center;
				width:150px;
				display:block;
				padding:10px;
				font-weight:bolder;
			}
			.menu a:hover
			{
				color:#0cf;
				border-bottom:5px solid #0cf;	
			}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li><a href="#">ANASAYFA</a></li>
			<li><a href="#">İLETİŞİM</a></li>
			<li><a href="#">PROJELER</a></li>
			<li><a href="#">REFERANS</a></li>
			<li><a href="#">HAKKINDA</a></li>
		</ul>	
	</body>
</html>

<html>

<head>

.body

{

background-color:#yellow;

}

.menu

{

list-style:none;

margin:0 padding:0;

}

.menu li

{

margin:4px;

padding:4px;

}

.menu a

{

text-decoration:none;

border-bottom:5px solid #4c4c4c;

color:#4c4c4c;

text-align:center;

width:150px;

display:block;

padding:10px;

font-weight:bolder;

}

.menu a:hover

{

color:#0cf;

border-bottom:5px solid #0cf;

}

</style>

</head>

<body>

<li><a href="#">ANASAYFA</a></li>

<li><a href="#">İLETİŞİM</a></li>

<li><a href="#">PROJELER</a></li>

<li><a href="#">REFERANS</a></li>

<li><a href="#">HAKKINDA</a></li>

</ul>

</body>

</html>

HTML – CSS ile Dikey ve Yatay Menü Örnekleri

Dikey Menü Örnekleri

Örnek 1:

Örnek 2:

Yatay Menü Örnekleri

Örnek 3:

Örnek 4:

Örnek 5:

Örnek 6:

Örnek 7:

Örnek 8:

Örnek 9:

Örnek 10:

Örnek 11:

Seçil ŞEKERCİ HÜSEM

Bir yanıt yazın Yanıtı iptal et

Dikey Menü Örnekleri

Örnek 1:

Örnek 2:

Yatay Menü Örnekleri

Örnek 3:

Örnek 4:

Örnek 5:

Örnek 6:

Örnek 7:

Örnek 8:

Örnek 9:

Örnek 10:

Örnek 11:

Alakalı Yazılar

HTML – CSS ile Tablo Biçimlendirme

HTML – CSS ile Yatay Açılır Menü Yapımı

HTML – CSS ile Dikey Açılır Menü Yapımı

Seçil ŞEKERCİ HÜSEM

Bir yanıt yazın Yanıtı iptal et