ÖDEV, ETKİNLİK VE SUNU SİTESİ

<html> <head> <style> body{ background-color:#ffffff; font-family:arial;} table{font-size:80%; background:black; width:80%} a{color:black;text-decoration:none;font:bold} a:hover{color:#FF0000} td.menu{background:lightblue} table.menu { font-size:100%; position:absolute; visibility:hidden; } </style> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible" } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden" } </script> </head> <body> <table border="1"> <tr bgcolor="#FF8080"> <td onMouseOver="showmenu('link1')" onMouseOut="hidemenu('link1')"> <a href="#">Linkler</a><br /> <table class="menu" id="link1" width="120"> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> </table> </td> <td onMouseOver="showmenu('link2')" onMouseOut="hidemenu('link2')"> <a href="#">Linkler</a><br /> <table class="menu" id="link2" width="120"> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> </table> </td> <td onMouseOver="showmenu('link3')" onMouseOut="hidemenu('link3')"> <a href="#">Linkler</a><br /> <table class="menu" id="link3" width="120"> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> <tr><td class="menu"><a href="http://www.yahoo.com">Yahoo</a></td></tr> </table> </td> </tr> </table> <p>&nbsp;</p> </body> </html>

AÇILAN MENÜ KODU 2 Aşağıya Açılan Menü

<script type="text/javascript"> /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Konstantin Jagello | http://javascript-array.com/ */ var TimeOut = 300; var currentLayer = null; var currentitem = null; var currentLayerNum = 0; var noClose = 0; var closeTimer = null; function mopen(n) { var l = document.getElementById("menu"+n); var mm = document.getElementById("mmenu"+n); if(l) { mcancelclosetime(); l.style.visibility='visible'; if(currentLayer && (currentLayerNum != n)) currentLayer.style.visibility='hidden'; currentLayer = l; currentitem = mm; currentLayerNum = n; } else if(currentLayer) { currentLayer.style.visibility='hidden'; currentLayerNum = 0; currentitem = null; currentLayer = null; } } function mclosetime() { closeTimer = window.setTimeout(mclose, TimeOut); } function mcancelclosetime() { if(closeTimer) { window.clearTimeout(closeTimer); closeTimer = null; } } function mclose() { if(currentLayer && noClose!=1) { currentLayer.style.visibility='hidden'; currentLayerNum = 0; currentLayer = null; currentitem = null; } else { noClose = 0; } currentLayer = null; currentitem = null; } document.onclick = mclose; </script> <style> #dd { margin-left: 25%; padding: 0 0 20px 0; } #dd li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial; } #dd li a.menu { display: block; text-align: center; background: #5970B2; padding: 4px 10px; margin: 0 1px 0 0; color: #FFF; width: 60px; text-decoration: none; } #dd li a.menu:hover { background: #49A3FF; } .submenu { background: #EAEBD8; border: 1px solid #5970B2; visibility: hidden; position: absolute; z-index: 3; } .submenu a { display: block; font: 11px arial; text-align: left; text-decoration: none; padding: 5px; color: #2875DE; } .submenu a:hover { background: #49A3FF; color: #FFF; } </style> <ul id="dd"> <li><a href="#" class="menu" id="mmenu1" onmouseover="mopen(1);" onmouseout="mclosetime();">Home</a> <div class="submenu" id="menu1" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="#">HTML Tutorials</a> <a href="#">DHTML Tutorials</a> <a href="#">JavaScript Tutorials</a> <a href="#">CSS Tutorials</a> </div> </li> <li><a href="#" class="menu" id="mmenu2" onmouseover="mopen(2);" onmouseout="mclosetime();">Download</a> <div class="submenu" id="menu2" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="#">ASP Scripts</a> <a href="#">PHP Scripts</a> <a href="#">Ajax Scripts</a> <a href="#">Perl Scripts</a> </div> </li> <li><a href="#" class="menu">Order</a></li> <li><a href="#" class="menu">Help</a></li> <li><a href="#" class="menu" id="mmenu3" onmouseover="mopen(3);" onmouseout="mclosetime();">Contact</a> <div class="submenu" id="menu3" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="#">Office</a> <a href="#">Sales</a> <a href="#">Customer Service</a> <a href="#">Shipping</a> </div> </li> </ul>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>.:: DIV</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> <style> body, div { font-family: Verdana; font-size: 12px; } .cerceve{ width: 450px; margin-right: auto; margin-left: auto; } .menu{ cursor: pointer; width: 150px; float: left; } .baslik{ width: 144px; padding: 3px; color: white; background-color: black; } .icerik{ width: 144px; visibility: hidden; position: absolute; padding: 3px; color: white; background-color: gray; } </style> <script> function Gizle(no){ document.getElementById(no).style.visibility = 'hidden'; } function Goster(no){ document.getElementById(no).style.visibility = 'visible'; } </script> </head> <body leftmargin="0"> <div class="cerceve"> <div class="menu" onmouseout="Gizle('menu_a')" onmouseover="Goster('menu_a')"> <div class="baslik">Menu A</div> <div class="icerik" id="menu_a"> Menu A1<br> Menu A2<br> Menu A3<br> </div> </div> <div class="menu" onmouseout="Gizle('menu_b')" onmouseover="Goster('menu_b')"> <div class="baslik">Menu B</div> <div class="icerik" id="menu_b"> Menu B1<br> Menu B2<br> Menu B3<br> </div> </div> <div class="menu" onmouseout="Gizle('menu_c')" onmouseover="Goster('menu_c')"> <div class="baslik">Menu C</div> <div class="icerik" id="menu_c"> Menu C1<br> Menu C2<br> Menu C3<br> </div> </div> </div> </body> </html>

AÇILAN MENÜ KODU 9
...

<HTML> <HEAD> <TITLE>www.uzmanweb.net</TITLE> <style> BODY { font-family:verdana, arial, helvetica; font-size:70%; } H1 { font-size:120%; font-style:italic; } DIV#divMenuBar { background-color:#6699CC; } TABLE#tblMenuBar TD { font-size:60%; color:white; padding:0px 5px 0px 5px; cursor:default; } TABLE#tblMenuBar TD.MenuMadde { font-weight:bold; cursor:hand; } DIV.clsMenu { font-size:90%; background-color:#6699CC; position:absolute; visibility:hidden; width:130px; padding:5px 5px 5px 8px; border-top:1 white solid; } DIV.clsMenu A { text-decoration:none; color:white; font-weight:bold; } DIV.clsMenu A:hover { color:moccasin; } BUTTON { font-family:tahoma; font-size:100%; } </style> <SCRIPT LANGUAGE="Javascript"> var eOpenMenu = null; function OpenMenu(eSrc,eMenu) { eMenu.style.left = eSrc.offsetLeft + divMenuBar.offsetLeft; eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop; eMenu.style.visibility = "visible"; eOpenMenu = eMenu; } function CloseMenu(eMenu) { eMenu.style.visibility = "hidden"; eOpenMenu = null; } function document.onmouseover() { var eSrc = window.event.srcElement; if ("MenuMadde" == eSrc.className) { eSrc.style.color = "moccasin"; var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")]; if (eOpenMenu && eOpenMenu != eMenu) { CloseMenu(eOpenMenu); } if (eMenu) { OpenMenu(eSrc,eMenu); } } else if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc)) { CloseMenu(eOpenMenu); } } function document.onmouseout() { var eSrc = window.event.srcElement; if ("MenuMadde" == eSrc.className) { eSrc.style.color = ""; } } </SCRIPT> </HEAD> <BODY> <DIV ID="divMenuBar"> <TABLE ID="tblMenuBar" BORDER="0"> <TR> <TD CLASS="MenuMadde" ID="tdMenuBarItem01">MENÜ MADDE 01</TD> <TD>|</TD> <TD CLASS="MenuMadde" ID="tdMenuBarItem02">MENÜ MADDE 02</TD> <TD>|</TD> <TD CLASS="MenuMadde" ID="tdMenuBarItem03">MENÜ MADDE 03</TD> </TR> </TABLE> </DIV> <DIV CLASS="clsMenu" ID="divMenu01"> <DIV CLASS="clsMenuAra"></DIV> <DIV><A TARGET="_new" HREF="01.asp">Madde 01</A></DIV> <DIV><A TARGET="_new" HREF="02.asp">Madde 02</A></DIV> <DIV><A TARGET="_new" HREF="03.asp">Madde 03</A></DIV> <DIV><A TARGET="_new" HREF="04.asp">Madde 04</A></DIV> <DIV><A TARGET="_new" HREF="05.asp">Madde 05</A></DIV> </DIV> <DIV CLASS="clsMenu" ID="divMenu02"> <DIV CLASS="clsMenuAra"></DIV> <DIV><A TARGET="_new" HREF="11.asp">Madde 01</A></DIV> <DIV><A TARGET="_new" HREF="12.asp">Madde 02</A></DIV> <DIV><A TARGET="_new" HREF="13.asp">Madde 03</A></DIV> <DIV><A TARGET="_new" HREF="14.asp">Madde 04</A></DIV> <DIV><A TARGET="_new" HREF="15.asp">Madde 05</A></DIV> </DIV> <DIV CLASS="clsMenu" ID="divMenu03"> <DIV CLASS="clsMenuAra"></DIV> <DIV><A TARGET="_new" HREF="21.asp">Madde 01</A></DIV> <DIV><A TARGET="_new" HREF="22.asp">Madde 02</A></DIV> <DIV><A TARGET="_new" HREF="23.asp">Madde 03</A></DIV> <DIV><A TARGET="_new" HREF="24.asp">Madde 04</A></DIV> <DIV><A TARGET="_new" HREF="25.asp">Madde 05</A></DIV> </DIV> </BODY> </HTML>

AÇILAN MENÜ KODU 3   Aşağıya Açılan Menü

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>  <title>Schuifmenu</title> <style> body { font-family:arial; } a { color:black; text-decoration:none; font:bold } a:hover { color:black; text-decoration:underline; } } td.menu { background:lightblue } td.menu:hover {background-Color="FF9933" } table.navigatie { background:black; position:relative; font:bold 80%; top:-119px; left:0px; } </style> <script> var pos = -119; var timer1 = 0; var timer2 = 0;; var stap = 3; function toonMenu1() { // stop functie verberg en start functie toon clearInterval(timer1) timer2 = setInterval("toon1()",10) } // einde toonMenu function verbergMenu1() { // stop functie toon en start functie verberg clearInterval(timer2) timer1 = setInterval("verberg1()",10) } //einde verbergMenu function toon1(){ if (pos < -12) { pos = pos + stap document.getElementById('mijnMenu1').style.top = pos } // einde if } // einde toon function verberg1(){ if (pos > -119) { pos = pos -stap document.getElementById('mijnMenu1').style.top = pos } // einde if } // einde verberg var pos2 = -119; var timer3 = 0; var timer4 = 0;; var stap = 3; function toonMenu2() { // stop functie verberg en start functie toon clearInterval(timer3) timer4 = setInterval("toon2()",10) } // einde toonMenu function verbergMenu2() { // stop functie toon en start functie verberg clearInterval(timer4) timer3 = setInterval("verberg2()",10) } //einde verbergMenu function toon2(){ if (pos2 < -12) { pos2 = pos2 + stap document.getElementById('mijnMenu2').style.top = pos2 } // einde if } // einde toon function verberg2(){ if (pos2 > -119) { pos2 = pos2 -stap document.getElementById('mijnMenu2').style.top = pos2 } // einde if } // einde verberg var pos3 = -119; var timer5 = 0; var timer6 = 0;; var stap = 3; function toonMenu3() { // stop functie verberg en start functie toon clearInterval(timer5) timer6 = setInterval("toon3()",10) } // einde toonMenu function verbergMenu3() { // stop functie toon en start functie verberg clearInterval(timer6) timer5 = setInterval("verberg3()",10) } //einde verbergMenu function toon3(){ if (pos3 < -12) { pos3 = pos3 + stap document.getElementById('mijnMenu3').style.top = pos3 } // einde if } // einde toon function verberg3(){ if (pos3 > -119) { pos3 = pos3 -stap document.getElementById('mijnMenu3').style.top = pos3 } // einde if } // einde verberg </script> </head> <body> <table border="0" width="1057" height="85"> <tr> <td height="112" width="152"> <table style="width: 152px; height: 122px;" id="mijnmenu1" class="navigatie" onMouseOver="toonMenu1()" onMouseOut="verbergMenu1()"> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item1</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item2</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item3</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item4</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item5</a></td> </tr> <tr> <td class="menu" style="background-color: #004466" height="18"> <font color="#FFFFFF">menu1</font></td> </tr> </table> </td> <td height="112" width="152"> <table style="width: 152px; height: 122px;" id="mijnmenu2" class="navigatie" onMouseOver="toonMenu2()" onMouseOut="verbergMenu2()"> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item1</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item2</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item3</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item4</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item5</a></td> </tr> <tr> <td class="menu" style="background-color: #004466" height="18"> <font color="#FFFFFF">menu2</font></td> </tr> </table> </td> <td height="112" width="152"> <table style="width: 152px; height: 122px;" id="mijnmenu3" class="navigatie" onMouseOver="toonMenu3()" onMouseOut="verbergMenu3()"> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item1</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item2</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item3</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item4</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item5</a></td> </tr> <tr> <td class="menu" style="background-color: #004466" height="18"> <font color="#FFFFFF">menu3</font></td> </tr> </table> </td> <td height="112" width="583"> </td> </tr> </table> <p> </p> <p> </p> <p>move down menu by alexj</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <br> <p> </p> <br> <p> </p> <p> </p> <p> </p> <p> </p> </body> </html>

AÇILAN MENÜ KODU 4   Sağa Açılan Menü

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script language="javascript"> var interval = 0; function Menu(lpos, rpos, value, ref, width, height, visibility) { this.id = lpos + rpos; this.lpos = lpos; this.rpos = rpos; this.value = value this.ref = ref; this.width = width; this.height = height; this.left = 0; this.top = 0; this.visibility = visibility; this.level = lpos.length; } aMenu = new Array(); //constructor //menu = new Menu('key1', 'key2', 'value', 'target', 'length', 'height', 'visibility: 1=visible; 0=hidden') //Parent menu must be declared visible - 1 //menu - level 0 aMenu[0] = new Menu('0', '0', '0-0', 'index.htm', 130, 20, 1); aMenu[1] = new Menu('0', '1', '0-1 >>', '#', 130, 20, 1); aMenu[2] = new Menu('0', '2', '0-2', '#', 130, 20, 1); //submenu1 - level 1 aMenu[3] = new Menu('01', '0', '01-0', '#', 130, 20, 0); aMenu[4] = new Menu('01', '1', '01-1 >>', '#', 130, 20, 0); //submenu2 - level 2 aMenu[5] = new Menu('011', '0', '011-0', '#', 130, 20, 0); aMenu[6] = new Menu('011', '1', '011-1 >>', '#', 130, 20, 0); aMenu[7] = new Menu('011', '2', '011-2', '#', 130, 20, 0); //submenu3 - level 3 aMenu[8] = new Menu('0111', '0', '0111-0', '#', 130, 20, 0); aMenu[9] = new Menu('0111', '1', '0111-1 >>', '#', 130, 20, 0); //submenu4 - level 4 aMenu[10] = new Menu('01111', '0', '01111-0', '#', 130, 20, 0); aMenu[11] = new Menu('01111', '1', '01111-1', '#', 130, 20, 0); aMenu[12] = new Menu('01111', '2', '01111-2', '#', 130, 20, 0); function hideAll(Object) { for (var i = 1; i < aMenu.length; i++) { if (aMenu[i].lpos != '0') document.getElementById(aMenu[i].id).style.visibility = 'hidden'; } } function showMenus(Object) { for (var i = 0; i < aMenu.length; i++) { if (aMenu[i].id == Object.id) // find menu { for (var j = i; j < aMenu.length; j ++) { if (aMenu[j].lpos == aMenu[i].id) // find submenu { document.getElementById(aMenu[j].id).style.visibility = 'visible'; } else // hide rest { if ((aMenu[j].lpos != '0') && (aMenu[j].level >= aMenu[i].level + 1)) { document.getElementById(aMenu[j].id).style.visibility = 'hidden'; } } } } } } function finterval() { interval = setInterval('hideAll(Object)', 500); } function shadowMenu(Object) { for (var i = 0; i < aMenu.length; i++) { if (aMenu[i].id == Object.id) document.getElementById(aMenu[i].id).style.background = '#00CCFF'; } clearInterval(interval); } function unshadowMenu(Object) { for (var i = 0; i < aMenu.length; i++) { if (aMenu[i].id == Object.id) document.getElementById(aMenu[i].id).style.background = '#CCCCCC'; } finterval(); } function writeMenu(Menu) { this.background_color = 'background-color: #CCCCCC;'; this.margin_bottom = 'margin-bottom: 1px;'; this.border_width = 'border-width: thin;'; this.border_style = 'border-style: groove;'; this.color = 'color: #0000FF;'; this.vwidth = 'width:' + Menu.width.toString() + 'px;'; this.vheight = 'height:' + Menu.height.toString() + 'px;'; this.font_family = 'font-family:Verdana, Arial, Helvetica, sans-serif;'; this.font_size = 'font-size:11px;'; this.font_weight = 'font-weight:bold;'; this.text_decoration = 'text-decoration:none;'; this.text_align = 'text-align:left;'; this.text_indent = 'text-indent: 10px;'; this.text_shadow = 'text-shadow:Maroon;'; this.vleft = 'left: ' + Menu.left.toString() + 'px;'; this.vtop = 'top: ' + Menu.top.toString() + 'px;'; if (Menu.visibility == 0) this.vvisibility = 'visibility: hidden;'; else this.vvisibility = 'visibility: visible;'; this.strMenu = '<A ' + 'HREF="' + Menu.ref + '"' + 'TARGET="_self"' + 'ID="' + Menu.id + '"' + 'VALUE="' + Menu.value + '"' + 'onClick="hideAll(this)"' + 'onMouseOver="showMenus(this); shadowMenu(this)"' + 'onMouseLeave="unshadowMenu(this)"' + 'style="' + this.background_color + this.margin_bottom + this.border_width + this.border_style + this.color + this.vwidth + this.vheight + this.font_family + this.font_size + this.font_weight + this.text_decoration + this.text_align + this.text_indent + this.vvisibility + this.vleft + this.vtop + 'position: absolute;' + this.text_shadow + '">' + Menu.value + '</A>'; document.write(this.strMenu); } function genMenu(aMenu) { aMenu[0].left = 15; // left position aMenu[0].top = 100; // top position writeMenu(aMenu[0]); for (var i = 1; i < aMenu.length; i++) { if (aMenu[i].lpos == aMenu[i - 1].lpos) // same menu { aMenu[i].left = aMenu[i - 1].left; aMenu[i].top = aMenu[i - 1].top + aMenu[i - 1].height; writeMenu(aMenu[i]); } for (var k = 0; k < i; k++) { if ((aMenu[i].lpos == (aMenu[k].lpos + aMenu[k].rpos)) && (aMenu[i].lpos != aMenu[i - 1].lpos)) // find submenu { aMenu[i].left = aMenu[k].left + aMenu[k].width; aMenu[i].top = aMenu[k].top; writeMenu(aMenu[i]); } } } } genMenu(aMenu); </script> </head> <body> </body> </html>

AÇILAN MENÜ KODU 5   Aşağıya Açılan Menü

<script> function selectURL(nexturl) { if (nexturl != "") { window.top.location.href = nexturl; } } </script> <style> .topic { color: #fff; font-weight: bold; background-color: blue; } .link { color: #000; background-color: #dfdfdf; } </style> <form action="#" method="post"> <select onchange="selectURL(this.options[this.selectedIndex].value);"> <option selected value="">Select location...</option> <option class="topic" value="">JavaScript Source</option> <option class="link" value="http://javascript.internet.com/ajax/"> » Ajax scripts</option> <option class="link" value="http://javascript.internet.com/ajaxTutorials/"> » Ajax turorials</option> <option class="link" value="http://javascript.internet.com/new/"> » New scripts</option> <option class="topic" value="">Other JavaScript Sites</option> <option class="link" value="http://webdeveloper.earthweb.com/webjs/"> » JavaScripts.com</option> <option class="link" value="http://www.devx.com/DevX/Article/10447"> » DevX JavaScript Tips</option> </select> <noscript><input type="submit" value="Go"></noscript> </form>

AŞAĞIDAN YUKARIYA AÇILAN MENÜ KODU
..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>css</title> <style type="text/css"> #info {height:400px;} #info h3 {margin-bottom:200px;} /* style the outer div to give it width */ .menu { width:750px; height:30px; font-size:0.85em; } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; } .menu ul ul { width:150px; } /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .menu li { float:left; width:150px; position:relative; } /* style the links for the top level */ .menu a, .menu a:visited { display:block; font-size:11px; text-decoration:none; color:#fff; width:139px; height:30px; border:1px solid #fff; border-width:1px 1px 0 0; background:#758279; padding-left:10px; line-height:29px; } /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited { width:150px; width:139px; } /* style the second level background */ .menu ul ul a.drop, .menu ul ul a.drop:visited { background:#949e7c; } /* style the second level hover */ .menu ul ul a.drop:hover { background:#c9ba65; } .menu ul ul :hover > a.drop { background:#c9ba65; } /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited { background:#e2dfa8; } /* style the third level hover */ .menu ul ul ul a:hover{ background:#b2ab9b; } .menu ul ul ul :hover > a { background:#b2ab9b; } /* style the table so that it takes no part in the layout - required for IE to work */ .menu table {border-collapse:collapse; border:0; position:absolute; left:0; bottom:-1px;} /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; bottom:31px; left:0; width:150px; } * html .menu ul ul { bottom:30px; } /* position the third level flyout menu */ .menu ul ul ul{ left:150px; bottom:0; width:150px; } /* position the third level flyout menu for a left flyout */ .menu ul ul ul.left { left:-150px; } /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:129px /* yet another hack for IE5.5 */ } * html .menu ul ul a{ width:150px; width:129px; } /* style the top level hover */ .menu a:hover, .menu ul ul a:hover{ color:#fff; background:#949e7c; } .menu :hover > a, .menu ul ul :hover > a { color:#fff; background:#949e7c; } /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul{ visibility:visible; height:auto; } /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul{ display:none; } /* keep the fourth level hidden when you hover on second level list OR link */ .menu ul :hover ul :hover ul ul{ display:none; } /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul{ display:block; bottom:0; } /* make the fourth level visible when you hover over third level list OR link */ .menu ul :hover ul :hover ul :hover ul { display:block; bottom:0; } </style> </head> <body id="www-cssplay-co-uk"> <p>&nbsp;</p> <p>  </p> <div id="wrapper"> <div id="info"> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <h2>&nbsp;</h2> <div class="menu"> <ul> <li><a class="drop" href="http://www.r10.net/menu/index.html">EĞİTİM</a>  <ul> <li><a href="http://www.r10.net/menu/zero_dollars.html" title="The zero dollar ads page"> EĞİTİM 8</a></li> <li><a href="http://www.r10.net/menu/embed.html" title="Wrapping text around images"> EĞİTİM 7</a></li> <li><a href="http://www.r10.net/menu/form.html" title="Styling forms"> EĞİTİM 6</a></li> <li><a class="drop" href="http://www.r10.net/menu/nodots.html" title="Removing active/focus borders">2.MENÜ</a>  <ul> <li><a href="http://www.r10.net/menu/form.html" title="Styling forms">2.MENÜ 4. BÖLÜM </a></li> <li><a href="http://www.r10.net/menu/nodots.html" title="Removing active/focus borders">2.MENÜ 3. BÖLÜM </a>  <ul> <li><a href="#nogo">Third level-1a</a></li> <li><a href="#nogo">Third level-2a</a></li> <li><a href="#nogo">Third level-3a</a></li> <li><a href="#nogo">Third level-4a</a></li> </ul>  </li> <li><a href="#nogo">2.MENÜ 2. BÖLÜM </a>  <ul> <li><a href="#nogo">Third level-1</a></li> <li><a href="#nogo">Third level-2</a></li> <li><a href="#nogo">Third level-3</a></li> <li><a href="#nogo">Third level-4</a></li> </ul>  </li> <li><a href="http://www.r10.net/menu/hover_click.html" title="Hover/click with no active/focus borders">2.MENÜ 1. BÖLÜM </a></li> </ul>  </li> <li><a class="drop" href="http://www.r10.net/menu/hover_click.html" title="Hover/click with no active/focus borders">1.MENÜ</a>  <ul> <li><a href="http://www.r10.net/menu/form.html" title="Styling forms">1.MENÜ 4. BÖLÜM </a></li> <li><a href="http://www.r10.net/menu/nodots.html" title="Removing active/focus borders">1.MENÜ 3. BÖLÜM</a>  <ul> <li><a href="#nogo">Third level-1a</a></li> <li><a href="#nogo">Third level-2a</a></li> <li><a href="#nogo">Third level-3a</a></li> <li><a href="#nogo">Third level-4a</a></li> </ul>  </li> <li><a href="#nogo">1.MENÜ 2. BÖLÜM </a>  <ul> <li><a href="#nogo">Third level-1</a></li> <li><a href="#nogo">Third level-2</a></li> <li><a href="#nogo">Third level-3</a></li> <li><a href="#nogo">Third level-4</a></li> </ul>  </li> <li><a href="http://www.r10.net/menu/hover_click.html" title="Hover/click with no active/focus borders">1.MENÜ 1. BÖLÜM </a></li> </ul>  </li> <li class="upone"><a href="http://www.r10.net/menu/shadow_boxing.html" title="Multi-position drop shadow"> EĞİTİM 5</a></li> <li><a href="http://www.r10.net/menu/old_master.html" title="Image Map for detailed information"> EĞİTİM 4</a></li> <li><a href="http://www.r10.net/menu/bodies.html" title="fun with background images"> EĞİTİM 3</a></li> <li><a href="http://www.r10.net/menu/fade_scroll.html" title="fade-out scrolling"> EĞİTİM 2</a></li> <li><a href="http://www.r10.net/menu/em_images.html" title="em size images compared">EĞİTİM 1</a></li> </ul>  </li> <li><a href="http://www.r10.net/boxes/index.html">LİNKLER</a>  <ul> <li><a href="spies.html" title="a coded list of spies"> LİNKLER 7</a></li> <li><a href="vertical.html" title="a horizontal vertical menu"> LİNKLER 6</a></li> <li><a href="expand.html" title="an enlarging unordered list"> LİNKLER 5</a></li> <li><a href="enlarge.html" title="an unordered list with link images"> LİNKLER 4</a></li> <li><a href="cross.html" title="non-rectangular links"> LİNKLER 3</a></li> <li><a href="jigsaw.html" title="jigsaw links"> LİNKLER 2</a></li> <li><a href="circles.html" title="circular links">LİNKLER 1</a></li> </ul>  </li> <li><a href="http://www.r10.net/mozilla/index.html">SİTELERİMİZ</a>  <ul> <li><a href="http://www.r10.net/mozilla/dropdown.html" title="A drop down menu"> SİTELERİMİZ 9</a></li> <li><a href="http://www.r10.net/mozilla/cascade.html" title="A cascading menu"> SİTELERİMİZ 8</a></li> <li><a href="http://www.r10.net/mozilla/content.html" title="Using content:"> SİTELERİMİZ 7</a></li> <li><a href="http://www.r10.net/mozilla/moxbox.html" title=":hover applied to a div"> SİTELERİMİZ 6</a></li> <li><a href="http://www.r10.net/mozilla/rainbow.html" title="I can build a rainbow"> SİTELERİMİZ 5</a></li> <li><a href="http://www.r10.net/mozilla/snooker.html" title="Snooker cue"> SİTELERİMİZ 4</a></li> <li><a href="http://www.r10.net/mozilla/target.html" title="Target Practise"> SİTELERİMİZ 3</a></li> <li><a href="http://www.r10.net/mozilla/splittext.html" title="Two tone headings"> SİTELERİMİZ 2</a></li> <li><a href="http://www.r10.net/mozilla/shadow_text.html" title="Shadow text">SİTELERİMİZ 1</a></li> </ul>  </li> <li><a href="http://www.r10.net/ie/index.html">OYUNLAR</a>  <ul> <li><a href="http://www.r10.net/ie/exampleone.html" title="Example one"> OYUNLAR 3</a></li> <li><a href="http://www.r10.net/ie/weft.html" title="Weft fonts"> OYUNLAR 2</a></li> <li><a href="http://www.r10.net/ie/exampletwo.html" title="Vertical align">OYUNLAR 1</a></li> </ul>  </li> <li><a href="http://www.r10.net/opacity/index.html">TV RADYO</a>  <ul> <li><a href="http://www.r10.net/opacity/colours.html" title="colour wheel"> RADYO 4</a></li> <li><a href="http://www.r10.net/opacity/picturemenu.html" title="a menu using opacity"> RADYO 3</a></li> <li><a href="http://www.r10.net/opacity/png.html" title="partial opacity"> RADYO 2</a></li> <li><a href="http://www.r10.net/opacity/png2.html" title="partial opacity II">RADYO 1</a></li> <li><a class="drop" href="http://www.r10.net/menu/hover_click.html" title="Hover/click with no active/focus borders">TV İZLE</a>  <ul class="left"> <li><a href="http://www.r10.net/menu/form.html" title="Styling forms"> TV İZLE 3</a></li> <li><a href="http://www.r10.net/menu/nodots.html" title="Removing active/focus borders"> TV İZLE 2</a></li> <li><a href="http://www.r10.net/menu/hover_click.html" title="Hover/click with no active/focus borders">TV İZLE 1</a></li> </ul>  </li> </ul>  </li> </ul> </div> </div>  </div> </body> </html>

DÜZENLENMİŞ MENÜ KODU 1
..

3D MENÜ KODU

<head> <style> .divlink { width:150px; cursor:sw-resize; background-color:#cccccc; border:1px solid darkblue; border-top-width:0px; color:#006699; font-weight:bold; padding:3px 0px 3px 10px; text-align:left; } .divoverlink { width:150px; cursor:sw-resize; background-color:#e5e5e5; border:1px solid darkred; border-top-width:0px; color:red; font-weight:bold; padding:3px 0px 3px 10px; text-align:left; } .title { width:150px; background-color:blue; border:1px solid darkblue; color:white; font-weight:bold; padding:3px 7px 3px 3px; text-align:left; } .link{ font-family:verdana; font-size:10px; filter:shadow(Color=gray, Direction=135,Strength=15); } .link a{ text-decoration:none; } </style> <script language="JavaScript">//Free JavaScripts on http://www.ScriptBreaker.com var scroll = true       // true yerine dilerseniz false kodunu da kullanabilirsiniz... var offsetleft = 415  // Sayfanın sol tarafına olan uzaklığı var offsettop = 10  // Sayfanın üst tarafına olan uzaklığı var step = 2 function init(id) { obj_head = document.getElementById(id) obj_head.style.height = obj_head.offsetHeight +10; if(scroll) { obj_head.style.position = "absolute"; obj_head.style.width = obj_head.offsetWidth + 10; obj_head.style.top = offsettop; obj_head.style.left = offsetleft; } obj_head.style.visibility="visible"; } var T1 = null; var ie4=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 function makeStatic() { id = "head1"; if (ie4) {wtop = document.body.scrollTop+offsettop} else if (ns6) {wtop = window.pageYOffset+offsettop} ntop = parseInt(document.getElementById(id).style.top) if((ntop > (wtop)) && (ntop >(wtop + step))){ document.getElementById(id).style.top = wtop T1 = setTimeout("makeStatic()",0); } else { if((ntop < (wtop)) && (ntop < (wtop+ step))){ document.getElementById(id).style.top =  ntop + step T1 = setTimeout("makeStatic()",0); } else {clearTimeout("T1");T1=""}} } if (scroll) { if (document.all) window.onscroll = makeStatic else setInterval ('makeStatic()', 100);}  </script> </head> <body bgColor=#ebe2d3 onload="init('head1')"> <br> <div class=link id=head1 style="visibility:hidden"> <div class=title>                 <strong>M E N Ü</strong></div> <a href="http://www.link_adi.com" target="_blank"><div class=divlink  onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 1</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 2</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 3</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 4</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 5</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink  onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 6</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 7</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 8</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 9</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 10</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink  onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 11</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 12</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 13</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 14</div></a> <a href="http://www.gezginler.net" target="_blank"><div class=divlink onmouseover="this.className='divoverlink';" onmouseout="this.className='divlink';">Link 15</div></a> </body>

YAN MENÜ KODU

<font color="#115585" size="2">Mouse imlecini soldaki menünün üstüne getirin...</font><br><br><br> <STYLE>#slidemenubar { BACKGROUND-COLOR: #66ccff; BORDER-BOTTOM: #004080 4px solid; BORDER-LEFT: #004080 4px solid; BORDER-RIGHT: #004080 4px solid; BORDER-TOP: #004080 4px solid; FONT: bold italic 14px/19px Garamond; LEFT: 100px; POSITION: absolute; TOP: 100px; WIDTH: 200px; layer-background-color: lightyellow; fontcolor: white } #slidemenubar2 { BACKGROUND-COLOR: #66ccff; BORDER-BOTTOM: #004080 4px solid; BORDER-LEFT: #004080 4px solid; BORDER-RIGHT: #004080 4px solid; BORDER-TOP: #004080 4px solid; FONT: bold italic 14px/19px Garamond; LEFT: 100px; POSITION: absolute; TOP: 100px; WIDTH: 200px; layer-background-color: lightyellow; fontcolor: white } </STYLE> <SCRIPT language=JavaScript1.2> if (document.all) document.write('<div id="slidemenubar2" style="left:-170" onMouseover="pull()" onMouseout="draw()">')</SCRIPT> <LAYER id=slidemenubar onmouseout=draw() onmouseover=pull()> <SCRIPT language=JavaScript1.2>var sitems=new Array() var sitemlinks=new Array() //Link adları sitems[0]="LİNK 1" sitems[1]="LİNK 2" sitems[2]="LİNK 3" sitems[3]="LİNK 4" sitems[4]="LİNK 5" sitems[5]="LİNK 6" sitems[6]="LİNK 7" sitems[7]="LİNK 8" sitems[8]="LİNK 9" sitems[9]="LİNK 10" sitems[10]="LİNK 11" sitems[11]="<hr>" sitems[12]="E-MAİL " //Link adresleri sitemlinks[0]="http://www.gezginler.net/" sitemlinks[1]="http://www.gezginler.net/" sitemlinks[2]="http://www.gezginler.net/" sitemlinks[3]="http://www.gezginler.net/" sitemlinks[4]="http://www.gezginler.net/" sitemlinks[5]="http://www.gezginler.net/" sitemlinks[6]="http://www.gezginler.net/" sitemlinks[7]="http://www.gezginler.net/" sitemlinks[8]="http://www.gezginler.net/" sitemlinks[9]="http://www.gezginler.net/" sitemlinks[10]="http://www.gezginler.net/" sitemlinks[11]= sitemlinks[12]="mailto:E-mail@adresiniz.com" for (i=0;i<=sitems.length-1;i++) document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>')</SCRIPT> </LAYER> <SCRIPT language=JavaScript1.2>function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers) setTimeout("window.onresize=regenerate",400) } window.onload=regenerate2 if (document.all){ document.write('</div>') themenu=document.all.slidemenubar2.style rightboundary=0 leftboundary=-150 } else{ themenu=document.layers.slidemenubar rightboundary=150 leftboundary=10 } function pull(){ if (window.drawit) clearInterval(drawit) pullit=setInterval("pullengine()",50) } function draw(){ clearInterval(pullit) drawit=setInterval("drawengine()",50) } function pullengine(){ if (document.all&&themenu.pixelLeft<rightboundary) themenu.pixelLeft+=5 else if(document.layers&&themenu.left<rightboundary) themenu.left+=5 else if (window.pullit) clearInterval(pullit) } function drawengine(){ if (document.all&&themenu.pixelLeft>leftboundary) themenu.pixelLeft-=5 else if(document.layers&&themenu.left>leftboundary) themenu.left-=5 else if (window.drawit) clearInterval(drawit) }</SCRIPT>

TABLE MENÜ
..

 <head> </style> <script type="text/javascript"> /* GreyWyvern's Buffered Text-fade Effect - v2.1 */ var fader = new Array(), fadeQ = new Array(); var RGB = new Array(256), k = 0, hex = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; for (var i = 0; i < 16; i++) for (var j = 0; j < 16; j++) RGB[k++] = hex[i] + hex[j]; function fadeObj(number, id, colOff, colOn, spdIn, spdOut, def) { this.number = number; this.id = id; this.colOff = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)]; this.colOn = [parseInt(colOn.substr(0, 2), 16), parseInt(colOn.substr(2, 2), 16), parseInt(colOn.substr(4, 2), 16)]; this.colNow = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)]; this.spdIn = spdIn; this.spdOut = spdOut; this.def = def; this.direction = false; this.active = false; this.message = new Array(); this.messageNow = 0; } function fadeCmd(number, message, direction) { this.number = number; this.message = message; this.direction = direction; } function fade(number, message, direction) { if (fader[number].def && fader[number].messageNow == 0 && fader[number].direction) { fadeQ[fadeQ.length] = new fadeCmd(number, 0, false); fadeQ[fadeQ.length] = new fadeCmd(number, message, direction); message = 0; direction = false; } else fadeQ[fadeQ.length] = new fadeCmd(number, message, direction); setTimeout("fadeBegin(" + number + ");", 20); } function fadeBegin(number) { for (var x = 0; x < fadeQ.length; x++) { for (var y = x + 1; y < fadeQ.length; y++) { if (fadeQ[x].number == fadeQ[y].number && fadeQ[x].message == fadeQ[y].message && fadeQ[x].direction != fadeQ[y].direction) { fadeQ.splice(x, 1); fadeQ.splice(y - 1, 1); } } } if (!fader[number].active) { for (var x = 0; x < fadeQ.length; x++) { if (fadeQ[x].number == number && fadeQ[x].direction != fader[number].direction) { var del = fadeQ.splice(x, 1); setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0); break; } } } } function fadeEng(number, message, direction) { if (!fader[number].active) { fader[number].active = true; fader[number].direction = direction; fader[number].messageNow = message; document.getElementById(fader[number].id).innerHTML = fader[number].message[message]; } var iniCol = (direction) ? fader[number].colOff : fader[number].colOn; var endCol = (direction) ? fader[number].colOn : fader[number].colOff; var incCol = fader[number].colNow; var spd = (direction) ? fader[number].spdIn : fader[number].spdOut; for (var x = 0; x < 3; x++) { var incr = (endCol[x] - iniCol[x]) / spd; incCol[x] = (incr < 0) ? Math.max(incCol[x] + incr, endCol[x]) : Math.min(incCol[x] + incr, endCol[x]); } document.getElementById(fader[number].id).style.color = "#" + RGB[parseInt(incCol[0])] + RGB[parseInt(incCol[1])] + RGB[parseInt(incCol[2])]; if (incCol[0] == endCol[0] && incCol[1] == endCol[1] && incCol[2] == endCol[2]) { fader[number].active = false; for (var x = 0; x < fadeQ.length; x++) { if (fadeQ[x].number == number) { var del = fadeQ.splice(x, 1); setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0); return false; } } if (!direction) { if (fader[number].def) { setTimeout("fadeEng(" + number + ", 0, true);", 0); } else document.getElementById(fader[number].id).innerHTML = " "; } } else setTimeout("fadeEng(" + number + ", " + message + ", " + direction + ");", 0); } fader[0] = new fadeObj(0, 'fade0', 'ffff00', '0066ff', 20, 20, true); fader[0].message[0] = "<strong>Link aciklamasi</strong>"; fader[0].message[1] = "<br><strong>Link aciklamasi</strong>"; fader[0].message[2] = "<br><br><br><strong>Link aciklamasi</strong>"; fader[0].message[3] = "<br><br><br><br><br><br><strong>Link aciklamasi</strong>"; fader[0].message[4] = "<br><br><br><br><strong>Link aciklamasi</strong>"; fader[1] = new fadeObj(1, 'fade1', 'ffff00', '000066', 20, 20, false); fader[1].message[1] = "<br><div align=center><strong>Link aciklamasi</strong></div>"; fader[1].message[2] = "<br><br><div align=center><strong>Link aciklamasi</strong></div>"; fader[1].message[3] = "<br><br><br><div align=center><strong>Link aciklamasi</strong></div>"; fader[1].message[4] = "<br><br><br><br><br><br><div align=center><strong>Link aciklamasi</strong></div>"; </script> <style type="text/css"> body { text-align:center; } table { margin:20px auto; text-align:left; border:3px outset #ccffdd; background:transparent url(http://www.gezginler.net/modules/javascripts/ornek/menu/beyazitkulesi1900.jpg) no-repeat scroll center center; font-size:90%; } table tr td { width:81px; height:46px; border:2px outset #ccffdd; text-align:center; cursor:pointer; } #fade0 { width:130px; height:190px; text-align:left; padding:5px 20px 5px 10px; border:0px none transparent; } #fade1 { width:130px; height:190px; text-align:right; padding:5px 10px 5px 20px; border:0px none transparent; } .footer { text-align:left; margin:0px; } </style> </head> <BODY onload="fade(0, 0, true);"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td rowspan="4" id="fade0"> </td> <td onmouseover="fade(0, 1, true);" onmouseout="fade(0, 1, false);"><a href="http://www.gezginler.net" target="_blank">Link 1</a></td> <td onmouseover="fade(1, 1, true);" onmouseout="fade(1, 1, false);"><a href="http://www.gezginler.net" target="_blank">Link 2</a></td> <td rowspan="4" id="fade1"> </td> </tr> <tr> <td onmouseover="fade(0, 2, true);" onmouseout="fade(0, 2, false);"><a href="http://www.gezginler.net" target="_blank">Link 3</a></td> <td onmouseover="fade(1, 2, true);" onmouseout="fade(1, 2, false);"><a href="http://www.gezginler.net" target="_blank">Link 4</a></td> </tr> <tr> <td onmouseover="fade(0, 3, true);" onmouseout="fade(0, 3, false);"><a href="http://www.gezginler.net" target="_blank">Link 5</a></td> <td onmouseover="fade(1, 3, true);" onmouseout="fade(1, 3, false);"><a href="http://www.gezginler.net" target="_blank">Link 6</a></td> </tr> <tr> <td onmouseover="fade(0, 4, true);" onmouseout="fade(0, 4, false);"><a href="http://www.gezginler.net" target="_blank" target="_blank">Link 7</a></td> <td onmouseover="fade(1, 4, true);" onmouseout="fade(1, 4, false);"><a href="http://www.gezginler.net" target="_blank">Link 8</a></td> </tr> </table> </body>

<SCRIPT language=JavaScript>  </SCRIPT> <STYLE type=text/css>A { COLOR: #00FFFF; FONT-FAMILY: 'Arial'; FONT-SIZE: 10pt; LINE-HEIGHT: 20pt } STRONG { FONT-FAMILY: 'Arial'; FONT-SIZE: 15pt; FONT-WEIGHT: bold; LINE-HEIGHT: 25pt } A:link    {text-decoration: none;} A:visited {text-decoration: none;} A:active  {text-decoration: none;} A:hover   {text-decoration: none;} P { FONT-FAMILY: 'Arial'; FONT-SIZE: 10pt; LINE-HEIGHT: 13pt } #pulloutInterface { BACKGROUND-COLOR: #NONE; CLIP: rect(0px 305px 250px 0px); HEIGHT: 250px; LEFT: 180px; POSITION: absolute; TOP: 10px; VISIBILITY: visible; WIDTH: 400px; layer-background-color: #NONE } #pulloutSidebar1 { BACKGROUND-COLOR: #003366; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 5px; WIDTH: 100px; layer-background-color: #DEDEDE } #pulloutSidebar2 { BACKGROUND-COLOR: #003399; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 40px; WIDTH: 100px; layer-background-color: yellow } #pulloutSidebar3 { BACKGROUND-COLOR: #0033cc; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 75px; WIDTH: 100px; layer-background-color: blue } #pulloutSidebar4 { BACKGROUND-COLOR: #0033ff; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 110px; WIDTH: 100px; layer-background-color: red } #pulloutContent { BACKGROUND-COLOR: #NONE; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px; LEFT: 110px; POSITION: absolute; TOP: 5px; WIDTH: 285px; layer-background-color: #NONE } #pulloutContent1 { BACKGROUND-COLOR: #003366; CLIP: rect(0px 185px 240px 0px); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 185px; layer-background-color: #DEDEDE } #pulloutContent2 { BACKGROUND-COLOR: #003399; CLIP: rect(0px 185px 240px 0px); HEIGHT: 240px; LEFT: -185px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 185px; layer-background-color: #C5C5C5 } #pulloutContent3 { BACKGROUND-COLOR: #0033cc; CLIP: rect(0px 185px 240px 0px); HEIGHT: 240px; LEFT: -185px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 185px; layer-background-color: #A2A2A2 } #pulloutContent4 { BACKGROUND-COLOR: #0033ff; CLIP: rect(0px 185px 240px 0px); HEIGHT: 240px; LEFT: -185px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 185px; layer-background-color: #7E7E7E } </STYLE> </head> <body background bgColor="ebe2d3" onload="init()"> <DIV align=center> <CENTER> <DIV id=pulloutInterface> <DIV id=pulloutSidebar1> <P align=center><A href="javascript:pullout(pullout1)">Başlık 1</A></P></DIV> <DIV id=pulloutSidebar2> <P align=center><A href="javascript:pullout(pullout2)">Başlık 2</A></P></DIV> <DIV id=pulloutSidebar3> <P align=center><A href="javascript:pullout(pullout3)">Başlık 3</A></P></DIV> <DIV id=pulloutSidebar4> <P align=center><A href="javascript:pullout(pullout4)">Başlık 4</A></P></DIV> <DIV id=pulloutContent> <DIV id=pulloutContent1 style="width: 185; height: 240"> <P align=center><STRONG><font color="#00FFFF">Başlık 1</font></STRONG> <TABLE border=0 width=275> <TBODY> <TR> <TD> <A href="http://www.gezginler.net">Link Adı<BR> </a> <A href="http://www.gezginler.net">Link Adı<BR> </a><A href="http://www.gezginler.net">Link Adı<BR> </a> <A href="http://www.gezginler.net">Link Adı<BR> </a></P></TR></TBODY></TABLE></DIV> <DIV id=pulloutContent2> <P align=center><STRONG><font color="#00FFFF">Başlık 2</font></STRONG> <TABLE border=0 width=275> <TBODY> <TR> <TD> <A href="http://www.gezginler.net">Link Adı<BR> </a> <A href="http://www.gezginler.net">Link Adı<BR> </a><A href="http://www.gezginler.net">Link Adı<BR> </a> <A href="http://www.gezginler.net">Link Adı<BR> </a> </TD></TR></TBODY></TABLE></DIV> <DIV id=pulloutContent3> <P align=center><STRONG><font color="#00FFFF">Başlık 3</font></STRONG> <TABLE border=0 width=275> <TBODY> <TR> <TD> <A href="http://www.gezginler.net">Link Adı<BR> </a> <A href="http://www.gezginler.net">Link Adı<BR> </a><A href="http://www.gezginler.net">Link Adı<BR> </a> <A href="http://www.gezginler.net">Link Adı<BR> </a></TD></TR></TBODY></TABLE></DIV> <DIV id=pulloutContent4> <P align=center><STRONG><font color="#00FFFF">Başlık 4</font></STRONG> <TABLE border=0 width=275> <TBODY> <TR> <TD><A href="http://www.gezginler.net">Link Adı<BR> </a> <A href="http://www.gezginler.net">Link Adı<BR> </a><A href="http://www.gezginler.net">Link Adı<BR> </a> <A href="http://www.gezginler.net">Link Adı<BR> </a> </TR></TBODY></TABLE></CENTER></DIV></BODY></HTML>

<style> .menulines{ border:2.5px solid #F0F0F0; } .menulines a{ text-decoration:none; color:black; } </style> <script language="JavaScript1.2"> //Visit http://www.dynamicdrive.com function over_effect(e,state){ if (document.all) source4=event.srcElement else if (document.getElementById) source4=e.target if (source4.className=="menulines") source4.style.borderStyle=state else{ while(source4.tagName!="TABLE"){ source4=document.getElementById? source4.parentNode : source4.parentElement if (source4.className=="menulines") source4.style.borderStyle=state } } } </script> </head> <body> <table border="1" width="120" cellspacing="2" cellpadding="1" onMouseover="over_effect(event,'outset')" onMouseout="over_effect(event,'solid')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')" style="background-color:#115585" bordercolor="#000066"> <tr><td align="center" width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b><font color="#333300">MENÜ</font></b></font></td></tr> <tr><td width="100%" class="menulines" bgcolor="#c2cada" bordercolor="#000000"><a href="http://www.adresiniz.com">  <font color="#000066"><strong>Link 1</strong></font></a></td></tr> <tr><td width="100%" class="menulines" bgcolor="#c2cada" bordercolor="#000000"><a href="http://www.adresiniz.com"> <font color="#000066"><strong>Link 2</strong></a></font></td></tr> <tr><td width="100%" class="menulines" bordercolor="#000000" bgcolor="#c2cada"><a href="http://www.adresiniz.com"> <font color="#000066"><strong>Link 3</strong></a></font></td></tr> <tr><td width="100%" class="menulines" bgcolor="#c2cada" bordercolor="#000000"><a href="http://www.adresiniz.com"> <font color="#000066"><strong>Link 4</strong></a></font></td></tr> <tr><td width="100%" class="menulines" bgcolor="#c2cada" bordercolor="#000000"><a href="http://www.adresiniz.com"> <font color="#000066"><strong>Link 5</strong></a></font></td></tr></table>