KODBANKS ®

css üst menüler

HOME
Products
Quality
Services
- Title For Links
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
- Title After Divider
- Once Again...
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
Very Long Item
- Title For Links
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
- Title After Divider
- Once Again...
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
Fully Flexible
- Title For Links
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
- Title After Divider
- Once Again...
- These Links Still Appear
- Just Like The Others
- Even When Under A Title

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/11320183460/Kodbanks-siyah-menu1.js" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div class="nav-container-outer"> 
<img src="http://img827.imageshack.us/img827/3807/kodbanksnavbgl.jpg" _fcksavedurl="http://img827.imageshack.us/img827/3807/kodbanksnavbgl.jpg" alt="" class="float-left" /> 
<img src="http://img837.imageshack.us/img837/20/kodbanksnavbgr.jpg" _fcksavedurl="http://img837.imageshack.us/img837/20/kodbanksnavbgr.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>

Aşağıdaki css üst menü renklerini siz değişirsiniz,ben renkleri daha iyi anlaşılması için abartılı yaptım.. #ff0000 :KIRMIZI - #00ff00 :YEŞİL - border: 10px :gri border bunu 1 veya 2 yapın

KOD:

KOD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=UTF-8"  />
<title> Stu Nicholls | CSSplay | Professional series #1</title>
<style type="text/css">
/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_one */
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(http://img511.imageshack.us/img511/4086/button1yh5.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(http://img511.imageshack.us/img511/6769/button3bo1.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(http://img511.imageshack.us/img511/3755/button2zg8.gif);}
.menu1 li a:hover b {background:url(http://img511.imageshack.us/img511/3755/button2zg8.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(http://img511.imageshack.us/img511/6769/button3bo1.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}
</style>
</head>
<body>
<ul class="menu1">
<li><a href="ADRES" _fcksavedurl="ADRES"><b>Link adı</b></a></li>
<li class="current"><a href="#nogo" _fcksavedurl="#nogo"><b>Link adı</b></a></li>
<li><a href="ADRES" _fcksavedurl="ADRES"><b>Link adı</b></a></li>
<li><a href="ADRES" _fcksavedurl="ADRES"><b>Link adı</b></a></li>
<li><a href="ADRES" _fcksavedurl="ADRES"><b>Link adı</b></a></li>
<li><a href="ADRES" _fcksavedurl="ADRES"><b>Link adı</b></a></li>
</ul>
</body>
</html>

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" _fcksavedurl="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" _fcksavedurl="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">Gallery</a></li>
<li><a href="http://www.javascriptkit.com" _fcksavedurl="http://www.javascriptkit.com">JavaScript</a></li>
<li><a href="http://www.codingforums.com" _fcksavedurl="http://www.codingforums.com">Forums</a></li>
</ul>
<br style="clear: left" />
</div>

css üst menüler

İki insan Çeşidi Vardır: Zaman Geçtikçe Hatalarıyla Yüzleşen, Zaman Geçtikçe Yüzsüzleşen...!