15 svar · 407 visningar · startad av Jesper T
Med risk för felpostning.
För ett tag sedan så hade telia en liten pil som gled in från sidan när man hovrade över länkarna i menyn.
Har någon sätt något liknande script?
Crossbrowser.
De hade gjort detta i Flash men hittar du ett javascript som fungerar så posta gärna en länk. :)
Har för mig att det var dhtml men, men....
Jag får leta vidare.
Kanske det var nåt i stil med detta då?
<HTML>
<head>
<style>
<!--
#slidemenubar, #slidemenubar2{position:absolute; border:1.5px solid blue; background-color:silver;
layer-background-color:#188410; font:bold 12px Verdana; line-height:20px; }
body {background-color:green; color:yellow}
A:link {text-decoration: none;color: lightgreen;}
A:active {text-decoration: none;color: lime;}
A:visited {text-decoration: none;color: darkgreen;}
A:hover {text-decoration: underline;color: yellow;}
-->
</style>
</head>
<body>
<script language="JavaScript1.2">
/***********************************************
* Sliding Menu Bar Script 2- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
* This notice must stay intact for use
* Visit [url]http://www.dynamicdrive.com/for[/url] full source code
***********************************************/
var slidemenu_width=160 //specify width of menu (in pixels)
var slidemenu_reveal=12 //specify amount that menu should protrude initially
var slidemenu_top=170 //specify vertical offset of menu on page
var ns4=document.layers?1:0
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all?1:0
if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:'+((slidemenu_width-slidemenu_reveal)*-1)+'; top:'+slidemenu_top+'; width:'+slidemenu_width+'" title="Press x to expand the menu, z to contract it">')
else if (ns4){
document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' visibility=hide>')
}
var sitems=new Array()
///////////Edit below/////////////////////////////////
//siteitems[x]=["Item Text", "Optional URL associated with text"]
sitems[0]=["<big><font face='Arial'>Site menu </font></big>", ""]
sitems[1]=["Menus And Navigation", "http://www.dynamicdrive.com/dynamicindex1/]
sitems[2]=["Document Effects", "http://www.dynamicdrive.com/dynamicindex3/]
sitems[3]=["Scrollers", "http://www.dynamicdrive.com/dynamicindex2/]
sitems[4]=["Image Effects", "http://www.dynamicdrive.com/dynamicindex4/]
sitems[5]=["Links And Buttons", "http://www.dynamicdrive.com/dynamicindex5/]
sitems[6]=["Dynamic Clocks & Dates", "http://www.dynamicdrive.com/dynamicindex6/]
sitems[7]=["Text Animations", "http://www.dynamicdrive.com/dynamicindex10/]
sitems[8]=["Browser Window", "http://www.dynamicdrive.com/dynamicindex8/]
sitems[9]=["User System Information", "http://www.dynamicdrive.com/dynamicindex9/]
sitems[10]=["Other", "http://www.dynamicdrive.com/dynamicindex11/]
//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""
///
if (ie4||ns4||ns6){
for (i=0;i<sitems.length;i++){
if (sitems[i][1])
document.write('<a href="'+sitems[i][1]+'" target="'+target+'">')
document.write(sitems[i][0])
if (sitems[i][1])
document.write('</a>')
document.write('<br>\n')
}
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4){
document.slidemenubar.left=((slidemenu_width-slidemenu_reveal)*-1)
document.slidemenubar.visibility="show"
setTimeout("window.onresize=regenerate",400)
}
}
window.onload=regenerate2
rightboundary=0
leftboundary=(slidemenu_width-slidemenu_reveal)*-1
if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}
function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-10
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}
if (ns4)
document.captureEvents(Event.KEYPRESS)
function menuengine(e){
if (ns4||ns6){
if (e.which==120)
pull()
if (e.which==122)
draw()
}
else if (ie4){
if (event.keyCode==120)
pull()
if (event.keyCode==122)
draw()
}
}
document.onkeypress=menuengine
</script>
<script language="JavaScript1.2">
/***********************************************
* Sliding Menu Bar Script- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
* Visit [url]http://www.dynamicdrive.com/[/url] for full source code
* This notice must stay intact for use
***********************************************/
var slidemenu_width=160 //specify width of menu (in pixels)
var slidemenu_reveal=12 //specify amount that menu should protrude initially
var slidemenu_top=170 //specify vertical offset of menu on page
var ns4=document.layers?1:0
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all?1:0
if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:'+((slidemenu_width-slidemenu_reveal)*-1)+'; top:'+slidemenu_top+'; width:'+slidemenu_width+'" onMouseover="pull()" onMouseout="draw()">')
else if (ns4){
document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' onMouseover="pull()" onMouseout="draw()" visibility=hide>')
}
var sitems=new Array()
///////////Edit below/////////////
//siteitems[x]=["Item Text", "Optional URL associated with text"]
sitems[0]=["<big><font face='Arial'>Var det kanske detta du sökte?</font></big>", ""]
sitems[1]=["Menus And Navigation", "http://www.dynamicdrive.com/dynamicindex1/"]
sitems[2]=["Document Effects", "http://www.dynamicdrive.com/dynamicindex3/"]
sitems[3]=["Scrollers", "http://www.dynamicdrive.com/dynamicindex2/"]
sitems[4]=["Image Effects", "http://www.dynamicdrive.com/dynamicindex4/"]
sitems[5]=["Links And Buttons", "http://www.dynamicdrive.com/dynamicindex5/"]
sitems[6]=["Dynamic Clocks & Dates", "http://www.dynamicdrive.com/dynamicindex6/"]
sitems[7]=["Text Animations", "http://www.dynamicdrive.com/dynamicindex10/"]
sitems[8]=["Browser Window", "http://www.dynamicdrive.com/dynamicindex8/"]
sitems[9]=["User System Information", "http://www.dynamicdrive.com/dynamicindex9/"]
sitems[10]=["Other", "http://www.dynamicdrive.com/dynamicindex11/"]
//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""
///
if (ie4||ns4||ns6){
for (i=0;i<sitems.length;i++){
if (sitems[i][1])
document.write('<a href="'+sitems[i][1]+'" target="'+target+'">')
document.write(sitems[i][0])
if (sitems[i][1])
document.write('</a>')
document.write('<br>\n')
}
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4){
document.slidemenubar.left=((slidemenu_width-slidemenu_reveal)*-1)
document.slidemenubar.visibility="show"
setTimeout("window.onresize=regenerate",400)
}
}
window.onload=regenerate2
rightboundary=0
leftboundary=(slidemenu_width-slidemenu_reveal)*-1
if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}
function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-10
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}
</script>
</body>
</HTML>
Nexus86 skrev:
De hade gjort detta i Flash men hittar du ett javascript som fungerar så posta gärna en länk. :)
Jag har för mig det var dhtml/javascript, var det inte t.o.m ngn här på wf som undrade samma sak?
Tror t.o.m att vi länkade hit scriptfilerna ifrån telia men de blev redigerade pga regelbrott eller ngt i den stilen. :)
Jaha. Där ser man. Hade för mig det var gjort i Flash. :)
Nej, det var ett betydligt mer onödigt script.
En liten pil som flöt in ifrån sidan och hamnade bredvid länken som man hovrade över.
Tack ändå Bosse.
Varför göra det svårare än man behöver?
<img src="blank.gif" width="20" height="20" id="pil1" alt="" />
<a href="#" onmouseover="document.getElementById('pil1').src='pil.gif'" onmouseout="document.getElementById('pil1').src='blank.gif'">En länk</a>
<br />
<img src="blank.gif" width="20" height="20" id="pil2" alt="" />
<a href="#" onmouseover="document.getElementById('pil2').src='pil.gif'" onmouseout="document.getElementById('pil2').src='blank.gif'">En länk</a>
<br />
<img src="blank.gif" width="20" height="20" id="pil3" alt="" />
<a href="#" onmouseover="document.getElementById('pil3').src='pil.gif'" onmouseout="document.getElementById('pil3').src='blank.gif'">En länk</a>
<br />
<img src="blank.gif" width="20" height="20" id="pil4" alt="" />
<a href="#" onmouseover="document.getElementById('pil4').src='pil.gif'" onmouseout="document.getElementById('pil4').src='blank.gif'">En länk</a>
blank.gif är en blank bild och pil.gif är en animerad bild som visar en pil som kommer in ifrån vänster.
http://roslund.homeip.net/mattias/inkommande_pil/
Eller har jag missuppfattat hur du ville ha det?
dectgap: han vill ju få bilden att glida in ifrån vänster.
Qimen skrev:
dectgap: han vill ju få bilden att glida in ifrån vänster.
Ser det inte ut som att pilen glider in i mitt exempel?
Titta på sidan jag länkade till, där jag visar vad jag menar i praktiken.
Meningen är att menyn ska vara horisontell. :)
dectgap skrev:
Qimen skrev:
dectgap: han vill ju få bilden att glida in ifrån vänster.
Ser det inte ut som att pilen glider in i mitt exempel?
Titta på sidan jag länkade till, där jag visar vad jag menar i praktiken.
Jag tycker bara dina punkter para dyker upp utan ngn specialeffekt alls. :l
Eller har jag missuppfattat hur du ville ha det?
Det har du. ;)
Telias meny (som inte var flash ;)) var vågrät och pilen åkte hela vägen från skärmens västerkant till det menyalternativ som "markerades".
Web-Tor skrev:
Eller har jag missuppfattat hur du ville ha det?
Det har du. ;)
Telias meny (som inte var flash ;)) var vågrät och pilen åkte hela vägen från skärmens västerkant till det menyalternativ som "markerades".
Tack för förklaringen :)
Jag har inte sett hur Telias sida såg ut tidigare, så jag utgick bara ifrån den korta förklaringen i första inlägget.
Och om man sedan drog undan pekaren från länken så åkte pilen tillbaka till kanten och om man sedan drog pilen över en ny länk innan den hunnit fram så avbröt den sin "resa" och åkte till den länken istället. :)
Ta en titt här:
http://www.dmsproject.com/newcv/
Här har jag något liknande som jag gjorde 2001, men jag flyttar undermenyer istället för pilar. Inte helt buggfritt men det bör väl ge några ideer.
(obs att det är mouseover på indexsidan, onclick på de andra sidorna bara för att visa)
/Dan
