Bilgi Depom - css ust menu kodlari

css ust menu kodlari

Css Üst Menü Kodları

KOD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html> <head> <FCK:meta http-equiv="Content-Type"  content="text/html; charset=iso-8859-1" />  <title>menu012</title> <style type="text/css"> body {  margin:0; padding:0;} #menu012container{ height:24px; background:  #b979e4; display:block; padding:30px 0 0 15px;  background-image:url(http://img231.imageshack.us/img231/6096/bkgcontec4.gif);  background-repeat:repeat-x; background-position:bottom;} #menu012{  margin-left:auto; margin-right:auto; width:500px; font-size:12px;  font-weight:bold; font-family: Tahoma, Verdana, Arial, Helvetica;  position:relative; display:block; height:24px; } #menu012 ul{ margin:0;  padding:0; list-style-type:none; width:auto;} #menu012 ul li{  display:block; float:left; margin:0 1px 0 0;} #menu012 ul li a{  display:block; float:left; color: #ffffff; text-decoration:none;  padding:5px 20px 0 20px; height:24px;  background:url(http://img231.imageshack.us/img231/5995/bkgoffnj6.gif)  no-repeat top left;} #menu012 ul li a:hover{ color:#fff;  background:url(http://img231.imageshack.us/img231/9374/hoverjo3.gif)  no-repeat top right;} #menu012 ul li a.current,#menu011 ul li  a.current:hover{ color:#000; background:#fff;  background-image:url(http://img231.imageshack.us/img231/1327/bkgcurrentii8.gif);  background-repeat:repeat-x; background-position:top;} </style>  </head> <body> <div id="menu012container"> <div  id="menu012"> <ul> <li><a href="ADRES"  _fcksavedurl="ADRES">Link adı</a></li> <li><a  href="ADRES" _fcksavedurl="ADRES" class="current">Link  adı</a></li> <li><a href="ADRES"  _fcksavedurl="ADRES">Link adı</a></li> <li><a  href="ADRES" _fcksavedurl="ADRES">Link adı</a></li>  <li><a href="ADRES" _fcksavedurl="ADRES">Link  adı</a></li> </ul> </div> </div>  </body> </html>

KOD:

