Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Javascript: Alasvetovalikko...

Sivun loppuun

makeuu [10.08.2004 21:01:54]

#

Sain koodin toimimaan :) Jätän tämän kuitenkin tänne, jos joku tarvitsee :)

Koodi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> esimerkki :P </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
A {
	font: 12px Tahoma black;
}
#tablist {
	padding: 3px 0;
	margin-left: 0;
	margin-bottom: 0;
	margin-top: 0.1em;
	font: bold 12px Verdana;
}
#tablist li {
	list-style: none;
	display: inline;
	margin: 0;
}
#tablist li a {
	text-decoration: none;
	padding: 3px 0.5em;
	border: 1px solid silver;
	background: white;
}
#tablist li a:link, #tablist li a:visited {
	color: navy;
}
#tablist li a.current {
	background: silver;
}
#tabcontentcontainer {
	width:480px;
	height:40px;
}
.tabcontent {
	padding: 3px 0.5em;
	display:none;
	font:12px Verdana;
}
</style>
<script type="text/javascript">
var initialtab=[1, "sc1"]
var turntosingle=0
var disabletablinks=0
var previoustab=""
if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject) {
	if (disabletablinks==1)
	aobject.onclick=new Function("return false")
	if (document.getElementById) {
		highlighttab(aobject)
		if (turntosingle==0) {
			if (previoustab!="")
			document.getElementById(previoustab).style.display="none"
			document.getElementById(cid).style.display="block"
			previoustab=cid
		}
	}
}

function slideshow()
{
	self.setTimeout("expandcontent('tyhja', this)",3000)
}

function highlighttab(aobject) {
	if (typeof tabobjlinks=="undefined")
	collecttablinks()
	for (i=0; i<tabobjlinks.length; i++)
	tabobjlinks[i].className=""
	aobject.className="current"
}

function collecttablinks() {
	var tabobj=document.getElementById("tablist")
	tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload() {
	collecttablinks()
	expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
	window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
	window.attachEvent("onload", do_onload)
else if (document.getElementById)
	window.onload=do_onload
</script>
</HEAD>

<BODY>

<ul id="tablist">
<li><a href="#" onMouseover="expandcontent('sc1', this);" onMouseOut="slideshow('tyhja');">Linkki 1</a></li>&nbsp;&nbsp;++
<li><a href="#" onMouseover="expandcontent('sc2', this);" onMouseOut="slideshow('tyhja');">Linkki 2</a></li>&nbsp;&nbsp;++
<li><a href="#" onMouseover="expandcontent('sc3', this);" onMouseOut="slideshow('tyhja');">Linkki 3</a></li>&nbsp;&nbsp;++
<li><a href="#" onMouseover="expandcontent('sc4', this);" onMouseOut="slideshow('tyhja');">Linkki 4</a></li>&nbsp;&nbsp;++
<li><a href="#" onMouseover="expandcontent('sc5', this);" onMouseOut="slideshow('tyhja');">Linkki 5</a></li>
</ul>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent" style="border:1px solid silver;">
Linkkilistan kohdan 1 linkit
</div>
<div id="sc2" class="tabcontent" style="border:1px solid silver;">
Linkkilistan kohdan 2 linkit
</div>

<div id="sc3" class="tabcontent" style="border:1px solid silver;">
Linkkilistan kohdan 3 linkit
</div>

<div id="sc4" class="tabcontent" style="border:1px solid silver;">
Linkkilistan kohdan 4 linkit
</div>

<div id="sc5" class="tabcontent" style="border:1px solid silver;">
Linkkilistan kohdan 5 linkit
</div>

<div id="tyhja" class="tabcontent">
&nbsp;
</div>

</BODY>
</HTML>

edit: pieniä muutoksia ja sisennyksiä.
edit: https://www.ohjelmointiputka.net/koodivinkit/24463-javascript-alasvetovalikko

Tempfile [10.08.2004 21:57:15]

#

Tee funktio joka piilottaa valikon ja laita se valikon näyttämisen yhteydessä setTimeoutilla ajettavaksi halutun ajan päästä.

Blaze [10.08.2004 22:17:52]

#

MUN O PALJO HIENONPI!1111
http://pp.kpnet.fi/blaze/temp/winmenu2.html
(Muistaakseni vuodelta 2002)

Antti Laaksonen [10.08.2004 22:32:30]

#

Blaze kirjoitti:

(Muistaakseni vuodelta 2002)

Minusta mainostelit tuota vapaalla.orgissa jo vuonna 2001... :)

makeuu [10.08.2004 22:35:16]

#

Mut tuo mun on paljo yksinkertaisempi :P

Olga [11.08.2004 17:34:40]

#

Tuohan bugittaa ainakin Firefoxilla ku vanha lehmä. Paljon parempi on tuo Blazen versio, tai sit vaihtoehtoisesti A List Apart:n CSS/DOM - yhdistelmä. Ja taatusti toimii.

Meitsi [12.08.2004 20:08:43]

#

Blaze --> toi on muuten siisti. Fontti vaan on ruma.

Blaze [12.08.2004 20:19:15]

#

Meitsi kirjoitti:

Fontti vaan on ruma.

Fontti on sun selaimen oletusfontti. Jos et siitä tykkää, niin selain varmasti antaa vaihtaa sen.

Meitsi [12.08.2004 20:59:10]

#

Blaze kirjoitti:

Meitsi kirjoitti:

Fontti vaan on ruma.

Fontti on sun selaimen oletusfontti. Jos et siitä tykkää, niin selain varmasti antaa vaihtaa sen.

hups...

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta