KODBANKS ® - Menü

Menü

Üst yatay menü kodu:

<style type="text/css">  #MainMenu {    width:100%;    height:28px;    background: url('http://img138.imageshack.us/img138/4466/kodbanksbmid040.jpg');    margin:0;    border:0px none; } #tab {    margin:0;    top:0; } #tab ul {    margin:0;    padding:0;    list-style:none;    float:left; } #tab li { display:inline;    float:left;    margin:0 0 0 0 ;    padding:0; } #tab a {    background:#ff0000 url('http://img196.imageshack.us/img196/5610/kodbanksbright040e.gif') no-repeat right top;    margin:0;    padding:0;    text-decoration:none;    border:0px none;    display:block;    float:left } #tab a span {    display:block;    background:url('http://img194.imageshack.us/img194/4928/kodbanksbleft040.gif') no-repeat left top;    font-family:Arial, Helvetica, sans-serif;    font-size:11;    color:#ff0000;    font-weight:bold;    line-height:38px; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0 } #tab a:hover, #tab li.item_active a {    background-position:right bottom;    border-color:#ff0000; } #tab a:hover span, #tab li.item_active a span {    background-position:left bottom;    color:#ff0000;    font-weight:bold;    font-style:normal;    text-decoration:none; } .dropmenudiv {    position:absolute;    top:0;    float:left;    display:block;    visibility:hidden;    border:0px solid #00ff00;    background: url('http://img138.imageshack.us/img138/4466/kodbanksbmid040.jpg');    color:#ff0000;    z-index:100;    text-decoration:none;    padding:0 } .dropmenudiv ul {    margin:0;    padding:0;    list-style:none; } .dropmenudiv li {    display:inline;    margin:0;    padding:0; } .dropmenudiv a:link, .dropmenudiv a:visited {    width:180px;    margin:0 ;    padding:0;    display:block;    border:0px solid #ff0000;    color:#ff0000;    background:url('http://img194.imageshack.us/img194/4928/kodbanksbleft040.gif') no-repeat left top;    font-weight:bold;    font-style:normal;    text-decoration:none } .dropmenudiv a span {    float:left;    display:block;    line-height:38px;    background:url('http://img196.imageshack.us/img196/5610/kodbanksbright040e.gif') no-repeat right top;    font-family:Arial, Helvetica, sans-serif;    font-size:11;    color:#ff0000; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0 } .dropmenudiv a span {    float:none; } .dropmenudiv a:hover {    border:0px solid #ff0000;    background-position: left bottom;    font-weight:bold;    font-style:normal;    text-decoration:none;    color:#ff0000 } .dropmenudiv a:hover span {    background-position:right bottom;    color:#ff0000;    font-weight:bold; }  </style>     <script type="text/javascript" src="http://h1.ripway.com/kristaldunya/chrome.js"></script> <style> #MainMenu {    width:100%;    height:38px;    background: url("http://img138.imageshack.us/img138/4466/kodbanksbmid040.jpg");    margin:0;    border:0; } #tab {    margin:0;    top:0; } #tab ul {    margin:0;    padding:0;    list-style:none;    float:left; } #tab li { display:inline;    float:left;    margin:0 0 0 0 ;    padding:0; } #tab a {    background:#000000 url("http://img196.imageshack.us/img196/5610/kodbanksbright040e.gif") no-repeat right top;    margin:0;    padding:0;    text-decoration:none;    border:0;    display:block;    float:left; } #tab a span {    display:block;    background:url("http://img196.imageshack.us/img196/4928/kodbanksbleft040.gif") no-repeat left top;    padding:0 15px 0 15px;    font-family:Arial, Helvetica, sans-serif;    font-size:11;    color:#000000;    font-weight:bold;    line-height:38px; } #tab a:hover,#tab li.item_active a {    background-position:right bottom;    border-color:#ff0000; } #tab a:hover span,#tab li.item_active a span {    background-position:left bottom;    color:#ffffff;    font-weight:bold;    font-style:normal;    text-decoration:none; } .dropmenudiv {    position:absolute;    top:0;    float:left;    display:block;    visibility:hidden;    border:0 solid #330066;    background: url("http://img138.imageshack.us/img138/4466/kodbanksbmid040.jpg");    color:#ff0000;    z-index:100;    text-decoration:none;    padding:0; } .dropmenudiv ul {    margin:0;    padding:0;    list-style:none; } .dropmenudiv li {    display:inline;    margin:0;    padding:0; } .dropmenudiv a:link, .dropmenudiv a:visited {    width:180px;    margin:0 0 0 0 ;    padding:0;    display:block;    border:0 solid #ff0000;    color:#ff0000;    background:url("http://img196.imageshack.us/img196/4928/kodbanksbleft040.gif") no-repeat left top;    font-weight:bold;    font-style:normal;    text-decoration:none; } .dropmenudiv a span {    float:left;    display:block;    line-height:38px;    background:url("http://img196.imageshack.us/img196/5610/kodbanksbright040e.gif") no-repeat right top;    padding:0 15px 0 15px;    font-family:Arial, Helvetica, sans-serif;    font-size:11;    color:#ff0000; } .dropmenudiv a span {    float:none; } .dropmenudiv a:hover {    border:0 solid #ff0000;    background-position:left bottom;    font-weight:bold;    font-style:normal;    text-decoration:none;    color:#ff0000; } .dropmenudiv a:hover span {    background-position:right bottom;    color:#ff0000;    font-weight:bold; }  </style>    <div id="MainMenu">    <div id="tab">       <ul>          <li><a target="_blank" href="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ"><span>LİNK ADI</span></a></li>          <li><a target="_blank" href="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ"><span>LİNK ADI</span></a></li>          <li><a target="_blank" href="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ"><span>LİNK ADI</span></a></li>          <li><a target="_blank" href="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ"><span>LİNK ADI</span></a></li>          <li><a target="_blank" href="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ" _fcksavedurl="LİNK ADRESİ"><span>LİNK ADI</span></a></li>       </ul>    </div> </div>