<style type="text/css"> /*Credits:  Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/  */ .bevelmenu{ font: bold 13px arial; padding: 6px 0; margin: 0; width:  100%; background-color: #FFF2BF; text-align: left; /*set value to  "right" for example to align menu to the right of page*/ } .bevelmenu  li{ list-style: none; display: inline; } .bevelmenu li a{ padding: 3px  0.5em; text-decoration: none; color: black; background-color: #FFF2BF;  border: 2px solid #FFF2BF; } .bevelmenu li a:hover{ color: black;  background-color: #FFE271; border-style: outset; } html>body  .bevelmenu li a:active{ /* Apply mousedown effect only to NON IE  browsers */ border-style: inset; } </style> <ul  class="bevelmenu"> <li><a href="ADRES"  _fcksavedurl="ADRES">Link adı</a></li> <li><a  href="ADRES" _fcksavedurl="ADRES">Link adı</a></li>  <li><a href="ADRES" _fcksavedurl="ADRES">Link  adı</a></li> <li><a href="ADRES"  _fcksavedurl="ADRES">Link adı</a></li> <li><a  href="ADRES" _fcksavedurl="ADRES">Link adı</a></li>  </ul>

KOD:

<style type="text/css"> /*Credits:  Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/  */ #vdividermenu ul{ margin: 0; padding: 0; margin-bottom: 1em; float:  left; font: bold 100% Tohoma; width: 100%; border: 1px solid #625e00;  background-color: #f9ff91; } * html #vdividermenu ul{ /*IE only rule,  reduce menu width*/ width: 99%; } #vdividermenu ul li{ display: inline; }  #vdividermenu ul li a{ float: left; color: black; padding: 2px 12px;  text-decoration: none; background: transparent  url(http://www.dynamicdrive.com/cssexamples/media/vertical.gif) center  right no-repeat; } #vdividermenu ul li a:visited{ color: black; }  #vdividermenu ul li a:hover{ color: black; background-color: #ffe84f; }  </style> <div id="vdividermenu"> <ul> <li><a  href="ADRES" _fcksavedurl="ADRES" title="Home">Link  adı</a></li> <li><a href="ADRES"  _fcksavedurl="ADRES" title="CSS Examples">Link  adı</a></li> <li><a href="ADRES"  _fcksavedurl="ADRES" title="New">Link adı</a></li> <li  id="current"><a href="ADRES" _fcksavedurl="ADRES"  title="Revised">Link adı</a></li> <li><a  href="ADRES" _fcksavedurl="ADRES" title="Tools">Link  adı</a></li> <li><a href="ADRES"  _fcksavedurl="ADRES" title="DHTML Forums">Link  adı</a></li> </ul> </div>

KOD:

<style type="text/css"> /*Credits:  Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/  */ .ubercolortabs{ padding: 0; width: 100%; overflow: hidden;  background: transparent; } .ubercolortabs ul{ font:11px Verdana,Arial,  Verdana, sans-serif; margin: 0; padding: 0; list-style: none; }  .ubercolortabs li{ display: inline; margin: 0 2px 0 0; padding: 0;  text-transform: uppercase; } .ubercolortabs a{ float: left; color:  white; background: #000000 url(media/roundleft.gif) no-repeat left top;  /*default background color of tabs, left corner image*/ margin: 0 2px 0  0; padding: 0 0 1px 3px; text-decoration: none; letter-spacing: 1px; }  .ubercolortabs a span{ float: left; display: block; background:  transparent url(media/roundright.gif) no-repeat right top; /*right  corner image*/ padding: 7px 9px 3px 6px; cursor: pointer; }  .ubercolortabs a span{ float: none; } .ubercolortabs a:hover,  .ubercolortabs li.selected a{ background-color: #cccccc; /*background  color of tabs onMouseover*/ color: blue; } .ubercolortabs a:hover span{  background-color: transparent; } .ubercolordivider{ /*CSS for horizontal  line.*/ clear: both; padding: 0; width: 100%; height: 5px; line-height:  5px; background: #000000; /*background color of horizontal line*/  border-top: 1px solid #ff0000; /*Remove this to remove border between  bar and tabs*/ } </style> <div class="ubercolortabs">  <ul> <li><a href="http://www.dynamicdrive.com"  _fcksavedurl="http://www.dynamicdrive.com"  _fcksavedurl="http://www.dynamicdrive.com" style="margin-left:  12px"><span>Home</span></a></li>  <li><a href="http://www.dynamicdrive.com/new.htm"  _fcksavedurl="http://www.dynamicdrive.com/new.htm"  _fcksavedurl="http://www.dynamicdrive.com/new.htm"><span>New</span></a></li>  <li class="selected"><a  href="http://www.dynamicdrive.com/revised.htm"  _fcksavedurl="http://www.dynamicdrive.com/revised.htm"  _fcksavedurl="http://www.dynamicdrive.com/revised.htm"><span>Revised</span></a></li>  <li><a href="http://tools.dynamicdrive.com"  _fcksavedurl="http://tools.dynamicdrive.com"  _fcksavedurl="http://tools.dynamicdrive.com"><span>Tools</span></a></li>  <li><a href="http://www.dynamicdrive.com/forums/"  _fcksavedurl="http://www.dynamicdrive.com/forums/"  _fcksavedurl="http://www.dynamicdrive.com/forums/"><span>Forums</span></a></li>  </ul> </div> <div class="ubercolordivider">  </div>

KOD:

<style type="text/css"> /*Credits: Dynamic  Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */  .ddoverlap{ border-bottom: 1px solid #bbb8a9; } .ddoverlap ul{ padding:  0; margin: 0; font: bold 90% default; list-style-type: none; }  .ddoverlap li{ display: inline; margin: 0; } .ddoverlap li a{ padding:  3px 7px; text-decoration: none; padding-right: 32px; /*extra right  padding to account for curved right edge of tab image*/ color: blue;  background: transparent  url(http://img687.imageshack.us/img687/5209/kodbanksrighttabdefault.gif)  100% 1px no-repeat; /*give illusion of shifting 1px down vertically*/  border-left: 1px solid #dbdbd5; position: relative; display: block;  float: left; margin-left: -20px; /*shift tabs 20px to the left so they  overlap*/ left: 20px; } .ddoverlap li a:visited{ color: blue; }  .ddoverlap li a:hover{ text-decoration: underline; } .ddoverlap  li.selected a{ /*selected tab style*/ color: black; z-index: 100;  /*higher z-index so selected tab is topmost*/ top: 1px; /*Shift tab 1px  down so the border beneath it is covered*/ background: transparent  url(http://img14.imageshack.us/img14/766/kodbanksrighttabselecte.gif)  100% 0 no-repeat; } .ddoverlap li.selected a:hover{ text-decoration:  none; } </style>  <div class="ddoverlap"> <ul>  <li><a  href="http://www.dynamicdrive.com">Home</a></li>  <li><a  href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>  <li class="selected"><a  href="http://www.dynamicdrive.com/style/">CSS</a></li>  <li><a  href="http://www.cssdrive.com">Gallery</a></li>  <li><a  href="http://www.javascriptkit.com">JavaScript</a></li>  <li><a  href="http://www.codingforums.com">Forums</a></li>  </ul> <br style="clear: left" />  </div>