PDA

View Full Version : javascript menu



salash
Jul 24th, 2007, 10:47 AM
hi all ;
i am working at a searching menu which is working in browser . There will be a menu like that

ALL ECONOMY SPOR
Search |_____| // <-- it is a text box :)

it will be at first then if i click economy or spor it will be underlined .. but page wont refresh . i search some and i think i must use
css with html , javascript .. and how can i do like that ?
thanks..

salash
Jul 25th, 2007, 10:18 AM
i have some questions .. thanks at first

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>


<style type="text/css">
a { text-decoration: none;}
.SALASH { display:none; }
</style>
<script type="text/javascript">

function degis(n) {
var L, i = 0;
while( L = document.getElementById('a'+(i++))) { document.getElementById('d'+(i-1)).style.display= "none";
L.style.textDecoration = "none"; }
document.getElementById('a'+n).style.textDecoration = "underline" ;
document.getElementById('d'+n).style.display= "block";
}
</script>
</head>


<body>

<a href="javascript:degis()" >TUM </a>
<a href="javascript:degis(0)" id="a0">EKONOMi </a>
<a href="javascript:degis(1)" id="a1">GUNDEM </a>
<a href="javascript:degis(2)" id="a2">SPOR </a>

<div class="SALASH" >TUM</div>
<div class="SALASH" id="d0">EKONOMI1 EKONOMI2 EKONOMI3</div>
<div class="SALASH" id="d1">GUNDEM1 GUNDEM2 GUNDEM3</div>
<div class="SALASH" id="d2">SPOR1 SPOR2 SPOR3</div>

<br>

<form id="myform">
<input type="text" class="textinput" /> <input class="submit" type="submit" value="ara" />
</form>

</body>
</html>

i want that when i click ekonomi,gundem or spor then there will be ekonomi1 (and i should click ekonomi1) in the underside .. and then if i click spor there will be spor1 like a link (to click ) in the underside ..

salash
Jul 26th, 2007, 09:48 AM
i answer my own questions . i did it , like that ;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8"
http-equiv="content-type">
<title></title>
<style type="text/css">
a { text-decoration: none;}
.SALASH { display:none; }
#menunanesi{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
#menunanesi ul{
font: bold 11px Arial;
margin:0;
margin-left: 40px; padding: 0;
list-style: none;
}
#menunanesi li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
#menunanesi a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Default menu color*/
border-bottom: 1px solid white;
}
#menunanesi a:hover{
background-color: gray; /*Menu hover bgcolor*/
}
#menunanesi #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ border-color: #D25A0B; /*Brown color theme*/ }
#menunanesiline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #D25A0B; /*Brown color theme*/ }
#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
padding: 0;
}
#myform .textinput{
width: 190px;
border: 1px solid gray;
}
#myform .submit{
font: bold 11px Verdana;
height: 22px;
background-color: lightyellow;
}
</style>
<script type="text/javascript">
function degis(b,n,c) {
var dizi = ["e0","e1","e2","g0","g1","g2","s0","s1","s2","d4"];
var el, z = 0;
while(el = dizi[z++]){ document.getElementById(el).style.display = "none"; }
var dizi2 = ["ee0","ee1","ee2","gg0","gg1","gg2","ss0","ss1","ss2"];
var el2, z2 = 0;
while(el2 = dizi2[z2++]){ document.getElementById(el2).style.textDecoration = "none" ; }
var L, i = 0;
while( L = document.getElementById(b+(i++))) { document.getElementById(c+(i-1)).style.display= "none";
L.style.textDecoration = "none"; }
document.getElementById(b+n).style.textDecoration = "underline" ;
document.getElementById(c+n).style.display= "block";
}
</script>
</head>
<body>
<div id="menunanesi">
<ul>
<li id="current" style="margin-left: 1px;"><a
href="#" title="T&Uuml;M">T&Uuml;M</a></li>
<li><a href="javascript:degis('a',0,'d')" id="a0"
title="EKONOMİ">EKONOMİ</a></li>
<li><a href="javascript:degis('a',1,'d')" id="a1"
title="G&Uuml;NDEM">G&Uuml;NDEM</a></li>
<li><a href="javascript:degis('a',2,'d')" id="a2"
title="SPOR">SPOR</a> <br>
<br>
<div class="SALASH" id="d0"><a
href="javascript:degis('ee',0,'e')" id="ee0">EKONOMİ1
</a><a href="javascript:degis('ee',1,'e')" id="ee1">EKONOMİ2
</a><a href="javascript:degis('ee',2,'e')" id="ee2">EKONOMİ3
</a></div>
<div class="SALASH" id="d1">
<a href="javascript:degis('gg',0,'g')" id="gg0">G&Uuml;NDEM1
</a><a href="javascript:degis('gg',1,'g')" id="gg1">G&Uuml;NDEM2
</a><a href="javascript:degis('gg',2,'g')" id="gg2">G&Uuml;NDEM3
</a></div>
<div class="SALASH" id="d2">
<a href="javascript:degis('ss',0,'s')" id="ss0">SPOR1
</a><a href="javascript:degis('ss',1,'s')" id="ss1">SPOR2
</a><a href="javascript:degis('ss',2,'s')" id="ss2">SPOR3
</a></div>
<br>
<div class="SALASH" id="e0">e0</div>
<div class="SALASH" id="e1">e1</div>
<div class="SALASH" id="e2">e2</div>
<div class="SALASH" id="g0">g0</div>
<div class="SALASH" id="g1">g1</div>
<div class="SALASH" id="g2">g2</div>
<div class="SALASH" id="s0">s0</div>
<div class="SALASH" id="s1">s1</div>
<div class="SALASH" id="s2">s2</div>
<div class="SALASH" id="d4">
</div>
</li>
</ul>
<form id="myform">
<input class="textinput" type="text"> <input
class="submit" value="ara" type="submit"></form>
</div>
<div id="menunanesiline">&nbsp;</div>
</body>
</html>

StupidRalph
Jul 26th, 2007, 09:54 AM
Persistence pays off :)