Dropdown meny med fördröjning

Hej!

Jag vill skapa en dropdown meny som liksom är långsam, fördröjd.

Just nu har jag ett script som man kanske kan utgå från. Klistrar in det nedan. Tacksam för svar.

<script language="JavaScript1.1" type="text/javascript">
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 
</script>

Vad menar du med långsam och fördröjd?
Menar du att animationen ska vara långsam - alltså att den ska röra sig från punkt A till punkt B över en längre tid,
eller vill du ha en fördröjning innan animationen - alltså att det tar en viss tid INNAN den börjar röra sig från punkt A till punkt B ? eller efter?

Förtydliga! =)

doridori skrev:

Vad menar du med långsam och fördröjd?
Menar du att animationen ska vara långsam - alltså att den ska röra sig från punkt A till punkt B över en längre tid,
eller vill du ha en fördröjning innan animationen - alltså att det tar en viss tid INNAN den börjar röra sig från punkt A till punkt B ? eller efter?

Förtydliga! =)

Exakt, animeringen ska vara långsam.

Anders Gusten skrev:

Exakt, animeringen ska vara långsam.

Jag kan nada om javascript, men svarar ändå:

Du har ju tre variabler högst upp (i millisekunder): 500, 0 och 0.
Har du provat att ändra en i taget till 5000 eller nåt och kollat vad som händer?

Danne V skrev:

Jag kan nada om javascript, men svarar ändå:

Du har ju tre variabler högst upp (i millisekunder): 500, 0 och 0.
Har du provat att ändra en i taget till 5000 eller nåt och kollat vad som händer?

Det hjälper inte, för scriptet har ingen animation alls som det ser ut nu.
Det måste byggas till, och då kommer vi till frågan hur mycket Javascript du kan Anders?

Enklast görs en sådan animering med hjälp av jQuery.
Här är några lysande tutorials för att lära sig allmänt om animering med jQuery: http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
Och här har du något mer specifikt mot vad du vill göra: http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/

Du får alltså skriva om hela skriptet.

Ett annat alternativ är att använda CSS transitions istället, men då har du inte riktigt lika stor kontroll över animationen, samt att du förlorar kompatibilitet med förra generationens webbläsare.

doridori skrev:

Det hjälper inte, för scriptet har ingen animation alls som det ser ut nu.

Där ser man. Jag bara chansade. :-)
Å andra sidan finns det ju tonvis med menyer som bara är att ladda ner. TS kan ju söka på t.ex. "sliding javascript menu", testa och välja.

Tack för hjälpen!
Jag har grundläggande kunskaper i javascript och är därför tacksam för all hjälp jag kan få. Jag skulle helst vilja få hjälp med att bygga ut javascriptet då jag inte kan någonting om Jquery.

Här hittade jag hur jag vill ha det med undantag att jag vill ha en horisontal meny.

http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu_slidehorizontal

är ju bara att ändra om CSS koden och ändra om animeringen att istället för left skör top (sen är ju html koden inte den bästa ifrån w3schools, inte heller JS koden).

voigtann1 skrev:

är ju bara att ändra om CSS koden och ändra om animeringen att istället för left skör top (sen är ju html koden inte den bästa ifrån w3schools, inte heller JS koden).

Jag förstår inte hur man ändrar den till horisontell. "Left skör top"?

skör => kör

voigtann1 skrev:

skör => kör

tack, man ska ändra från "left" till top i javascriptet alltså? sedan ska man ändra i css:en också?

Ja, i princip så är det bara att ändra det, -135 pekar ju på hur "fel" menyn är by default, det ser du i CSS:en samma sak med 12, är 12px bred för att menyn inte skall försvinna helt.

Jag förstår scriptet i stort men inte hur jag ska ändra koden för att få menyn horisontell.

<html>
<head>
<style>
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}

table.nav
{
background:black;
position:relative;
font: bold 80% arial;
top:0px;
left:-135px;
}
</style>
<script type="text/javascript">
var i=-135;
var intHide;
var speed=3;
function showmenu()
{
clearInterval(intHide);
intShow=setInterval("show()",10);
}
function hidemenu()
{
clearInterval(intShow);
intHide=setInterval("hide()",10);
}
function show()
{
if (i<-12)
{
i=i+speed;
document.getElementById('myMenu').style.left=i;
}
}
function hide()
{
if (i>-135)
{
i=i-speed;
document.getElementById('myMenu').style.left=i;
}
}
</script>
</head>

<body>
<table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()">
<tr><td class="menu"><a href="/default.asp">HOME</a></td>
<td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr>
<tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
</table>
<p>Mouse over the MENU to show/hide the menu</p>
<p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p>
</body>
</html>

Testa då detta

