Avatar billede label Nybegynder
04. marts 2001 - 23:54 Der er 2 kommentarer og
1 løsning

Tekst-Rolldown menuer

Hej alle sammen,

hvordan laver man menuer som \"roller\" ned når man eks. bevæger musen hen over en tekst.

Helst som på microsoft.com eller tv2.dk

Takker på forhånd
Avatar billede jakoba Nybegynder
05. marts 2001 - 00:12 #1
www.bratta.com kan du finde en der gør det og er rimelig nem at stille op.
Avatar billede bacha Nybegynder
05. marts 2001 - 12:30 #2
Denne kode er fra min side www.david-beckham.com den kan du bare ændre!

<STYLE TYPE=\"text/css\">
<!--
.menu { position:absolute;
                visibility:hidden;
                background-color: \"#CC0000\";
                color: black;
                width: 80px;
                height: auto;
                border-style: solid;
                border-color: black;
                border-width: 2px;
                padding: 2px;
                font-size : 12px;
                font-family: \"arial\", \"helvetica\";
                font-weight: bold;
                line-height: 16px;}

.menu A:hover {color: yellow;}
.menu A {text-decoration: none; color: black;}
-->             
</style>

<SCRIPT language=\"javascript\">


//do browser detect stuff
var isNS = (navigator.appName == \"Netscape\");
var isMacIE = ( (navigator.userAgent.indexOf(\"IE 4\")  > -1) && (navigator.userAgent.indexOf(\"Mac\")  > -1) );

var layerRef = (isNS) ? \"document\" : \"document.all\";
var styleRef = (isNS) ? \"\" : \".style\";
var isDynamic = ( (document.layers || document.all) && !isMacIE );

var activeMenu = 0;
var finalClip;


function activateMenu(menuLayerRef, offset) {
       
        if (isDynamic && activeMenu != menuLayerRef) {

                if (activeMenu) hideMenu(\"menu\" + activeMenu);
                       
                menuID = \"menu\" + menuLayerRef;
                activeMenu = menuLayerRef;
       
                if (isNS) {
                        document[menuID].top = 21;
                        document[menuID].left = offset;
                } else {
                        document.all[menuID].style.pixelTop = 25;
                        document.all[menuID].style.pixelLeft = offset;
                }

                showMenu(menuID)
               
        }
        if (isDynamic && !isNS) window.event.cancelBubble = true;
}

function showMenu(layerID) {
        eval(layerRef + \'[\"\' + layerID + \'\"]\' + styleRef + \'.visibility = \"visible\"\');
}

function hideMenu(layerID) {
        eval(layerRef + \'[\"\' + layerID + \'\"]\' + styleRef + \'.visibility = \"hidden\"\');
}

function killMenu(e) {
        //check if theres a menu active
        if (activeMenu) {
                menuID = \"menu\" + activeMenu;
                if (isNS) {
                        menuX1 = document[menuID].left;
                        menuX2 = menuX1 + document[menuID].clip.right;
                        menuY1 = document[menuID].top;
                        menuY2 = menuY1 + document[menuID].clip.bottom;
                       
                        if (e.pageX < menuX1 || e.pageX > menuX2 || e.pageY > menuY2) {
                                hideMenu(menuID);
                                activeMenu = 0;
                        }
                } else {
                                hideMenu(menuID);
                                activeMenu = 0;

                }
        } 

}


function init() {
        if (isDynamic) {
                if (isNS) {
                        document.captureEvents(Event.MOUSEMOVE);
                        document.onmousemove = killMenu;
                } else {
                        document.onmouseover = killMenu;
                }
               
        }
}

//This function is included just for demonstration
function popUp(moviePath, winName, xSize, Ysize) {     
      window.open(moviePath, winName, \"width=\" + xSize + \",height=\" + Ysize + \",directories=no,status=no,scrollbars=no,resize=no,menubar=no,toolbar=no,alwaysRaised=yes\" );
}

</script>
</head>

<body bgcolor=\"#000000\" marginwidth=\"1\" marginheight=\"0\" topmargin=\"0\" leftmargin=\"50\" onload=\"init();\">

<DIV id=menu1 class=menu onMouseover=activateMenu(1,66);>
<A href=\"holdet/holdet.html\">Førsteholdet</A><BR>
<A href=\"reserveholdet/reserveholdet.html\">Reserveholdet</A><BR>
<A href=\"u19/u19.html\">U 19</A><BR>
<A href=\"u17/u17.html\">U 17</A></DIV>

<DIV id=menu2 class=menu onMouseover=activateMenu(2,119);>
<A href=\"pl_program/pl_program.html\">Premier League</A><BR>
<A href=\"cl_program/cl_program.html\">Champions League</A><BR>
<A href=\"lc_program/lc_program.html\">Liga Cup</A><BR>
<A href=\"fa_program/fa_program.html\">FA Cup</A></DIV>

<DIV id=menu3 class=menu onMouseover=activateMenu(3,190);>
<A href=\"ledelse/ledelse.html\">Ledelse</A><BR>
<A href=\"stadion/stadion.html\">Stadion</A><BR>
<A href=\"historie/historie.html\">Historie</A></DIV>

<DIV id=menu4 class=menu onMouseover=activateMenu(4,257);>
<A href=\"united_links/united_links.html\">United Links</A><BR>
<A href=\"fodbold_links/fodbold_links.html\">Fodbold Links</A><BR>
<A href=\"andre_links/andre_links.html\">Andre Links</A></DIV>

<TABLE border=\"0\" cellpadding=\"2\" cellspacing=\"0\" width=30% >
<TR BGCOLOR=\"#CC0000\">

<TD width=\"85\">
<A href=\"index.html\"><Font color=\"#000000\"><FONT FACE=\"arial\"><b>Forside</b></a>
</TD>
<TD width=\"85\">
<A href=\"http://www.geocities.com/davidbeckham710/holdene.html\", \'menu1\', 150, 200)\" onmouseover=\"activateMenu(1,66)\" ><Font color=\"#000000\"><FONT FACE=\"arial\"><b> Holdet</b></A>
</TD>
<TD width=\"85\">
<A href=\"http://www.geocities.com/davidbeckham710/program.html\", \'menu2\', 150, 200)\" onmouseover=\"activateMenu(2,119)\" ><Font color=\"#000000\"><FONT FACE=\"arial\"><b>Program</b></A>
</TD>
<TD WIDTH=\"85\">
<A href=\"http://www.geocities.com/davidbeckham710/klubben.html\", \'menu3\', 150, 200)\" onmouseover=\"activateMenu(3,190)\" ><Font color=\"#000000\"><FONT FACE=\"arial\"><b>Klubben</b></A>
</TD>
<TD WIDTH=\"85\">
<A href=\"http://www.geocities.com/davidbeckham710/links.html\", \'menu4\', 150, 200)\" onmouseover=\"activateMenu(4,257)\" ><Font color=\"#000000\"><FONT FACE=\"arial\"><b>Links</b></A>
</TD>
<TD WIDTH=\"100%\" HEIGHT=\"28\"> </TD>
</TR>
</TABLE>

<BLOCKQUOTE>
<FONT FACE=\"verdana,arial,helvetica\">
<P>

</P>

</FONT>
</BLOCKQUOTE>

<P>

Originalkoden kan du finde på www.dynamicdrive.com eller www.viewsource.dk det kan jeg ikke huske(Sorry!)
Avatar billede engrob Nybegynder
05. marts 2001 - 18:26 #3
Kig i kilden på http://tv2.dk og download de nødvendige filer til menuen.
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