Søg
Avatar billede steen_hansen Forsker
26. november 2005 - 10:50 Der er 18 kommentarer og
1 løsning

Hjælp til menu

Jeg har længe søgt efter en god menu, og den, som er at finde på OfIR, når man logger ind og tjekker mail, er perfekt.

Er der nogen, der har noget kode til den? Den skal fungere perfekt, og den skal kunne valideres.
Avatar billede psykochicken Nybegynder
26. november 2005 - 19:35 #1
Prøv med "vis - kildekode" ;o)
Avatar billede steen_hansen Forsker
26. november 2005 - 21:50 #2
Den er selvfølgelig prøvet, men der er en del JavaScript på siden.
Avatar billede psykochicken Nybegynder
26. november 2005 - 23:01 #3
Hvis det er "fanebladsmenuen" du mener, så prøv at lege videre med:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Job</title>
<link href="http://mail.ofir.dk/Style/style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://mail.ofir.dk/OFiRCommon/Style/OFiRTop.css">
</head>
<body>
<table cellpadding="0" cellspacing="0" width="760px" bgcolor="white" border="0">
    <tr>
        <td rowspan="2" width="140px" align="center"><a href="http://ofir.dk">
          <img src="http://mail.ofir.dk/OFiRCommon/images/logony.jpg" alt="OFiR" width="108" height="35" border="0"></a>
        </td>
        <td colspan="7" valign="top" align="right"></td>
    </tr>
    <tr>
        <td width="26px">
          <img src="http://mail.ofir.dk/OFiRCommon/images/topgrayend.jpg" width="26px" height="28px" alt="">
        </td>
        <td class="topmenu" style="padding-top:5px;background:url('http://mail.ofir.dk/OFiRCommon/images/topgray.jpg');" align="center" width="101px">
            <strong><a href="http://job.ofir.dk/" Title="">Job</a></strong>
        </td>
        <td class="topmenu" style="padding-top:5px;background:url('http://mail.ofir.dk/OFiRCommon/images/topgray.jpg');"  align="center" width="101px">
            <strong><a href="http://ofir.dk/markeder/" Title="">Markeder</a></strong>
        </td>
        <td class="topmenu" style="padding-top:5px;background:url('http://mail.ofir.dk/OFiRCommon/images/topgray.jpg');"  align="center" width="101px">
            <strong><a href="http://ofir.dk/underholdning/" Title="">Underholdning</a></strong>
        </td>
        <td class="topmenu" style="padding-top:5px;background:url('http://mail.ofir.dk/OFiRCommon/images/btn_iceover.jpg');"  align="center" width="101px">
            <strong><a href="http://ofir.dk/kommunikation/" Title="">Kommunikation</a></strong>
        </td>
        <td class="topmenu" style="padding-top:5px;background:url('http://mail.ofir.dk/OFiRCommon/images/topgray.jpg');"  align="center" width="101px">
            <strong><a href="http://ofir.dk/soeg/" Title="">Søg</a></strong>
        </td>
        <td style="background-image: url('http://mail.ofir.dk/OFiRCommon/images/topgray.jpg')" align="right">
            <img src="http://mail.ofir.dk/OFiRCommon/images/topgrayend2.jpg" width="26px" height="28px" alt="">
        </td>
    </tr>
    <tr style="HEIGHT:1px">
        <td bgcolor="#44ADEF" colspan="5"></td>
        <td bgcolor="#D7EEFD"></td>
        <td bgcolor="#44ADEF" colspan="4"></td>
    </tr>
</table>
<table cellpadding="0" cellspacing="0" width="760" bgcolor="white" border="0">
    <tr style="background:url('http://mail.ofir.dk/OFiRCommon/images/topice.jpg'); height: 26px">
        <td align="center" width="140" class="date">
            <span id="TopMenu1_lblDate">26. november 2005</span>&nbsp;&nbsp;&nbsp;
        </td>
        <td>
            <table width="620px" cellpadding="2" cellspacing="0">
                <tr>
                    <td width="5">&nbsp;</td>
                    <td width="5">&nbsp;</td>
                    <td class='menulink' align="center" width="20px"><a href="http://mail.ofir.dk" title="Login i din mail">Mail</a></td>
                    <td width="20px;">&nbsp;</td>
                    <td class='menulink' align="center" width="20px"><a href="http://chat.ofir.dk" title="Klik ind på chatten">Chat</a></td>
                    <td width="20px;">&nbsp;</td>
                    <td class='menulink' align="center" width="20px"><a href="http://soeg.ofir.dk" title="Brug OFiR's søgemaskine og find det du leder efter">Søgeindeks</a></td>
                    <td width="20px;">&nbsp;</td>
                    <td class='menulink' align="center" width="20px"><a href="http://kontakt.ofir.dk" title="Måske findes din nye kærester eller gode ven her?">Kontakt</a></td>
                    <td width="20px;">&nbsp;</td>
                    <td class='menulink' align="center" width="20px"><a href="http://nyheder.ofir.dk" title="Hold dig orienteret - læs dagens nyheder">Nyheder</a></td>
                    <td width="20px;">&nbsp;</td>
                    <td class='menulink' align="center" width="20px"><a href="http://debat.ofir.dk" title="Ordet er dit - deltag i debatten med andre OFiR brugere">Debat</a></td>
                    <td width="20px;">&nbsp;</td>
                    <td class='menulink' align="center" width="20px"><a href="http://favoritter.ofir.dk" title="Din adgang til dine favoritlinks">Favoritter</a></td>
                    <td width="20px;">&nbsp;</td>
                </tr>
            </table>
        </td>
        <td></td>
    </tr>