<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue;width:160px}
td.meny {background:#FF8080;width:20px;text-align:center}
table.nav
{
background:black;
position:relative;
font: bold 80% arial;
top:0px;
left:-830px;
margin-left:10px;
}

</style>
<script type="text/javascript">
var i=-830;
var intHide;
var speed=5;
function showmenu()
{
clearInterval(intHide);
intShow=setInterval("show()",10);
}
function hidemenu()
{
clearInterval(intShow);
intHide=setInterval("hide()",10);
}
function show()
{
if (i<-12)
{
i=i+speed;
document.getElementById('myMenu').style.left=i;
}
}
function hide()
{
if (i>-830)
{
i=i-speed;
document.getElementById('myMenu').style.left=i;
}
}
</script>
</head>

<body>

<table id="myMenu" class="nav" width="840px" onmouseover="showmenu()" onmouseout="hidemenu()">
<tr>
<td class="menu"><a href="/default.asp">HOME</a></td>
<td class="menu"><a href="/asp/default.asp">ASP</a></td>
<td class="menu"><a href="/js/default.asp">JavaScript</a></td>
<td class="menu"><a href="default.asp">DHTML</a></td>
<td class="menu"><a href="/vbscript/default.asp">VBScript</a></td>
<td class="meny">M<br />E<br />N<br />Y</td>
</tr>
</table>

</body>
</html>

bossse skrev:

Testa då detta

<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue;width:160px}
td.meny {background:#FF8080;width:20px;text-align:center}
table.nav
{
background:black;
position:relative;
font: bold 80% arial;
top:0px;
left:-830px;
margin-left:10px;
}

</style>
<script type="text/javascript">
var i=-830;
var intHide;
var speed=5;
function showmenu()
{
clearInterval(intHide);
intShow=setInterval("show()",10);
}
function hidemenu()
{
clearInterval(intShow);
intHide=setInterval("hide()",10);
}
function show()
{
if (i<-12)
{
i=i+speed;
document.getElementById('myMenu').style.left=i;
}
}
function hide()
{
if (i>-830)
{
i=i-speed;
document.getElementById('myMenu').style.left=i;
}
}
</script>
</head>

<body>

<table id="myMenu" class="nav" width="840px" onmouseover="showmenu()" onmouseout="hidemenu()">
<tr>
<td class="menu"><a href="/default.asp">HOME</a></td>
<td class="menu"><a href="/asp/default.asp">ASP</a></td>
<td class="menu"><a href="/js/default.asp">JavaScript</a></td>
<td class="menu"><a href="default.asp">DHTML</a></td>
<td class="menu"><a href="/vbscript/default.asp">VBScript</a></td>
<td class="meny">M<br />E<br />N<br />Y</td>
</tr>
</table>

</body>
</html>

Tack!

Personligen tycker jag dock att denna variant är snyggare

<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue;width:150px;text-align:center}
td.meny {background:#FF8080;width:60px;text-align:center}
table.nav
{
background:black;
position:relative;
font: bold 80% arial;
top:0px;
left:-800px;
margin-left:10px;
}

</style>
<script type="text/javascript">
var i=-800;
var intHide;
var speed=5;
function showmenu()
{
clearInterval(intHide);
intShow=setInterval("show()",10);
}
function hidemenu()
{
clearInterval(intShow);
intHide=setInterval("hide()",10);
}
function show()
{
if (i<-12)
{
i=i+speed;
document.getElementById('myMenu').style.left=i;
}
}
function hide()
{
if (i>-800)
{
i=i-speed;
document.getElementById('myMenu').style.left=i;
}
}
</script>
</head>

<body>

<table id="myMenu" class="nav" width="840px" onmouseover="showmenu()" onmouseout="hidemenu()">
<tr>
<td class="menu"><a href="/default.asp">HOME</a></td>
<td class="menu"><a href="/asp/default.asp">ASP</a></td>
<td class="menu"><a href="/js/default.asp">JavaScript</a></td>
<td class="menu"><a href="default.asp">DHTML</a></td>
<td class="menu"><a href="/vbscript/default.asp">VBScript</a></td>
<td class="meny">M E N Y</td>
</tr>
</table>

</body>
</html>

Anders Gusten, bosses kod fungera inte alls (doctype ihop med onmouseover fungera inte alls bra), och den är fortfarande animering från vänster (om den hade fungerat).

voigtann1 skrev:

Anders Gusten, bosses kod fungera inte alls (doctype ihop med onmouseover fungera inte alls bra), och den är fortfarande animering från vänster (om den hade fungerat).

Ja, jag såg det sedan.

Nu har jag ett script som jag gillar. Jag har bara ett problem när jag ska göra menyknapp tre. Då kommer alternativet upp under fölrsta menyknappen. Anledningen är att jag kopierat första menyn. När scripten anropas på onMouseOver så dyker ord "one" och "two" upp, men jag hittar dom inte någonstans i javaspriptetet eller CSS-koden. Är det någon som kan hjälpa mig med detta, hur gör jag en "three" alltså.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Dropdown Menu Demo</title>
<style type="text/css">
body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
</style>
<script type="text/javascript" </script>

var DDSPEED = 10;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}

// collapse the menu //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}
</script>
</head>
<body>

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>

<div style="clear:both" />

</body>
</html>