Sunday, December 11, 2016

Yorum yok

üst menü kodları


üst menü eklentisi


 birbirinden şık ve kullanışlı menü kodları. Sadece html kod ile kullanılan bu menü kodlarını blogunuza ekleye bilirsiniz.


(nasıl eklerim?

önizleme                 Mavi üst menü



 html kod
<style type="text/css"> *{margin:0; padding:0} body{margin:0; padding:0; font: 11px Arial}  /* Blue Menu */  #blue {margin: 100px 0 0 0; background:#46A2D7; color: #fff} #blue #orta{margin:0 auto; width: 768px; } #blue #orta .menu{padding: 15px 0} #blue #orta ul{list-style: none} #blue #orta ul li{display: inline} #blue #orta ul li a{padding: 2px 0 2px 7px; text-decoration: none; color: #164967; outline: none} #blue #orta ul li a strong{padding: 2px 7px 2px 0} #blue #orta ul li a:hover{color: #010507;background: #B5DAEF url(blue/a-bg-left-hover.gif) no-repeat;} #blue #orta ul li a:hover strong{background: url(blue/a-bg-right-hover.gif) top right no-repeat} #blue #orta ul li.this a{background: #fff url(blue/a-bg-left.gif) top left no-repeat; color: #1C5B82} #blue #orta ul li.this a strong{background: url(blue/a-bg-right.gif) right top no-repeat} #blue #orta ul li a:active{background: #7EBEE3 url(blue/a-bg-left-active.gif) top left no-repeat; color: #0E2F43} #blue #orta ul li a:active strong{background: url(blue/a-bg-right-active.gif) top right no-repeat} </style>  <!--[if IE]>
<style type="text/css" media="screen">
#blue #orta ul li a{padding: 0 0 0 7px}
#blue #orta ul li a strong{padding: 2px 7px 2px 0}
</style>
<![endif]--> <body> <div id="blue"><div id="orta"><div class="menu"> <ul> <li class="this"><a href="#" _fcksavedurl="#"><strong>Home</strong></a></li> <li><a href="#" _fcksavedurl="#"><strong>Blog</strong></a></li> <li><a href="#" _fcksavedurl="#"><strong>Project</strong></a></li> <li><a href="#" _fcksavedurl="#"><strong>Downloads</strong></a></li> <li><a href="#" _fcksavedurl="#"><strong>About</strong></a></li> </ul> </div></div></div>
 gri üst menü


<style type="text/css"> *{margin:0; padding:0} body{margin:0; padding:0; font: 11px Arial}/* Gray Menu */  #gray{margin: 30px 0 0 0; background:#7E7E7E; color: #fff} #gray #orta{margin:0 auto; width: 768px; } #gray #orta .menu{padding: 15px 0} #gray #orta ul{list-style: none} #gray #orta ul li{display: inline} #gray #orta ul li a{padding: 2px 0 2px 7px; text-decoration: none; color: #333; outline: none} #gray #orta ul li a strong{padding: 2px 7px 2px 0} #gray #orta ul li.this a{background: #fff url(gray/a-bg-left-gray.gif) top left no-repeat; color: #333} #gray #orta ul li.this a strong{background: url(gray/a-bg-right-gray.gif) right top no-repeat} #gray #orta ul li a:hover{color: #000 ;background: #CBCBCB url(gray/a-bg-left-hover-gray.gif) no-repeat;} #gray #orta ul li a:hover strong{background: url(gray/a-bg-right-hover-gray.gif) top right no-repeat} #gray #orta ul li a:active{background: #A5A5A5 url(gray/a-bg-left-active-gray.gif) top left no-repeat; color: #0E2F43} #gray #orta ul li a:active strong{background: url(gray/a-bg-right-active-gray.gif) top right no-repeat}</style><!--[if IE]>
<style type="text/css" media="screen">
#gray #orta ul li a{padding: 0 0 0 7px}
#gray #orta ul li a strong{padding: 2px 7px 2px 0}
</style>
<![endif]--><div id="gray"><div id="orta"><div class="menu"> <ul> <li><a href="#" _fcksavedurl="#"><strong>Home</strong></a></li> <li class="this"><a href="#" _fcksavedurl="#"><strong>Blog</strong></a></li> <li><a href="#" _fcksavedurl="#"><strong>Project</strong></a></li> <li><a href="#" _fcksavedurl="#"><strong>Downloads</strong></a></li> <li><a href="#" _fcksavedurl="#"><strong>About</strong></a></li> </ul> </div></div></div> 
 akuantik üst menü 


<style type="text/css"> *{margin:0; padding:0} body{margin:0; padding:0; font: 11px Arial}/* Green Menu */  #green{margin: 30px 0 0 0; background:#B4BE8B; color: #fff} #green #orta{margin:0 auto; width: 768px; } #green #orta .menu{padding: 15px 0} #green #orta ul{list-style: none} #green #orta ul li{display: inline} #green #orta ul li a{padding: 2px 0 2px 7px; text-decoration: none; color: #393F23; outline: none} #green #orta ul li a strong{padding: 2px 7px 2px 0} #green #orta ul li.this a{background: #fff url(green/a-bg-left-green.gif) top left no-repeat; color: #333} #green #orta ul li.this a strong{background: url(green/a-bg-right-green.gif) right top no-repeat} #green #orta ul li a:hover{color: #1E2112 ;background: #E1E5D1 url(green/a-bg-left-hover-green.gif) no-repeat;} #green #orta ul li a:hover strong{background: url(green/a-bg-right-hover-green.gif) top right no-repeat} #green #orta ul li a:active{background: #CBD2AE url(green/a-bg-left-active-green.gif) top left no-repeat; color: #0E2F43} #green #orta ul li a:active strong{background: url(green/a-bg-right-active-green.gif) top right no-repeat} </style><!--[if IE]>
<style type="text/css" media="screen">
#green #orta ul li a{padding: 0 0 0 7px}
#green #orta ul li a strong{padding: 2px 7px 2px 0}
</style>
<![endif]--> <div id="green"><div id="orta"><div class="menu"> <ul> <li><a href="#" _fcksavedurl="#"><strong>Home</strong></a></li> <li><a href="#" _fcksavedurl="#"><strong>Blog</strong></a></li> <li class="this"><a href="#" _fcksavedurl="#"><strong>Project</strong></a></li> <li><a href="#" _fcksavedurl="#"><strong>Downloads</strong></a></li> <li><a href="#" _fcksavedurl="#"><strong>About</strong></a></li> </ul> </div></div></div>





<style type="text/css">  /*Credits: CSSpplay */ /*URL: http://www.cssplay.co.uk/menus/pro_15 */ .pro15 {padding:0 0 0 20px; margin:0; list-style:none; height:30px; background:#1841c8 url(pro_15_0.gif);} .pro15 li {float:left;} .pro15 li a {display:block; float:left; height:30px; line-height:30px; background:url(pro_15_0.gif); color:#ddd; text-decoration:none; font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 10px; cursor:pointer; font-size:11px;} .pro15 li a b {float:left; display:block; background:url(pro_15_0.gif) right top; padding:0 16px 0 8px;} .pro15 li.current a {color:#fff; background:url(pro_15_2.gif);} .pro15 li.current a b {background:url(pro_15_2.gif) no-repeat right top;} .pro15 li a:hover {color:#fff; background: url(pro_15_1.gif);} .pro15 li a:hover b {background:url(pro_15_1.gif) no-repeat right top;} .pro15 li.current a:hover {color:#fff; background: url(pro_15_2.gif); cursor:default;} .pro15 li.current a:hover b {background:url(pro_15_2.gif) no-repeat right top;} .pro15 li a em {display:block; float:left; width:16px; height:30px;} .pro15 li a em.home {background:url(home2.gif) no-repeat center center;} .pro15 li a em.calendar {background:url(events.gif) no-repeat center center;} .pro15 li a em.camera {background:url(camera.gif) no-repeat center center;} .pro15 li a em.find {background:url(find.gif) no-repeat center center;} .pro15 li a em.contact {background:url(contact.gif) no-repeat center center;} .pro15 li a em.search {background:url(search.gif) no-repeat center center;} .pro15 li a em.search {background:url(search.gif) no-repeat center center;} .pro15 li a em.search {background:url(search.gif) no-repeat center center;} .pro15 li a em.search {background:url(search.gif) no-repeat center center;}   </style><body>  <ul class="pro15"> <li><a href="http://yazfirlat.tr.gg" _fcksavedurl="http://yazfirlat.tr.gg"><em class="ANA SAYFA"></em><b>ANA SAYFA</b></a></li> <li><a href="LİNK KODU" _fcksavedurl="LİNK KODU"><em class="calendar"></em><b>LİNK İSMİ</b></a></li> <li><a href="LİNK KODU" _fcksavedurl="LİNK KODU"><em class="camera"></em><b>LİNK İSMİ</b></a></li> <li><a href="LİNK KODU" _fcksavedurl="LİNK KODU"><em class="find"></em><b>LİNK İSMİ</b></a></li> <li class="current"><a href="LİNK KODU" _fcksavedurl="LİNK KODU"><em class="contact"></em><b>LİNK İSMİ</b></a></li>   </ul>  </body>

0 yorum:

Post a Comment