Avatar billede starhand Nybegynder
04. maj 2002 - 18:04 Der er 10 kommentarer og
1 løsning

Horisontal menu

Er der nogen, der kender et link til en meget simpel javascript-menu?
Den er lidt speciel, da det skal være en horisontal top-menu, men hvor hvert enkelt menu-punkt skal foldes ud til en vandret dropdown-menu. Dvs. ikke et vandret centreret rullegardin, men menupunkterne udbredes vandret, så menuen max fylder to linier i højden (40 px)

Hvis der er én der han en idé eller et link?



















































Avatar billede hotcut Nybegynder
04. maj 2002 - 18:06 #1
www.droidarena.com
du kan "hente" et script fra deres source, når du er logget ind.
Det virker ret godt, og ser ret kult ud!
Avatar billede starhand Nybegynder
04. maj 2002 - 22:41 #2
hhmmm, det virker hverken som det rigtige, eller særligt nemt at gå til...

Det skal såmænd blot være en simpel tekstmenu, som sidder ovenpå en topbjælke - problemet er blot at lave den, så den er 2 gange horisontal...
Avatar billede cdc Novice
04. maj 2002 - 22:44 #3
Er en applet men kig på denne: http://www.viewsource.dk/applets/Menus/Salang/Salang.htm

/cdc
Avatar billede starhand Nybegynder
04. maj 2002 - 23:34 #4
Fantastisk!!, så simpelt skal det være; jeg vil lige prøve, om jeg kan skrabe alle farver, knapper etc. væk...

Tak
Avatar billede starhand Nybegynder
04. maj 2002 - 23:50 #5
Jeg kunne dog godt bruge at baggrunden kunne være gennemsigtig...
Avatar billede cdc Novice
05. maj 2002 - 00:11 #6
jeg mener at det er umulig i en applet, men jeg ved du kan lave den i DW med CSS og hidden layers, har set det før
Avatar billede cdc Novice
05. maj 2002 - 00:22 #7
Jeg har faktisk en her, er det noget i den stil ?

<html>
<head>
<title></title>
<style type='text/css'>A.menu:link {color: #ffffff; text-decoration: none; font-size: 8pt;}
A.menu:visited {color: #ffffff; text-decoration: none; font-size: 8pt;}
A.menu:active {color: #0D6D93; text-decoration: none; font-size: 8pt;}
A.menu:hover {color: #0D6D93; text-decoration: none; font-size: 8pt;}
A.submenu:link {color: #0D6D93; text-decoration: none;font-size: 8pt;}
A.submenu:visited {color: #0D6D93; text-decoration: none;font-size: 8pt;}
A.submenu:active {color: #0D6D93; text-decoration: none;font-size: 8pt;}
A.submenu:hover {color: #ffffff; text-decoration: none;font-size: 8pt;}

.menustruc {position: absolute; top: 4px; visibility: visible;}
.referencer {position: absolute; top: 19px; visibility: hidden;}
</style>
<script type="text/javascript">function show(object) {
if (document.getElementById && document.getElementById(object) != null) {
    document.getElementById(object).style.visibility='visible';
    document.getElementById(object).style.display='block';
}
else if (document.layers && document.layers[object] != null)
          document.layers[object].visibility = 'visible';
else if (document.all) {
          document.all[object].style.zIndex = 100;
          document.all[object].style.visibility = 'visible';
}
}

function hide(object) {
if (document.getElementById && document.getElementById(object) != null) {
    document.getElementById(object).style.visibility='hidden';
    document.getElementById(object).style.display='none';
}
else if (document.layers && document.layers[object] != null)
          document.layers[object].visibility = 'hidden';
else if (document.all)
          document.all[object].style.visibility = 'hidden';
}

if (document.getElementById) { document.write('<style>.referencer {position:absolute;visibility:hidden;display:none}</style>'); }
</script>
<base target="hovedramme">
</head>
<body leftmargin="0" rightmargin="0" topmargin="0" marginwidth="0" marginheight="0" link="#FFFFFF" vlink="#ffffff" alink="#0D6D93" bgcolor="#000000" bgproperties="fixed">
<div id="L4" class="menustruc">
    <table width="745" nowrap cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td align="right"><font face="Verdana"><a class="menu" href="profil.htm" onFocus="blur()" target="right" onmouseover="hide('L2');return">[ Firmaprofil ]</a><img src="images/trans.gif" width="20" height="1" border="0"><a class="menu" href="prod.htm" onFocus="blur()" target="right" onmouseover="hide('L2');return">[ CD Produktion ]</a><img src="images/trans.gif" width="20" height="1" border="0"><a class="menu" href="design.htm" onFocus="blur()" target="right" onmouseover="hide('L2');return">[ Webdesign ]</a><img src="images/trans.gif" width="20" height="1" border="0"><a class="menu" href="ref.htm" onFocus="blur()" target="right" onmouseover="show('L2');return">[ Referencer ]</a><img src="images/trans.gif" width="20" height="1" border="0"><a class="menu" href="contact.htm" onFocus="blur()" target="right" onmouseover="hide('L2');return">[ Kontakt os ]</a>
              </font>
            </td>
        </tr>
    </table>
</div>
<div id="L2" class="referencer">
    <table width="742" cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td height="20">
                <div align="right"><font face="Verdana" size="1"><a class="submenu" href="refweb_01.html" onFocus="blur()" target="right">Webdesign</a><img src="images/trans.gif" width="20" height="1" border="0"><a class="submenu" href="refmaster.html" onFocus="blur()" target="right">Webmaster</a><img src="images/trans.gif" width="20" height="1" border="0"><a class="submenu" href="refcd.html" onFocus="blur()" target="right">CD Produktion</a></font>
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
Avatar billede cdc Novice
05. maj 2002 - 00:23 #8
før musen over referencer
Avatar billede tofferman Nybegynder
05. maj 2002 - 00:25 #9
Inde på http://www.javaboutique.com har de en hel bunke af den slags :-) Og de fleste er gratis :-))
Avatar billede starhand Nybegynder
05. maj 2002 - 18:22 #10
/cdc scorer pointene for det dejlige overblik og hurtig udrykning...
Avatar billede cdc Novice
05. maj 2002 - 20:59 #11
tanx :o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester