BENİM DÜNYAM - CSS YATAY MENÜLER

CSS YATAY HAZIR MENÜLER TASARIM ÜSTTÜ VEYA İSTEDİĞİNİZ YERE KOYUN

MENÜ 1

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>
<div class="mattblacktabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>

MENÜ 2

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
overflow: hidden;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 80%; /*width of menu*/
border: 1px solid #ccccff; /*dark purple border*/
border-width: 1px 0;
background: black url(media/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: #00ccff; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #ccccff; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: #00ccff;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: #00ccff !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(media/indentbg2.gif) center center repeat-x;
}

</style>
<div class="indentmenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="current">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>

GEZGİNLER.NET --=Java Scriptler=-- GEZGİNLER.NET

Ana Sayfa

İlk ana menu

İkinci ana menu

Üçüncü ana menu

Dördüncü ana menu

Beşinci ana menu

3 MENÜ

<STYLE type=text/css>A {
	COLOR: #ffcc00; FONT-SIZE: 10pt; TEXT-DECORATION: none
}
A:hover {
	COLOR: black; TEXT-DECORATION: none
}
A.plain:hover {
	COLOR: #ffcc00; FONT-SIZE: 10pt; TEXT-DECORATION: underline
}
#box {
	POSITION: absolute; VISIBILITY: hidden; layer-background-color: #004080
}
#limebox {
	BACKGROUND-COLOR: #99cc66
}
#bluebox {
	BACKGROUND-COLOR: #99cc66
}
#mnubar {
	FONT: bold 10pt arial
}
</STYLE>

<SCRIPT language=JavaScript>
ns=window.navigator.appName == "Netscape"
ie=window.navigator.appName == "Microsoft Internet Explorer"

if(ie) {
   curEl = event.toElement
   curEl.style.background = "black"

showBox = document.all.box[x];
     showBox.style.visibility = "visible";
        showBox.style.top = 46;
         
   var items = 5 
    for (i=0; i<items; i++) {
      elOpen=document.all.box[i]
       barEl=document.all.mnubar[i]
        if (i != x){ 
          elOpen.style.visibility = "hidden" 
          barEl.style.background = "black"
       }
     }
   }
}

function closeIt() {
   var items = 5 
     for (i=0; i<items; i++) {
       if(ie){
        document.all.box[i].style.visibility = "hidden"
          barEl=document.all.mnubar[i]
           barEl.style.background = "black" 
       }
       if(ns){ document.layers[i+1].visibility = "hide"}          
}
}

</SCRIPT>

<STYLE fprolloverstyle>A:hover {
	COLOR: #f0ffcc; FONT-WEIGHT: bold
}
</STYLE>

<TABLE bgColor=#004080 border=0 cellPadding=0 height=18 id=mainmenu width=800>
  <TBODY>
  <TR>
    <TD align=middle bgColor=#000000 colSpan=7 noWrap vAlign=center>
      <P align=left><B><FONT color=#ffcc00 face=Arial size=4>
      <DIV align=center>GEZGİNLER.NET      
      --=Java Scriptler=--      
      GEZGİNLER.NET</DIV></FONT></B>
      <P></P></TD></TR>
  <TR>
    <TD align=middle bgColor=#000000>
      <P align=center><FONT color=#ffcc00><B>   </B></FONT><A 
      class=plain href="http://www.gezginler.net/" onmouseover=closeIt()><FONT 
      color=#ffcc00><B>Ana Sayfa</B></FONT></A><FONT 
      color=#ffcc00><B>   </B></FONT><br><br></TD><br>
    <TD align=middle bgColor=#000000 noWrap><A 
      href="http://www.gezginler.net" id=mnubar 
      onmouseover=openIt(0)><FONT color=#ffcc00>İlk ana menu </FONT></A> 
       <br><BR></TD>
    <TD align=middle bgColor=#000000 noWrap><A 
      href="http://www.gezginler.net" id=mnubar 
      onmouseover=openIt(1)><FONT color=#ffcc00>İkinci ana menu </FONT></A> 
     <br>  <BR></TD>
    <TD align=middle bgColor=#000000 noWrap><A 
      href="http://www.gezginler.net" id=mnubar 
      onmouseover=openIt(2)><FONT color=#ffcc00>Üçüncü ana menu</FONT></A> 
      <br> <BR></TD>
    <TD align=middle bgColor=#000000 noWrap><FONT color=#ffcc00><A 
      href="http://www.gezginler.net" id=mnubar 
      onmouseover=openIt(3)><FONT color=#ffcc00>Dördüncü ana menu</FONT></A> 
       <br><BR></FONT></TD>
    <TD align=middle bgColor=#000000 noWrap><A 
      href="http://www.gezginler.net" id=mnubar 
      onmouseover=openIt(4)><FONT color=#ffcc00>Beşinci ana menu</FONT></A> 
      <br> <BR></TD>
    <TD align=middle bgColor=#000000 noWrap vAlign=top 
  width=30> </TD></TR></TBODY></TABLE><BR><BR><br>