</table>
</body>

</html>

/psc
Avatar billede steen_hansen Forsker
27. november 2005 - 00:45 #4
Det er nu menuen i venstre side med plus'et, som hiver undermenuerne frem :)
Avatar billede psykochicken Nybegynder
27. november 2005 - 13:57 #5
ok, efter lidt Jørgen Clevin kan du prøve:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       
</head>
<body>
<form name="Form1" method="post" action="Mailbox.aspx" id="Form1">
<table style="background: url('http://mail.ofir.dk/i/fadebg.jpg');" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
    <tr valign="top">
        <td width="150">
            <script type="text/javascript">
                var nav = '';
                if(document.cookie.indexOf('SubServiceMailLoggedInClosed') > -1){
                    nav += 'SubServiceMailLoggedInClosed';
                }
            </script>
            <table id="SubServiceMailLoggedInOpen" cellpadding="0" cellspacing="0" border="0" style="width:140px;">
                <tr style="background-color:white;height:25px;">
                    <td style="width:24px;">
                        <img src="http://mail.ofir.dk/i/iko_menu_mail.gif" alt="" border="0" width="18" height="18">
                    </td>
                    <td style="font-weight:bold;width:100px;">Mail</td><td style="width:16px;">
                        <img title="Luk menu" onclick="nav=nav+'SubServiceMailLoggedInClosed';menuNav();" src="http://mail.ofir.dk/i/menuclose.jpg" alt="Luk menu" border="0" width="9" height="9">
                    </td>
                </tr>
                <tr style="height:1px;background-image:url('http://mail.ofir.dk/i/menuheaderline.jpg');">
                    <td colspan="3px"></td>
                </tr>
                <tr class="menuhighlight" onclick="location.href='http://mail.ofir.dk/Mailbox.aspx'">
                    <td colspan="3">&nbsp; &nbsp; &nbsp; Forside</td>
                </tr>
                <tr style="height:1px;background-color:97c6e5;">
                    <td colspan="3px"></td>
                </tr>
                <tr class="menuout" onclick="location.href='http://mail.ofir.dk/MailboxFolder.aspx?folder=INBOX'" onmouseover="this.className='menuover';" onmouseout="this.className='menuout';">
                    <td colspan="3px">&nbsp; &nbsp; &nbsp; Indbakke</td>
                </tr>
            </table>
            <table id="SubServiceMailLoggedInClosed" cellpadding="0" cellspacing="0" border="0" style="width:140px;">
                <tr style="background-color:white;height:25px;">
                    <td style="width:24px;">
                        <img src="http://mail.ofir.dk/i/iko_menu_mail.gif" alt="" border="0" width="18px" height="18px">
                    </td>
                    <td style="font-weight:bold;width:100px;">Mail
                    </td>
                    <td style="width:16px;">
                        <img title="Åben menu" onclick="nav=nav.replace('SubServiceMailLoggedInClosed','');menuNav();" src="http://mail.ofir.dk/i/menuopen.jpg" alt="Åben menu" border="0" width="9" height="9">
                    </td>
                </tr>
                <tr style="height:8px;">
                    <td colspan="3px"></td>
                </tr>
            </table>
            <script type="text/javascript">
            function menuNav(){
                if(nav.indexOf('SubServiceMailLoggedInClosed') > -1){
                    document.getElementById('SubServiceMailLoggedInOpen').style.display='none';
                    document.getElementById('SubServiceMailLoggedInClosed').style.display='block';
                }else{
                    document.getElementById('SubServiceMailLoggedInOpen').style.display='block';
                    document.getElementById('SubServiceMailLoggedInClosed').style.display='none';
                }
                document.cookie='navigation='+nav;
            }
            </script>
            <script type="text/javascript">
            menuNav();
            </script>
        </td>
    </tr>
</table>
</form>
</body>
</html>