KOD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  /> <title>Menu</title> <link href="http://www.yourjavascript.com/50101115361/style.css.js" rel="stylesheet" type="text/css" /> </head> <body> <div class="nav-container-outer"> <img src="http://img708.imageshack.us/img708/1185/navbgl.jpg" _fcksavedurl="http://img708.imageshack.us/img708/1185/navbgl.jpg" alt="" class="float-left" /> <img src="http://img714.imageshack.us/img714/294/navbgr.jpg" _fcksavedurl="http://img714.imageshack.us/img714/294/navbgr.jpg" alt="" class="float-right" /> <ul id="nav-container" class="nav-container"> <li><a class="item-primary" href="#" _fcksavedurl="#">HOME</a> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#" _fcksavedurl="#">Products</a> <ul style="width:150px;"> <li><a href="#" _fcksavedurl="#">SoftwarePlus</a></li> <li><a href="#" _fcksavedurl="#">MagicDriver</a></li> <li><a href="#" _fcksavedurl="#">GreatFX</a></li> <li><a href="#" _fcksavedurl="#">SampleSoft</a></li> <li><a href="#" _fcksavedurl="#">UnDoIt</a></li> <li><a href="#" _fcksavedurl="#">100% CSS Menu</a></li> <li><a href="#;" _fcksavedurl="#;">With Cross-Browser</a></li> <li><a href="#;" _fcksavedurl="#;">Dropdowns</a></li> <li><a href="#;" _fcksavedurl="#;">Absolutely NO Javascript</a></li> <li><a href="#;" _fcksavedurl="#;">Being Used On</a></li> <li><a href="#;" _fcksavedurl="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;" _fcksavedurl="#;">Example Of a Divider</a></li> <li><a href="#;" _fcksavedurl="#;">With No Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#" _fcksavedurl="#">Quality</a> <ul style="width:150px;"> <li><a href="#" _fcksavedurl="#">SoftwarePlus</a></li> <li><a href="#" _fcksavedurl="#">MagicDriver</a></li> <li><a href="#" _fcksavedurl="#">GreatFX</a></li> <li><a href="#" _fcksavedurl="#">SampleSoft</a></li> <li><a href="#" _fcksavedurl="#">UnDoIt</a></li> <li><a href="#" _fcksavedurl="#">100% CSS Menu</a></li> <li><a href="#;" _fcksavedurl="#;">With Cross-Browser</a></li> <li><a href="#;" _fcksavedurl="#;">Dropdowns</a></li> <li><a href="#;" _fcksavedurl="#;">Absolutely NO Javascript</a></li> <li><a href="#;" _fcksavedurl="#;">Being Used On</a></li> <li><a href="#;" _fcksavedurl="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;" _fcksavedurl="#;">Example Of a Divider</a></li> <li><a href="#;" _fcksavedurl="#;">With No Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#" _fcksavedurl="#">Services</a> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li> <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li> <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#" _fcksavedurl="#">Once Again...</a></li> <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li> <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li> <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;" _fcksavedurl="#;">Very Long Item</a> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li> <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li> <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#" _fcksavedurl="#">Once Again...</a></li> <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li> <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li> <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;" _fcksavedurl="#;">Fully Flexible</a> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li> <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li> <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#" _fcksavedurl="#">Once Again...</a></li> <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li> <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li> <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li> </ul></li> <li class="clear"> </li></ul> </div> </body> </html>

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>

Css Üst menü sayfasına git

KOD:

<center><style type="text/css">  /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */  .bubblewrap{ list-style-type:none; margin:0; padding:0; }  .bubblewrap li{ display:inline; width: 45px; height:40px; }  .bubblewrap li img{ width: 45px; /* width of each image.*/ height: 50px; /* height of each image.*/ border:0; margin-right: 12px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ }  .bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); }  </style>  <ul class="bubblewrap"> <li><a href="#" _fcksavedurl="#"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/icons/books/book01.gif" _fcksavedurl="http://www.quackit.com/pix/web_graphics/free_website_graphics/icons/books/book01.gif" title="Anasayfa" /></a></li> <li><a href="ADRES" _fcksavedurl="ADRES"><img src="http://img693.imageshack.us/img693/208/ata3kodbanks.gif" _fcksavedurl="http://img693.imageshack.us/img693/208/ata3kodbanks.gif" title="Atatürk" /></a></li> <li><a href="Ziyaretci defteri ADRESİ" _fcksavedurl="Ziyaretci defteri ADRESİ"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/icons/books/books12.gif" _fcksavedurl="http://www.quackit.com/pix/web_graphics/free_website_graphics/icons/books/books12.gif" title="Ziyaretci defteri" /></a></li> <li><a href="iletişim ADRES" _fcksavedurl="iletişim ADRES"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/icons/email/envelop1.gif" _fcksavedurl="http://www.quackit.com/pix/web_graphics/free_website_graphics/icons/email/envelop1.gif" title="İletişim" /></a></li> <li><a href="E-MEİL ADRES" _fcksavedurl="E-MEİL ADRES"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/icons/email/email05.gif" _fcksavedurl="http://www.quackit.com/pix/web_graphics/free_website_graphics/icons/email/email05.gif" title="e-meil" /></a></li> </ul>