<DIV onmouseover=closeIt()><LAYER onmouseover=closeIt()>
<P> </P></LAYER></DIV>
<DIV id=box style="LEFT: 120px">
<TABLE border=1 id=bluebox>
  <TBODY>
  <TR>
    <TD><A href="http://www.gezginler.net/">İlk alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">İkinci alt 
menu</A></TD></TR></TBODY></TABLE></DIV>
<DIV id=box style="LEFT: 200px">
<TABLE border=1 id=limebox>
  <TBODY>
  <TR>
    <TD><A href="http://www.gezginler.net/">İlk alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">İkinci alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">Üçüncü alt 
menu</A></TD></TR></TBODY></TABLE></DIV>
<DIV id=box style="LEFT: 240px">
<TABLE border=1 id=bluebox>
  <TBODY>
  <TR>
    <TD><A href="http://www.gezginler.net/">İlk alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">İkinci alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">Üçüncü alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">Dördüncü alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">Beşinci alt 
menu</A></TD></TR></TBODY></TABLE></DIV>
<DIV id=box style="LEFT: 400px">
<TABLE border=1 id=limebox>
  <TBODY>
  <TR>
    <TD><A href="http://www.gezginler.net/">İlk alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">İkinci alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">Üçüncü alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">Dördüncü alt 
menu</A></TD></TR></TBODY></TABLE></DIV>
<DIV id=box style="LEFT: 520px">
<TABLE border=1 id=bluebox>
  <TBODY>
  <TR>
    <TD><A href="http://www.gezginler.net/">İlk alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">İkinci alt menu</A></TD>
    <TD><A href="http://www.gezginler.net/">Üçüncü alt 
menu</A></TD></TR></TBODY></TABLE></DIV>

BİZE ULAŞIN MENÜ 1 MENÜ 2 MENÜ 3 MENÜ 4 MENÜ 5

MENÜ 4

<script language="JavaScript1.2">
//Hover-up Menu Bar: By Dynamicdrive.com

var cssdefinition='<style>n.menuitems{nborder:2.5px solid #0099cc;n}nn.menuitems a{ntext-decoration:none;ncolor:black;n}n</style>'

//No need to edit beyond here
if (document.all||document.getElementById)
document.write(cssdefinition)

function over_effect(e,state, bgcolor){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
else{
while(source4.tagName!="DIV"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
}
}
}

</script>

</head>

<body>
<div style="background-color:#0099cc;width:60%;height:25px;padding-top:5px" onMouseover="over_effect(event,'outset','#0066cc')" onMouseout="over_effect(event,'solid','#0099cc')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')">
<font face="Arial" size="2">
<strong>
<span><b><a href="mailto:webmaster@gezginler.net"><font color="#000080"> BİZE ULAŞIN</font></a> </b></span>   
<span class="menuitems"><a href="http://www.gezginler.net"><font color="#00FF00"> MENÜ 1 </font></a></span>  
<span class="menuitems"><a href="http://www.gezginler.net"> <font color="#00FF00">MENÜ 2 </font></a></span>  
<span class="menuitems"><a href="http://www.gezginler.net"> <font color="#00FF00">MENÜ 3 </font></a></span>  
<span class="menuitems"><a href="http://www.gezginler.net"><font color="#00FF00"> MENÜ 4 </font></a></span>  
<span class="menuitems"><a href="http://www.gezginler.net"><font color="#00FF00"> MENÜ 5</font> </a></span></strong>

</font>
</div>

SADE YAZILI MENÜ

Anasayfa

LİNK İSMİ1

LİNK İSMİ2

LİNK İSMİ3

LİNK İSMİ4

LİNK İSMİ5

LİNK İSMİ6

<table width="800" border="0" cellspacing="0" cellpadding="0" align="center" background="http://resim.araba.com/gfx/bgu.gif">
<tr>
	<td width="114" height="32" align="center" background="http://resim.araba.com/gfx/bg_b1.gif"  ><strong><a href="http://isocom.tr.gg/ANA-SAYFA.htm" style="text-decoration: none;">Anasayfa</a></strong></td>
	<td width="114" height="32" align="center"  ><strong><a href="LİNK 1" style="color:#cc0000; text-decoration: none;">LİNK İSMİ1</a></strong></td>
	<td width="114" height="32" align="center"  ><strong><a href="LİNK 2" style="text-decoration: none;">LİNK İSMİ2</a></strong></td>
	<td width="114" height="32" align="center"  ><strong><a href="LİNK 3" style="text-decoration: none;">LİNK İSMİ3</a></strong></td>
	<td width="114" height="32" align="center"  ><strong><a href="LİNK 4" style="text-decoration: none;">LİNK İSMİ4</a></strong></td>
	<td width="114" height="32" align="center"  ><strong><a href="LİNK 5" style="text-decoration: none;">LİNK İSMİ5</a></strong></td>
	<td width="116" height="32" align="center"  ><strong><a href="LİNK 6" style="text-decoration: none;">LİNK İSMİ6</a></strong></td>
</tr>
</table>

GEREKLİ LİNKLER 1

ÇANKIRI LİNKLERİ

GEREKLİ LİNKLER 2