/psc
Avatar billede steen_hansen Forsker
27. november 2005 - 14:59 #6
psc, det er jo smukt. Smid et svar :)
Avatar billede steen_hansen Forsker
27. november 2005 - 15:47 #7
Og for dem, der gerne vil have det valideret:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<META NAME="robots" content="all">
<title>Test-menu</title>
</head>

<body>

<form name="Form1" method="post" action="Mailbox.aspx" id="Form1">
<table style="background: url('http://mail.ofir.dk/i/fadebg.jpg');" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
    <tr valign="top">
        <td width="150">
            <script type="text/javascript">
                var nav = '';
                    if(document.cookie.indexOf('SubServiceMailLoggedInClosed') > -1){
                        nav += 'SubServiceMailLoggedInClosed';
                }
            </script>
            <table id="SubServiceMailLoggedInOpen" cellpadding="0" cellspacing="0" border="0" style="width: 140px;">
                <tr style="background-color:white;height:25px;">
                    <td style="width: 24px;"><img src="http://mail.ofir.dk/i/iko_menu_mail.gif" alt="" border="0" width="18" height="18"></td>
                    <td style="font-weight:bold;width:100px;">Mail</td><td style="width:16px;"><img title="Luk menu" onclick="nav=nav+'SubServiceMailLoggedInClosed';menuNav();" src="http://mail.ofir.dk/i/menuclose.jpg" alt="Luk menu" border="0" width="9" height="9"></td>
                </tr>
                    <tr style="height:1px;background-image:url('http://mail.ofir.dk/i/menuheaderline.jpg');">
                        <td colspan="3"></td>
                </tr>
                <tr class="menuhighlight" onclick="location.href='http://mail.ofir.dk/Mailbox.aspx'">
                    <td colspan="3">&nbsp; &nbsp; &nbsp; Forside</td>
                </tr>
                <tr style="height:1px;background-color:97c6e5;">
                    <td colspan="3"></td>
                </tr>
                <tr class="menuout" onclick="location.href='http://mail.ofir.dk/MailboxFolder.aspx?folder=INBOX'" onmouseover="this.className='menuover';" onmouseout="this.className='menuout';">
                    <td colspan="3">Indbakke</td>
                </tr>
            </table>
            <table id="SubServiceMailLoggedInClosed" cellpadding="0" cellspacing="0" border="0" style="width:140px;">
                <tr style="background-color:white;height:25px;">
                    <td style="width:24px;"><img src="http://mail.ofir.dk/i/iko_menu_mail.gif" alt="" border="0" width="18px" height="18px"></td>
                    <td style="font-weight:bold;width:100px;">Mail</td>
                    <td style="width:16px;"><img title="Åben menu" onclick="nav=nav.replace('SubServiceMailLoggedInClosed','');menuNav();" src="http://mail.ofir.dk/i/menuopen.jpg" alt="Åben menu" border="0" width="9" height="9"></td>
                </tr>
                <tr style="height:8px;">
                    <td colspan="3"></td>
                </tr>
            </table>
            <script type="text/javascript">
                function menuNav(){
                    if(nav.indexOf('SubServiceMailLoggedInClosed') > -1){
                        document.getElementById('SubServiceMailLoggedInOpen').style.display='none';
                        document.getElementById('SubServiceMailLoggedInClosed').style.display='block';
                    }else{
                        document.getElementById('SubServiceMailLoggedInOpen').style.display='block';
                        document.getElementById('SubServiceMailLoggedInClosed').style.display='none';
                    }
                        document.cookie='navigation='+nav;
                    }
            </script>
            <script type="text/javascript">
                menuNav();
            </script>
        </td>
    </tr>
</table>

</form>

</body>

</html>
Avatar billede psykochicken Nybegynder
27. november 2005 - 16:31 #8
- svar kommer her ;o)
Avatar billede steen_hansen Forsker
27. november 2005 - 16:32 #9
Og mange tak for hjælpen kommer her :)
Avatar billede psykochicken Nybegynder
27. november 2005 - 16:33 #10
- og tak for point ;o)
Avatar billede steen_hansen Forsker
27. november 2005 - 22:03 #11
psc, hvordan laver man flere tabeller, hvis der benyttes id? Skal man lave et script med et unikt id for hver tabel? Jeg tænker bl.a. på SubServiceMailLoggedInOpen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<META NAME="robots" content="all">
<title>Test-menu</title>
</head>

<body>

