HTML - CSS Ile Dikey Ve Yatay Menü Örnekleri | TEKNİK AKIL

Trang chủ » Html Açılır Liste örnekleri » HTML - CSS Ile Dikey Ve Yatay Menü Örnekleri | TEKNİK AKIL

Có thể bạn quan tâm

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

Dikey Menü Örnekleri

Örnek 1:

XHTML <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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<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:5pxsolid#933;border-right:5pxsolid#933;line-height:25px;}.menu a:hover{margin-left:5px;border-left:5pxsolid#004;border-right:5pxsolid#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>

Örnek 2:

XHTML <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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445<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:5pxsolid#933;text-align:center;}.menu a:hover{border-bottom:5pxsolid#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>

Yatay Menü Örnekleri

Örnek 3:

XHTML <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>
123456789101112131415161718192021222324252627282930313233<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>

Örnek 4:

 

XHTML <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>
12345678910111213141516171819202122232425262728293031<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:5pxdashedwhite;}.menu a:hover{color:orange;border:5pxdashedorange;}</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>

Örnek 5:

XHTML <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>
1234567891011121314151617181920212223242526272829303132<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:5pxsolid#933;}.menu a:hover{color:#0cf;border-bottom:5pxsolid#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>

Örnek  6:

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

XHTML <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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<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:5pxsolid#FF9800;border-bottom:5pxsolid#FB8C00;border-left:5pxsolid#F57C00;border-right:5pxsolid#EF6C00;background-color:gray;width:150px;display:block;line-height:25px;padding:5px;text-align:center;text-shadow:5px3px1px#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>

Örnek  7:

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

XHTML <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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<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:1pxredsolid;border-left:1pxwhitesolid;text-decoration:none;color:white;width:100;display:block;}.menu a:hover{background:linear-gradient(black,red);color:white;border-bottom:1pxsolidred;}</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>

Örnek  8:

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

XHTML <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>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970<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:1pxsolidblack;width:240px;display:block;}.menu a:hover{border-top:3pxdashed#EB4E7E;border-right:3pxdashed#53BFE2;border-left:3pxdashed#FED051;border-bottom:3pxdashed#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>

Örnek  9:

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

XHTML <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>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<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:1pxsolidyellow;border-left:5pxsolidyellow;border-right:5pxsolidyellow;border-top:5pxsolidyellow;background:gray;width:150px;display:block;padding:5px;line-height:25px;}.menü a:hover{margin-left:5px;border-left:5pxsolid#606;border-right:5pxsolid#606;border-top:5pxsolid#606;color:#606;text-shadow:5px4px1px#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>

Örnek  10:

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

XHTML <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>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<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:1pxsolid#609;border-bottom:5pxsolidpurple;background:#60040;width:120px;display:block;padding:5px;line-height:25px;text-align:center;}.menu a:hover{margin-top:5px;border-bottom:5pxsolid#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>

Örnek  11:

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

XHTML <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>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546<html><head> <style type="text/css"> .body{background-color:#yellow;}.menu{list-style:none;margin:0padding:0;}.menu li{margin:4px;padding:4px;}.menu a{text-decoration:none;border-bottom:5pxsolid#4c4c4c;color:#4c4c4c;text-align:center;width:150px;display:block;padding:10px;font-weight:bolder;}.menu a:hover{color:#0cf;border-bottom:5pxsolid#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>

Từ khóa » Html Açılır Liste örnekleri