Det blir bra så :)
Dropdownruta
28 svar · 1 148 visningar · startad av Asa · sida 2 av 2
Frågan, av Asa
Jag skulle behöva hjälp med att skapa så att när jag för musen över en länk så kommer en ruta fram där man kan ex visa en bild och samtidigt ska all text under länken flyttas ner under denna rutan som kommer fram. Någon som har något enkelt som funkar i både IE och FF? Javascript gör de tinget om det används heller. Tacksam för svar!
Läs frågan i sin helhet →Ok. Ändrade så att hoverfunktionen bara finns inne i ett td nu i stället för att försöka få en annan att öppna sig så nu validerar den också...
Syns i de gamla länkarna... :)
En fråga till, denna menyn?
https://www.gruvsjo.se/meny/meny.asp
Kan man få så att den öppna huvudmenyn stängs då man klickar på en annan huvudmeny?
Asa skrev:
En fråga till, denna menyn?
https://www.gruvsjo.se/meny/meny.aspKan man få så att den öppna huvudmenyn stängs då man klickar på en annan huvudmeny?
Ja det går med lite pill, jag har en animerad variant som du kan titta på på https://www.egenart.org/test/nr1/
Ska se om jag lyckas modifiera din meny.js så att den gör det... återkommer :)
headbug skrev:
Ja det går med lite pill, jag har en animerad variant som du kan titta på på https://www.egenart.org/test/nr1/
Ska se om jag lyckas modifiera din meny.js så att den gör det... återkommer :)
Det var inte så lätt som jag hoppades, ditt JS använder events och eventhandles på det klickade elementet så en modifiering rakt av är inte aktuell, kolla in det jag har länkat till och om du inte vill ha animeringen så kan man sätta en timer till 0 tror jag :)
/HB
Kikar på den me animeringen och den såg ju tuff ut. Blir nog den jag använder. Om ingen annan kan få till menyn.
Asa skrev:
Kikar på den me animeringen och den såg ju tuff ut. Blir nog den jag använder. Om ingen annan kan få till menyn.
Ok, säg till om du vill att jag skickar dig filerna, om du inte laddar ner dom själv från sidan!
Jag sparar ner filerna tror jag men maila dem till Asa@gruvsjo.se för säkerhets skull.
Här en liknande meny som Headbug!
Modifierad från dropdownmenyn på min sida som kan ses HÄR
Bara att ta bort lu1 t.o.m. lu5 om man ej vill ha färgade undermenyer.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type=text/css>
html, body {background-color:green}
dl, dt, dd, ul, li {margin:0;padding:0;list-style-type:none;z-index:200}
dt {height:22px;font-size:12pt;border:1px solid black;}
li {position:relative; height:22px;font-size:12pt;border:1px solid black;}
#menu {position:absolute;top:50px;left:20px; width:178px;border:1px solid;background-color:green;}
#menu dt {cursor:pointer;font-weight:bold;color:blue;}
#menu li a, #menu dt a {height:20px;border:none;font-weight:normal;text-decoration:none;display:block;color:red}
#menu li a:hover, #menu dt a:hover {text-decoration:none}
#lu1 {position:relative; left:50px;width:125px;background-color:#FFCC00;}
#lu2 {position:relative; left:50px;width:125px;background-color:#FF9999;}
#lu3 {position:relative; left:50px;width:125px;background-color:#CCCCCC;}
#lu4 {position:relative; left:50px;width:125px;background-color:#CCCC00;}
#lu5 {position:relative; left:50px;width:125px;background-color:#CCCCFF;}
</style>
<script type="text/javascript">
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=15; i++)
{if (document.getElementById('smenu'+i))
{document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
</head>
<body>
<dl id="menu">
<dt onclick="javascript:show('smenu1');">Meny 1</dt>
<dd id="smenu1"><ul id="lu1">
<li><a href=http://www.google.se/\>1.1</a></li>
<li><a href=http://www.yahoo.com>1.2</a></li>
<li><a href=http://www.telia.se>1.3</a></li>
<li><a href=http://www.aftonbladet.se>1.4</a></li>
<li><a href=http://www.svt.se>1.5</a></li>
</ul></dd>
<dt onclick="javascript:show('smenu2');">Meny 2</dt>
<dd id="smenu2"><ul id="lu2">
<li><a href=http://www.sida2.1.htm>2.1</a></li>
<li><a href=http://www.sida2.2.htm>2.2</a></li>
<li><a href=http://www.sida2.3.htm>2.3</a></li>
<li><a href=http://nebk.sida2.4.htm>2.4</a></li>
</ul></dd>
<dt onclick="javascript:show('smenu3');">Meny 3</dt>
<dd id="smenu3"><ul id=lu3>
<li><a href=http://www.google.se>3.1</a></li>
<li><a href=http://www.telia.com>3.2</a></li>
<li><a href=http://www.yahoo.se>3.3</a></li>
</ul></dd>
<dt onclick="javascript:show('smenu4');">Meny 4</dt>
<dd id="smenu4"><ul id=lu4>
<li><a href=http://www.sida41.htm>4.1</a></li>
<li><a href=http://www.sida42.htm>4.2</a></li>
<li><a href=http://www.sida43.htm>4.3</a></li>
<li><a href=http://www.sida44.htm>4.4</a></li>
<li><a href=http://www.sida45.htm>4.5</a></li>
</ul></dd>
<dt onclick="javascript:show('smenu5');">Meny 5</dt>
<dd id="smenu5"><ul id=lu5>
<li><a href=http://www.sida51.htm>5.1</a></li>
<li><a href=http://www.sida52.htm>5.2</a></li>
<li><a href=http://www.sida53.htm>5.3</a></li>
</ul>
</dd>
</body>
</html>