<form name="Form1" method="post" action="/members/mailbox/" id="Form1">
<table style="padding: 0px;">
    <tr valign="top">
        <td style="width: 150px;">
            <script type="text/javascript">
                var nav = '';
                    if(document.cookie.indexOf('SubServiceMailLoggedInClosed') > -1){
                        nav += 'SubServiceMailLoggedInClosed';
                }
            </script>
            <table id="SubServiceMailLoggedInOpen" cellpadding="0" style="width: 140px; border-collapse: collapse;">
                <tr>
                    <td style="font-weight: bold; width: 100px;">Mail</td>
                    <td style="width: 16px;"><img title="Luk menu" onclick="nav=nav+'SubServiceMailLoggedInClosed';menuNav();" src="/images/menu/menuclose.gif" style="border: 0px; width: 9px; height: 9px;" alt="Luk menu"></td>
                </tr>
                <tr onclick="location.href='/members/mailbox/'">
                    <td colspan="2">Forside</td>
                </tr>
                <tr onclick="location.href='/default.asp'" onmouseover="this.className='menuover';" onmouseout="this.className='menuout';">
                    <td colspan="2">Indbakke</td>
                </tr>
                <tr>
                    <td colspan="2">Udbakke</td>
                </tr>
                <tr>
                    <td colspan="2">Sendt post</td>
                </tr>
                <tr>
                    <td colspan="2">Slettet post</td>
                </tr>
                <tr>
                    <td colspan="2">Ny besked</td>
                </tr>
            </table>
            <table id="SubServiceMailLoggedInClosed" cellpadding="0" cellspacing="0" border="0" style="width:140px;">
                <tr>
                    <td style="font-weight: bold; width: 100px;">Mail</td>
                    <td style="width: 16px;"><img title="Åbn menu" onclick="nav=nav.replace('SubServiceMailLoggedInClosed','');menuNav();" src="/images/menu/menuopen.gif" style="border: 0px; width: 9px; height: 9px;" alt="Åbn menu"></td>
                </tr>
            </table>
            <script type="text/javascript">
                function menuNav(){
                    if(nav.indexOf('SubServiceMailLoggedInClosed') > -1){
                        document.getElementById('SubServiceMailLoggedInOpen').style.display='none';
                        document.getElementById('SubServiceMailLoggedInClosed').style.display='block';
                    }else{
                        document.getElementById('SubServiceMailLoggedInOpen').style.display='block';
                        document.getElementById('SubServiceMailLoggedInClosed').style.display='none';
                    }
                        document.cookie='navigation='+nav;
                    }
            </script>
            <script type="text/javascript">
                menuNav();
            </script>
        </td>
    </tr>
</table>

</form>

</body>

</html>
Avatar billede psykochicken Nybegynder
27. november 2005 - 23:33 #12
ja, i scriptet før menuen tilføjes så:
if(document.cookie.indexOf('DIT_IDClosed') > -1){nav += 'DIT_IDClosed';}

i menuen tilføjes 2 tabeller:
<table id="DIT_IDOpen"...osv
<table id="DIT_IDClosed"...osv

..og i scriptet efter menuen tilføjes:
if(nav.indexOf('DIT_IDClosed') > -1){
    document.getElementById('DIT_IDOpen').style.display='none';
    document.getElementById('DIT_IDClosed').style.display='block';
}else{
    document.getElementById('DIT_IDOpen').style.display='block';
    document.getElementById('DIT_IDClosed').style.display='none';
}

/psc
Avatar billede steen_hansen Forsker
08. januar 2006 - 00:06 #13
Fik aldrig sagt tak for hjælpen. Jeg prøver :o)
Avatar billede steen_hansen Forsker
30. januar 2006 - 21:21 #14
pc, når man opdaterer siden, foldes menuerne ud igen. Hvor er cookie-funktionen, som skal huske det valgte? Jeg kan ikke se det, jeg mener der mangler et eller andet?
Avatar billede steen_hansen Forsker
30. januar 2006 - 21:21 #15
Opretter gerne et nyt spm.
Avatar billede steen_hansen Forsker
30. januar 2006 - 21:28 #16
Sorry, have glemt at ændre navigation i document.cookie='navigation1='+nav1;

Det virker bare perfekt :o)
Avatar billede psykochicken Nybegynder
01. februar 2006 - 22:10 #17
lol....ja ofte løses problemer ved bare at stille spørgsmålet ;o)
Avatar billede steen_hansen Forsker
03. februar 2006 - 21:31 #18
Å d' ik' 'ngang løwn :oD
Avatar billede steen_hansen Forsker
13. februar 2006 - 21:34 #19
pc, jeg har lige et sidste spørgsmål i denne forbindelse, hvis du altså gider og har tid :o)

Hvordan kan jeg få menuen til at være "trukket sammen" som standard? Lige nu er den åben, når man går ind på siden, men der er en del menupunkter, som gør menuen temmelig lang.
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:18 Lokal konto Af Bent i Windows
26/0516:16 Inverse formler Af tdktman i Excel
26/0515:33 disk plads på server Af dcedata1977 i Servere
26/0509:09 Flere brugere i 1 delt pivottabel Af mira96ac i Excel
25/0518:29 Beregning af flextid - formler Af Slettet bruger i Excel
White papers
Flere white papers »