Güncellog | Güncellikte Son Nokta Anasayfa Anasayfa3 Bedeva-Sitem Oyun Teknoloji Saglik Wordpress Filmler Egitim Oyun Oyna Muzik Dinle Video Yeme-İcme Anasayfa2 250x250 Bannerler bogaz-agrsna-ne-iyi-gelir-bogaz-agrs Cilgin Kopek | Marmaduke 2010 Turkce Dublaj izle pes-2014-full-torrent-indir cssmenuler Wordpress Haber Temasi Guncellog Facebookta Cilt Lekelerinden Kurtulmak icin neler sam tatlisi Yeni sayfanın başlığı Yeni sayfanın başlığıl Şekilli MSN Nickleri Yeni sayfanın başlığıHGF Yeni sayfanın başlığıo cssmenuler CSS MENÜ KODLARI örnek ; html kodu <div id="menu_wrapper" class="grey"> <div class="left"></div> <ul id="menu"> <li><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">Ana Sayfa</a></li> <li class="active"><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">Hakkımızda</a></li> <li><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">Hizmetlerimiz</a></li> <li><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">İletişim</a></li> </ul> </div> css kodu<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(/img/menu/matte/grey.png) no-repeat right;} #menu_wrapper div {float: left; height: 44px; width: 12px; background: url(/img/menu/matte/grey.png) no-repeat left;} </style> örnek ; html kodu <ul class="menu"> <!-- Menu Begin --> <li> <a href="http://www.cssornekleri.com/menu/liste" _fcksavedurl="http://www.cssornekleri.com/menu/liste"> <img src="user.png" _fcksavedurl="user.png" alt="user.png"> <span class="name">Ana Sayfa</span> <span class="description">açıklama alanı gelecek</span> </a> </li> <li> <a href="http://www.cssornekleri.com/menu/liste" _fcksavedurl="http://www.cssornekleri.com/menu/liste"> <img src="comment.png" _fcksavedurl="comment.png" alt="comment.png"> <span class="name">Hakkımızda</span> <span class="description">açıklama alanı gelecek</span> </a> </li> <li> <a href="http://www.cssornekleri.com/menu/liste" _fcksavedurl="http://www.cssornekleri.com/menu/liste"> <img src="print.png" _fcksavedurl="print.png" alt="print.png"> <span class="name">Referanslar</span> <span class="description">açıklama alanı gelecek</span> </a> </li> <li> <a href="http://www.cssornekleri.com/menu/liste" _fcksavedurl="http://www.cssornekleri.com/menu/liste"> <img src="edit.png" _fcksavedurl="edit.png" alt="edit.png"> <span class="name">Hizmetlerimiz</span> <span class="description">açıklama alanı gelecek</span> </a> </li> </ul> <!-- Menu End --> css kodu<style type="text/css"> .menu , .menu ul { width:202px; margin:auto; padding:5px; list-style-type: none; overflow:hidden; border:1px solid #eee; } .menu li { float:left; position:relative; } .menu li img { float:left; margin: 5px 0 0 5px; border:none; } .menu li a .name { float:left; width:166px; margin:0 0 0 5px; font-weight:bold; font-size:0.7em; cursor:pointer; } .menu li a:active, .menu li a:focus { outline:0; } .menu li a .description{ float:left; width:161px; margin:-5px 0 0 5px; font-weight:normal; font-size:0.7em; cursor:pointer; } .menu li a:link, .menu li a:visited { height:35px; font-size:1em; color:#000; text-decoration:none; line-height:20px; border:1px solid #fff; display:block; font-weight:bold; } .menu li a:hover { background:#eee; } </style> örnek ; kodlar ; html kodu <div class="outer"> <div class="menu"> <ul> <li><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">Ana Sayfa</a></li> <li><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">Hakkımızda</a></li> <li><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">Hizmetler</a></li> <li><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">İletişim</a></li> </ul> </div> </div> css kodu#b18211;} örnek ; kod; <html> <head> <style type="text/css"> #maviblokmenu{ border: 1px solid black; border-bottom-width: 0; width: 185px; } #maviblokmenu ul{ margin: 0; padding: 0; list-style-type: none; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } #maviblokmenu li a{ display: block; padding: 3px 0; padding-left: 9px; width: 169px; text-decoration: none; color: white; background-color: #2175dd; border-bottom: 1px solid #90bade; border-left: 7px solid #1958b7; } * html #maviblokmenu li a{ width: 169px; width: 169px; } #maviblokmenu li a:hover { background-color: #000069; border-left-color: #000099; } #maviblokmenu div.menutitle{ color: white; border-bottom: 1px solid black; padding: 1px 0; padding-left: 5px; background-color: black; font: bold 100% 'Trebuchet MS', Arial, sans-serif; }</style> <FCK:meta content="text/html; charset=windows-1254" http-equiv="Content-Type" /> <div id="maviblokmenu" style="width: 171px; height: 315px"> <div class="menutitle">Kodsistemi</div> <ul> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">Ana Sayfa</a></li> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">En Yeniler</a></li> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">Son Düzenlenenler</a></li> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">Forum</a></li> </ul> <div class="menutitle">Birinci bölüm</div> <ul> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">Yatay CSS Menü</a></li> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">Düşey CSS Menü</a></li> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">Resim Effektleri</a></li> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">Form Effektleri</a></li> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">Kutu & Şekiller</a></li> <li><a style="border-bottom-color: black" href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">Link menü</a></li> </ul> <div class="menutitle">İkinci bölüm</div> <ul> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">MyDesign</a></li> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">HazırKod</a></li> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">Aspİndir</a></li> <li><a href="http://kodsistemi.tr.gg" _fcksavedurl="http://kodsistemi.tr.gg">PHP</a></li> <li><a style="border-bottom-color: black" href="http://www.javascriptindir.com" _fcksavedurl="http://www.javascriptindir.com">Üçüncü bölüm</a></li> </ul> </div> <strong><br /> örnek ; kod ; <style type="text/css"> #info {padding-bottom:100px;} #circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:# url(http://img40.xooimage.com/files/6/c/3/background-de5f16.gif) no-repeat;} #circularMenu li {display:block; width:60px; height:60px; position:absolute;} #circularMenu li.home {left:120px; top:4px; background:url(https://img.webme.com/pic/o/osmantalay/mnhme.png) no-repeat center center;} #circularMenu li.chat {left:200px; top:40px; background:url(https://img.webme.com/pic/o/osmantalay/mnhkmda.png) no-repeat center center;} #circularMenu li.upload {left:35px; top:40px; background:url(https://img.webme.com/pic/o/osmantalay/mndftrr.png) no-repeat center center;} #circularMenu li.email {left:230px; top:115px; background:url(https://img.webme.com/pic/o/osmantalay/mnitls.png) no-repeat center center;} #circularMenu li.address {left:5px; top:115px; background:url(https://img.webme.com/pic/o/osmantalay/mnshbt.png) no-repeat center center;} #circularMenu li.shop {left:200px; top:190px; background:url(https://img.webme.com/pic/o/osmantalay/mnstkl.png) no-repeat center center;} #circularMenu li.search {left:35px; top:190px; background:url(https://img.webme.com/pic/o/osmantalay/mnarm.png) no-repeat center center;} #circularMenu li.delivery {left:120px; top:225px; background:url(https://img.webme.com/pic/o/osmantalay/mndftr.png) no-repeat center center;} #circularMenu li a b {display:none;} #circularMenu li a {display:block; width:60px; height:60px; text-align:center;} #circularMenu li a:hover {background: none; text-decoration:none; font-family:Trebuchet MS;} #circularMenu li a:hover b {position:absolute; display:block; width:100px; height:100px; font-size:16px; color:#63352c; background:#;} #circularMenu li a:hover b span {display:block; font-size:12px; color:#888; font-weight:normal; margin-top:15px;} #circularMenu li.home a:hover b {left:-22px; top:100px;} #circularMenu li.chat a:hover b {left:-102px; top:64px;} #circularMenu li.upload a:hover b {left:63px; top:64px;} #circularMenu li.email a:hover b {left:-132px; top:-11px;} #circularMenu li.address a:hover b {left:93px; top:-11px;} #circularMenu li.shop a:hover b {left:-102px; top:-87px;} #circularMenu li.search a:hover b {left:63px; top:-87px;} #circularMenu li.delivery a:hover b {left:-22px; top:-121px;} </style><div id="circularMenu"> <li class="home"><a href="http://osmantalay.tr.gg/Ana-Sayfa.htm" _fcksavedurl="http://osmantalay.tr.gg/Ana-Sayfa.htm" _fcksavedurl="http://osmantalay.tr.gg/Ana-Sayfa.htm"><b>Ana Sayfa<br><span>Ana Sayfa Hakkında</span></b></a></li> <li class="chat"><a href="http://osmantalay.tr.gg/Hakkimda.htm" _fcksavedurl="http://osmantalay.tr.gg/Hakkimda.htm" _fcksavedurl="http://osmantalay.tr.gg/Hakkimda.htm"><b>Hakkımda<br><span>Sayfa Hakkında</span></b></a></li> <li class="email"><a href="http://osmantalay.tr.gg/banaulasin.htm" _fcksavedurl="http://osmantalay.tr.gg/banaulasin.htm" _fcksavedurl="http://osmantalay.tr.gg/banaulasin.htm"><b>Bana Ulaşın<br><span>Sayfa Hakkında</span></b></a></li> <li class="shop"><a href="http://osmantalay.tr.gg/siteniekle.htm" _fcksavedurl="http://osmantalay.tr.gg/siteniekle.htm" _fcksavedurl="http://osmantalay.tr.gg/siteniekle.htm"><b>Toplist<br><span>Sayfa Hakkında</span></b></a></li> <li class="delivery"><a href="http://osmantalay.tr.gg/Defter.htm" _fcksavedurl="http://osmantalay.tr.gg/Defter.htm" _fcksavedurl="http://osmantalay.tr.gg/Defter.htm"><b>Z.Defteri<br><span>Sayfa Hakkında</span></b></a></li> <li class="search"><a href="http://osmantalay.tr.gg/Arama.htm" _fcksavedurl="http://osmantalay.tr.gg/Arama.htm" _fcksavedurl="http://osmantalay.tr.gg/Arama.htm"><b>Arama<br><span>Sayfa Hakkında</span></b></a></li> <li class="address"><a href="http://osmantalay.tr.gg/Sohbet.htm" _fcksavedurl="http://osmantalay.tr.gg/Sohbet.htm" _fcksavedurl="http://osmantalay.tr.gg/Sohbet.htm"><b>Sohbet<br><span>Sayfa Hakkında</span></b></a></li> <li class="upload"><a href="http://osmantalay.tr.gg/bloger.htm" _fcksavedurl="http://osmantalay.tr.gg/bloger.htm" _fcksavedurl="http://osmantalay.tr.gg/bloger.htm"><b>Blogum<br><span>Sayfa Hakkında</span></b></a></li> </div> örnek ; kod ; <style type="text/css"> /*Credits: CSSpplay */ /*URL: http://www.cssplay.co.uk/menus/pro_nine */ .pro9 {padding:0 0 0 32px; margin:0; list-style:none; height:30px; position:relative;} .pro9 li {float:left;} .pro9 li a {display:block; float:left; height:30px; line-height:29px; background:url(https://img.webme.com/pic/o/osmantalay/pro_nine_0a.gif) no-repeat; color:#000; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer;} .pro9 li a b {float:left; display:block; padding:0 12px 0 0; background:url(https://img.webme.com/pic/o/osmantalay/pro_nine_0.gif) right top;} .pro9 li.current a {color:#fff; background:url(https://img.webme.com/pic/o/osmantalay/pro_nine_2a.gif) no-repeat;} .pro9 li.current a b {background:url(https://img.webme.com/pic/o/osmantalay/pro_nine_2.gif) right top;} .pro9 li a:hover {color:#fff; background:url(https://img.webme.com/pic/o/osmantalay/pro_nine_1a.gif) no-repeat;} .pro9 li a:hover b {background:url(https://img.webme.com/pic/o/osmantalay/pro_nine_1.gif) right top;} .pro9 li.current a:hover {color:#fff; background:url(https://img.webme.com/pic/o/osmantalay/pro_nine_2a.gif) no-repeat; cursor:default;} .pro9 li.current a:hover b {background:url(https://img.webme.com/pic/o/osmantalay/pro_nine_2.gif) right top;} </style> </head> <body> <ul class="pro9"> <li><a href="http://erkanseker.tr.gg" _fcksavedurl="http://erkanseker.tr.gg"><b>Home</b></a></li> <li><a href="http://erkanseker.tr.gg" _fcksavedurl="http://erkanseker.tr.gg"><b>Privacy Policy</b></a></li> <li><a href="http://erkanseker.tr.gg" _fcksavedurl="http://erkanseker.tr.gg"><b>Products</b></a></li> <li class="current"><a href="http://erkanseker.tr.gg" _fcksavedurl="http://erkanseker.tr.gg"><b>Where to find us</b></a></li> <li><a href="http://erkanseker.tr.gg" _fcksavedurl="http://erkanseker.tr.gg"><b>Contact us</b></a></li> <li><a href="http://erkanseker.tr.gg" _fcksavedurl="http://erkanseker.tr.gg"><b>Search</b></a></li> </ul> </body> </html> örnek ; <style type="text/css"> /*Credits: CSSpplay */ /*URL: http://www.cssplay.co.uk/menus/pro_eight */ .pro8 {padding:0 0 0 32px; margin:0; list-style:none; height:25px; background:#fff url(https://img.webme.com/pic/o/osmantalay/pro_eight_back.gif); position:relative; border:1px solid #000; border-width:0 1px 1px 1px; border-bottom-color:#444;} .pro8 li {float:left;} .pro8 li a {display:block; float:left; height:25px; line-height:23px; background:url(https://img.webme.com/pic/o/osmantalay/pro_eight_0.gif); color:#fff; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer;} .pro8 li a b {float:left; display:block; padding:0 12px 0 0; background:url(https://img.webme.com/pic/o/osmantalay/pro_eight_0.gif) right top;} .pro8 li.current a {color:#fff; background:url(https://img.webme.com/pic/o/osmantalay/pro_eight_2.gif);} .pro8 li.current a b {background:url(https://img.webme.com/pic/o/osmantalay/pro_eight_2.gif) right top;} .pro8 li a:hover {color:#000; background:url(https://img.webme.com/pic/o/osmantalay/pro_eight_1.gif);} .pro8 li a:hover b {background:url(https://img.webme.com/pic/o/osmantalay/pro_eight_1.gif) right top;} .pro8 li.current a:hover {color:#fff; background:url(https://img.webme.com/pic/o/osmantalay/pro_eight_2.gif); cursor:default;} .pro8 li.current a:hover b {background:url(https://img.webme.com/pic/o/osmantalay/pro_eight_2.gif) right top;} </style> </head> <body> <ul class="pro8"> <li><a href="http://erkanseker.tr.gg" _fcksavedurl="http://erkanseker.tr.gg"><b>Home</b></a></li> <li><a href="http://erkanseker.tr.gg" _fcksavedurl="http://erkanseker.tr.gg"><b>Privacy Policy</b></a></li> <li><a href="http://erkanseker.tr.gg" _fcksavedurl="http://erkanseker.tr.gg"><b>Where to find us</b></a></li> <li><a href="http://erkanseker.tr.gg" _fcksavedurl="http://erkanseker.tr.gg"><b>Contact us</b></a></li> <li><a href="http://erkanseker.tr.gg" _fcksavedurl="http://erkanseker.tr.gg"><b>Search</b></a></li> </ul> </body> </html> örnek ; kod ; <style type="text/css"> /*Credits: CSSpplay */ /*URL: http://www.cssplay.co.uk/menus/pro_six */ #pro6 ul {margin:0 auto; padding:0; list-style:none; display:table; white-space:nowrap; list-style:none; height:35px; position:relative; background:#fff; font-size:11px;} #pro6 li {display:table-cell; margin:0; padding:0;} #pro6 li a {display:block; float:left; height:35px; line-height:30px; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 10px; cursor:pointer; background:url(https://img.webme.com/pic/o/osmantalay/pro_six_0a.gif) no-repeat;} #pro6 li a b {float:left; display:block; padding:0 25px 5px 15px; background:url(https://img.webme.com/pic/o/osmantalay/pro_six_0b.gif) no-repeat right top;} #pro6 li.current a {color:#fff; background:url(https://img.webme.com/pic/o/osmantalay/pro_six_2a.gif) no-repeat;} #pro6 li.current a b {background:url(https://img.webme.com/pic/o/osmantalay/pro_six_2b.gif) no-repeat right top;} #pro6 li a:hover {color:#fff; background: url(https://img.webme.com/pic/o/osmantalay/pro_six_1a.gif) no-repeat;} #pro6 li a:hover b {background:url(https://img.webme.com/pic/o/osmantalay/pro_six_1b.gif) no-repeat right top;} #pro6 li.current a:hover {color:#fff; background: url(https://img.webme.com/pic/o/osmantalay/pro_six_2a.gif) no-repeat; cursor:default;} #pro6 li.current a:hover b {background:url(https://img.webme.com/pic/o/osmantalay/pro_six_2b.gif) no-repeat right top;} </style> <!--[if IE]> <style type="text/css"> #pro6 ul {display:inline-block;} #pro6 ul {display:inline;} #pro6 ul li {float:left;} #pro6 {text-align:center;} </style> <![endif]--> </head> <body> <div id="pro6"> <ul> <li><a href="#nogo" _fcksavedurl="#nogo"><b>Home</b></a></li> <li><a href="#nogo" _fcksavedurl="#nogo"><b>Privacy Policy</b></a></li> <li><a href="#nogo" _fcksavedurl="#nogo"><b>Products</b></a></li> <li><a href="#nogo" _fcksavedurl="#nogo"><b>Where to find us</b></a></li> <li class="current"><a href="#nogo" _fcksavedurl="#nogo"><b>Contact us</b></a></li> <li><a href="#nogo" _fcksavedurl="#nogo"><b>Search</b></a></li> </ul> </div> </body> </html>