Hjælp til forkert opsat menu

Hej Steen Hansen,

Hvis jeg forstår din problemstilling korrekt så skal undermenuerne "Opret hovedområde", "Opret hovedkategori" og "Opret underkategori" forsvinde eller dukke op når der trykkes på "Administrér"?..

For at dette kan lad sig gøre skal de tre undermenuer ind i samme <div> tag som den første administrér. Så i stedet for:

<div id="SubServiceAdmLoggedInOpen" class="divmenuhead" onclick="nav=nav + 'SubServiceAdmLoggedInClosed'; menuNav();">Administrér</div>
<div class="divmenutopcat" onclick="location.href='/newmainarea.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret hovedområde</div>
<div class="divmenutopcat" onclick="location.href='/newtopcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret hovedkategori</div>
<div class="divmenutopcat" onclick="location.href='/newsubcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret underkategori</div>


bliver det:

<div id="SubServiceAdmLoggedInOpen" class="divmenuhead" onclick="nav=nav + 'SubServiceAdmLoggedInClosed'; menuNav();">Administrér
<div class="divmenutopcat" onclick="location.href='/newmainarea.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret hovedområde</div>
<div class="divmenutopcat" onclick="location.href='/newtopcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret hovedkategori</div>
<div class="divmenutopcat" onclick="location.href='/newsubcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret underkategori</div></div>


Også virker det efter hensigten... Jeg inkluderer lige hele scriptet så du bare kan kopiere det ind:

<form name="frmMenuAdm" method="post" action="/" id="frmMenuAdm">
<script type="text/javascript">
    var nav = '';
    if(document.cookie.indexOf('SubServiceAdmLoggedInClosed') > -1)
    {
        nav += 'SubServiceAdmLoggedInClosed';
    }
</script>
<div id="SubServiceAdmLoggedInOpen" class="divmenuhead" onclick="nav=nav + 'SubServiceAdmLoggedInClosed'; menuNav();">Administrér
<div class="divmenutopcat" onclick="location.href='/newmainarea.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret hovedområde</div>
<div class="divmenutopcat" onclick="location.href='/newtopcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret hovedkategori</div>
<div class="divmenutopcat" onclick="location.href='/newsubcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret underkategori</div></div>
<div id="SubServiceAdmLoggedInClosed" class="divmenuhead" onclick="nav=nav.replace('SubServiceAdmLoggedInClosed',''); menuNav();">Administrér</div>
<script type="text/javascript">
function menuNav()
{
    if(nav.indexOf('SubServiceAdmLoggedInClosed') > -1) {
    document.getElementById('SubServiceAdmLoggedInOpen').style.display='none';
    document.getElementById('SubServiceAdmLoggedInClosed').style.display='block';
}
else
{
    document.getElementById('SubServiceAdmLoggedInOpen').style.display='block';
    document.getElementById('SubServiceAdmLoggedInClosed').style.display='none';
}
    document.cookie='navigation='+nav;
}
</script>
<script type="text/javascript">
    menuNav();
</script>
</form>


Håber det var det du mente! :)


- Snap

Du havde simpelthen forstået det korrekt, og det virker simpelthen perfekt, og du er simpelthen dagens mand! Lovprisningerne vil ingen ende tage, 1000 tak (og dobbelt op) for hjælpen :o)

Det var da så lidt! Glad for at kunne hjælpe og tak for pointene

:)


- Snap

Hej snap

Der er dog et lille problem: Nu husker scriptet ikke, om menuen skal være foldet sammen eller åben. Kan du se en bug nogen steder? Jeg giver gerne flere point, men jeg er på vej i seng. Håber du kan se noget. Der er ingen fejl i proceslinien.

Jeg formoder du mener at den ikke husker det når du lukker browseren og åbner den igen? Svaret er sådan set meget simpelt, når du laver en ny cookie i det script ovenover sætter du ikke tiden for hvor lang tid cookien skal leve i. Hvis tiden ikke sættes bliver den slettet når brugeren lukker browseren.
For at løse det her problem skal du bare sætte en "expires" attribute på cookie-strengen med den ønskede levetid. :)

For at gøre det nemt for dig har jeg tilføjet en createCookie metode til scriptet der sørger for dette. Jeg har sat den til at gemme cookien i 7 dage (denne værdi kan du selvfølgelig bare ændre). Yderligere har jeg lige samlet scriptet lidt så det bliver lidt mere overskueligt! :)


<form name="frmMenuAdm" method="post" action="/" id="frmMenuAdm">
<script type="text/javascript">
    var nav = '';
    if(document.cookie.indexOf('SubServiceAdmLoggedInClosed') > -1)
    {
        nav += 'SubServiceAdmLoggedInClosed';
    }
   
    function menuNav()
    {
   
        if(nav.indexOf('SubServiceAdmLoggedInClosed') > -1)
        {
            document.getElementById('SubServiceAdmLoggedInOpen').style.display='none';
            document.getElementById('SubServiceAdmLoggedInClosed').style.display='block';
        }
        else
        {
            document.getElementById('SubServiceAdmLoggedInOpen').style.display='block';
            document.getElementById('SubServiceAdmLoggedInClosed').style.display='none';
        }
   
        //document.cookie='navigation='+nav;
        createCookie('navigation', nav, 7);

        alert(document.cookie);
       
       
    }
   
    //Danner en ny cookie. Hvis days er -1 bliver cookien slettet
    //når brugeren lukker vinduet
    function createCookie(name, value, days)
    {
        if (days)
        {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else
            var expires = "";
       
        document.cookie = name+"="+value+expires;
    }   

</script>
<div id="SubServiceAdmLoggedInOpen" class="divmenuhead" onclick="nav=nav + 'SubServiceAdmLoggedInClosed'; menuNav();">Administrér
<div class="divmenutopcat" onclick="location.href='/newmainarea.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret hovedområde</div>
<div class="divmenutopcat" onclick="location.href='/newtopcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret hovedkategori</div>
<div class="divmenutopcat" onclick="location.href='/newsubcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';">Opret underkategori</div></div>
<div id="SubServiceAdmLoggedInClosed" class="divmenuhead" onclick="nav=nav.replace('SubServiceAdmLoggedInClosed',''); menuNav();">Administrér</div>
<script type="text/javascript">
    menuNav();
</script>
</form>



Håber det var det du søgte!


- Snap

Det ser sk... godt ud. Jeg brugte laaaang tid i går på at få det lagt over i div. Men der er et lille problem, for den gør det stadig. Jeg har rem'et alert(document.cookie); ud (meget smart :o)), men når jeg inkluderer menuen på de tre ovenstående sider, folder menuen sammen igen. Håber du gider og har lyst, du får ekstra point :o)

Jeg HÅBER jeg har fundet den lille fejl, der havde sneget sig ind. Det ser da i det mindste ud til at virke:

<form name="frmMenuAdm" method="post" action="/" id="frmMenuAdm">
<script type="text/javascript">


var nav = '';
if(document.cookie.indexOf('AdmClosed') > -1) {
nav += 'AdmClosed';
}


function menuNav() {
if(nav.indexOf('AdmClosed') > -1) {
document.getElementById('AdmOpen').style.display='none';
document.getElementById('AdmClosed').style.display='block';
}
else {
document.getElementById('AdmOpen').style.display='block';
document.getElementById('AdmClosed').style.display='none';
}
// document.cookie='navigation='+nav;
// createCookie('navigation', nav, 7);
// alert(document.cookie);
}


function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else
var expires = "";
document.cookie = name+"="+value+expires;
createCookie('navigation', nav, 7);
alert(document.cookie);
}


</script>

<div id="AdmOpen" class="divmenuhead close menuframe" onclick="nav=nav + 'AdmClosed'; menuNav();"><span style="padding-left: 5px; font-weight: bold;">Administrér</span>
    <div class="divmenutopcat" onclick="location.href='/newmainarea.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Opret hovedområde</span></div>
    <div class="divmenutopcat" onclick="location.href='/newtopcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Opret hovedkategori</span></div>
    <div class="divmenutopcat" onclick="location.href='/newsubcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Opret underkategori</span></div>
</div>
<div id="AdmClosed" class="divmenuhead open menuframe" onclick="nav=nav.replace('AdmClosed',''); menuNav();"><span style="padding-left: 5px; font-weight: bold;">Administrér</span></div>


<script type="text/javascript">
menuNav();
</script>


</form>


Jeg har lige et aller-sidste tillægsspørgsmål. Hvis der skal være mere end én menu på nogle af siderne, skal der vel også ændres i JavaScriptet? Jeg tænker udover navnene i de tre scripts, skal der vel på en eller anden måde tilkendegives, at der er en anden menu med unikke ID's?

.... eller spurgt på en anden måde: Er der noget specielt, der skal arrangeres, hvis der skal 2 menuer på samme side? Der jeg vil hen, er her: http://www.eksperten.dk/spm/667542/#rid5944212

Og så lige et rigtigt link, sorry :)

http://www.eksperten.dk/spm/667542#rid5944212

Hehe.. Nu blev jeg lige en smule forvirret (ja du forvirrede lige en ingeniør). Jeg skal lige have din ønskede behavior af denne her menu på plads. Når brugeren logger ind på din side, hvad skal han så se?

1) Siden har en menu hvor alle hovedmenuerne er lukkede. Han skal dermed klikke på en af hovedmenuerne for at se undermenuerne.

2) Siden har en menu hvor alle hovedmenuerne er åbne, dvs. han kan se alle undermenuerne og skal klikke på en hovedmenu for at lukke dens undermenuer.

EKSTRA) Næste gang brugeren logger ind, skal menuerne da være som han forlod dem, eller skal de nulstilles som var det første gang han loggede ind?

- Snap

Hvis du bare siger 1 eller 2 + opførelsen for EKSTRA laver jeg et script der gør præcis dette med to hovedmenuer i (i stedet for det ene vi har kørt med indtil videre).

:)

Du er simpelthen en kammersjuk :)

Det er #2, der skal være den gældende:


1. Brugeren logger på. Alle menuer er åbne.

2. Hvis brugeren navigerer mellem forskellige sider, som har den samme menu, skal den være hhv. åben eller lukket, afhængig af hvad brugeren havde valgt, da brugeren tilgik den nye side.

3. Hvis brugeren bevæger sig væk fra dét hovedområde over til et andet, skal dette hovedområdes menu som standard være åben.

Jeg håber ikke det blev for kryptisk? Ellers så spørg :)

Jeg begynder at få dårlig samvittighed, det er jo nærmest blevet et projekt, dette her :o)

Jeg gemmer menu/hovedmenupunkter/undermenupunkter med tilhørende links i database, så jeg også kan lave et sitemap. Så hvis du har bedre erfaringer med noget andet end det ovenstående script, så råb endelig højt. Hvis ikke, vil jeg blive meget glad, hvis vi kan fortsætte på det eksisterende :)

Sig til, hvis det er ved at være for meget.

Mangler stadig lige EKSTRA-delen. Hvis brugeren går i seng og slukker sin computer (for lige at skære det ud i pap) skal menuen så vises som den gjorde da han slukkede computeren? F.eks at to hovedmenupunkter viser sine undermenupunkter hvor en anden måske ikke gør? Eller skal siden nulstilles helt, altså alle hovedmenupunkter viser sine undermenupunkter?

Med menu/hovedmenupunkter/undermenupunkter mener jeg

Menu 1
    Hovedmenu 1.1
    Hovedmenu 1.2
        Undermenu 1.2.1
    Hovedmenu 1.3
    Hovedmenu 1.4
        Undermenu 1.4.1
        Undermenu 1.4.2
        Undermenu 1.4.3
    Hovedmenu 1.5
    Hovedmenu 1.6

Menu 2
    Hovedmenu 2.1
    Hovedmenu 2.2
        Undermenu 2.2.1
        Undermenu 2.2.2
    Hovedmenu 2.3
        Undermenu 2.3.1
        Undermenu 2.3.2
        Undermenu 2.3.3
        Undermenu 2.3.4
        Undermenu 2.3.5
    Hovedmenu 2.4
        Undermenu 2.4.1

Osv. Bare for at du kan se hvor jeg vil hen :)

08/01-2007 20:52:04: Det kunne være fedt, hvis de stod, som brugeren forlod dem. Er det ved at blive stort?

Hvis det er ved at blive for stort, så skal menuerne bare være åbne som standard. Grunden til dette valg, er hvis der er flere menuer under hinanden. Så kan siden gå hen og blive temmelig lang, og det fremmer ikke ligefrem overblikket :)

Altså det du faktisk gerne ville have er en træstruktur. Men opgaven er lige blevet en del længere nu end fra den oprindelige. Skal man også kunne lukke og åbne Menu 1 og Menu 2? Og menuen ser da også lidt anderledes ud nu. Men jeg laver præcis sådan en struktur som vist deroppe, mangler så bare lige at vide om Menu 1 og 2 skal kunne lukkes?

Ja, Menu 1 og Menu 2 skal kunne åbnes/lukkes uafhængigt af hinanden.

Alt det kunne menuen i den oprindelige tabel, som jeg linkede til højere oppe. Men det kan til tider være svært at styre, afhængigt af hvor og i hvilke sammenhænge man bruger det. Derfor ville jeg lave det i <div></div>, som giver en meget præcis styring og kontinuitet i dokumentet.

Du skal ikke lade dig distrahere af hovedmenuer/undermenuer, for det hiver jeg ud af databasen og kører gennem en løkke. Den eneste forskel på hoved- og undermenu er, at padding-left bliver større på undermenuerne. Og ja, det er en træstruktur :)

ahh ok. Så det er i virkeligheden kun Menu 1 og 2 med Hovedmenuer jeg skal koncentrere mig om. udemærket.. :)

.... og ved nærmere eftertanke, så er det unødvendigt at gemme det sidste valg i en cookie, altså om menuen var åben eller lukket, da brugeren lukkede browser-vinduet. Hvis jeg på et senere tidspunkt skulle ønske den funktion, tror jeg valget vil blive lagt ned i databasen istedet. Så kan de selv tilføje/fjerne denne funktion til deres menu. Så hvis menuerne som standard er åbne, når siderne tilgås, er det fint :)

ok, men ellers en meget nem udvidelse på den måde jeg laver det. Man kan specificere i cookies'ne hvor mange dage de skal eksistere (som jeg skrev tidligere). Så hvis man sætter dem til at eksistere i 7 dage, vil brugeren kunne logge ind på din side (indenfor en uge) og fortsætte med menu'en fra hvor han slap.

Anyways.. Giv mig lige 10-30 min så har jeg et eksempel klar til dig

Ja, det er udelukkende Menu X. Evt. undermenuer til hovedmenuerne bliver bare trukket ud under hovedmenuen, og skubbet en lille anelse mod højre, så man kan se det er et undermenupunkt til hovedmenupunktet. Selvom det er smart, synes jeg ikke jeg vil stramme den mere :D

Det kunne være fedt, jeg venter i spænding :)

Så har jeg lavet første udkast (kalder det udkast for indtil videre har jeg jo ikke kunne lave det du ønskede). Eksemplet indeholder 3 Menu'er hver især indeholdende Hovedmenuer. Det er meget simpelt at tilføje nye menuer nu, du skal bare følge det mønster de andre følger (med id'erne og deres onclick kald, du skal også huske at kalde initMenu med menu id'erne i onload event'en for at menuerne bliver intialiseret korrekt).
Som du kan se er koden igen blevet omstruktureret, men igen for at det er nemmere at overskue.




<!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>MENU</title>

<script type="text/javascript">

var status;
var cookieLifeTime = 7; //In days. -1 is zero days and the cookies will disappear when the user logs off


function initMenu(menuName)
{
    var cook = getCookie(menuName);
   
    if(cook == null)
        status = 1;
    else
        status = (cook == "1") ? 1 : 0;
   
    setMenuVisibility(menuName, status);
}


function menuNav(menuName)
{
    var cook = getCookie(menuName);
   
    status = (cook == "1") ? 0 : 1;

    setMenuVisibility(menuName, status);
}


function setMenuVisibility(menuName, status)
{
    if(status == 0) //Closed
    {
        document.getElementById(menuName).style.display='none';
        document.getElementById(menuName + "c").style.display='block';
    }
    else        //Open
    {
        document.getElementById(menuName).style.display='block';
        document.getElementById(menuName + "c").style.display='none';
    }

    createCookie(menuName, status, cookieLifeTime);
}


function createCookie(name, value, days)
{
    if (days)
    {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else
        var expires = "";

    if(days != -1)
        document.cookie = name+"="+value+expires;
    else
        document.cookie = name+"="+value;
}

function getCookie( name )
{
    var start = document.cookie.indexOf( name + "=" );
    var len = start + name.length + 1;
    if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) )
    {
        return null;
    }
   
    if ( start == -1 )
        return null;

    var end = document.cookie.indexOf( ";", len );
    if ( end == -1 )
        end = document.cookie.length;
   
    return unescape( document.cookie.substring( len, end ) );
}

</script>

</head>

<body onload="initMenu('menu1'); initMenu('menu2'); initMenu('menu3');">

<form name="frmMenuAdm" method="post" action="/" id="frmMenuAdm">

<div id="menu1" class="divmenuhead close menuframe" onclick="menuNav('menu1');"><span style="padding-left: 5px; font-weight: bold;">Administrér</span>
<div class="divmenutopcat" onclick="location.href='/newmainarea.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Opret hovedområde</span></div>
<div class="divmenutopcat" onclick="location.href='/newtopcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Opret hovedkategori</span></div>
<div class="divmenutopcat" onclick="location.href='/newsubcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Opret underkategori</span></div>
</div>
<div id="menu1c" class="divmenuhead open menuframe" onclick="menuNav('menu1');"><span style="padding-left: 5px; font-weight: bold;">Administrér</span></div>

<div id="menu2" class="divmenuhead close menuframe" onclick="menuNav('menu2');"><span style="padding-left: 5px; font-weight: bold;">Links</span>
<div class="divmenutopcat" onclick="location.href='/newmainarea.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Link1</span></div>
<div class="divmenutopcat" onclick="location.href='/newtopcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Link2</span></div>
</div>
<div id="menu2c" class="divmenuhead open menuframe" onclick="menuNav('menu2');"><span style="padding-left: 5px; font-weight: bold;">Links</span></div>

<div id="menu3" class="divmenuhead close menuframe" onclick="menuNav('menu3');"><span style="padding-left: 5px; font-weight: bold;">Info</span>
<div class="divmenutopcat" onclick="location.href='/newmainarea.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Emne1</span></div>
<div class="divmenutopcat" onclick="location.href='/newtopcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Emne2</span></div>
<div class="divmenutopcat" onclick="location.href='/newsubcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Emne3</span></div>
<div class="divmenutopcat" onclick="location.href='/newsubcat.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">Emne4</span></div>
</div>
<div id="menu3c" class="divmenuhead open menuframe" onclick="menuNav('menu3');"><span style="padding-left: 5px; font-weight: bold;">Info</span></div>

</form>


</body>
</html>



Håber vi er ved at komme derhen af. ;)


- Snap

Jeg kigger, det ser spændende ud. Øjeblik ...

Jaaa, det snerper, men menuerne folder dog sammen, når man trykker på et link :)

Jeg har lavet 4 sider, som jeg tester på. JavaScriptet har jeg lagt ind som script.js i header:

<!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">
<script type="text/JavaScript" src="/script.js"></script>
<link rel="stylesheet" type="text/css" href="/includes/style.css">
<title>Menutest</title>
</head>

<body onload="initMenu('menu1'); initMenu('menu2'); initMenu('menu3');">

<form name="frmMenuAdm" method="post" action="/" id="frmMenuAdm">

<div id="menu1" class="divmenuhead close menuframe" onclick="menuNav('menu1');"><span style="padding-left: 5px; font-weight: bold;">Administrér</span>
<div class="divmenutopcat" onclick="location.href='/test1.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test1.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test2.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test2.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test3.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test3.asp</span></div>
</div>
<div id="menu1c" class="divmenuhead open menuframe" onclick="menuNav('menu1');"><span style="padding-left: 5px; font-weight: bold;">Administrér</span></div>

<div id="menu2" class="divmenuhead close menuframe" onclick="menuNav('menu2');"><span style="padding-left: 5px; font-weight: bold;">Links</span>
<div class="divmenutopcat" onclick="location.href='/test1.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test1.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test3.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test3.asp</span></div>
</div>
<div id="menu2c" class="divmenuhead open menuframe" onclick="menuNav('menu2');"><span style="padding-left: 5px; font-weight: bold;">Links</span></div>

<div id="menu3" class="divmenuhead close menuframe" onclick="menuNav('menu3');"><span style="padding-left: 5px; font-weight: bold;">Info</span>
<div class="divmenutopcat" onclick="location.href='/test1.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test1.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test2.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test2.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test3.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test3.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test4.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test4.asp</span></div>
</div>
<div id="menu3c" class="divmenuhead open menuframe" onclick="menuNav('menu3');"><span style="padding-left: 5px; font-weight: bold;">Info</span></div>
</form>

</body>

</html>

.. men det snerper :)

crazysnap, der er opstået en lille situation, jeg regner med at være tilbage om en times tid. Du skal ikke vente på mig, det haster ikke, jeg er kun glad, hvis du gider at bruge din tid og dine kræfter på det. Men jeg er som sagt tilbage om en ca. 1 time. Hvis du er smuttet i seng, når jeg kommer tilbage, snakkes vi bare ved senere. Forhåbentlig i morgen :)

Det er bare i orden, jeg er sandsynligvis i seng på det tidspunkt (arbejdet kalder jo). Men jeg ved godt hvorfor det sker (altså hvorfor den folder sammen når man klikker på et link) og det har noget med html strukturen at gøre som skal ændres lidt. Jeg fixer det og uploader det (så kan du selv kopiere de retmæssige ting over i en script.js fil)

- Snap

Ok, jeg er tilbage. Hvis du har mod og energi til det :)

Ups, så ikke dit indlæg. Alle tiders, vi snakkes bare ved :)

Det var hurtigt.. er ved at fixe det..

Det tog en del kortere tid end beregnet :)

kan du ikke lige sende mig dine style indstillinger fra "/includes/style.css" vedrørende "divmenuhead open menuframe" og "divmenuhead close menuframe" :)

.divmenuhead {
width: 158px;
height: 29px;
cursor: hand;
cursor: pointer;
line-height: 29px;
}
.open {
background-image: url('/images/menu/menuopen.jpg');
}
.close {
background-image: url('/images/menu/menuclose.jpg');
}
.menuframe {
width: 158px;
border: 1px solid #7a6311;
}

Smukt, så ser det ud til at spille. Har ændret meget i html-koden, hvilket også gør den mere logisk. Har også ændret i javascriptet, så hvis du kopierer det nye script over i din script.js fil og ændrer html koden i dine 4 sider til den nye struktur tror jeg vi er ved at være der! :)

Hvis du skynder dig kan du lige skrive svaret, så kan jeg måske sove trygt i nat! :D



<!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>MENU</title>


<script type="text/javascript">

var status;
var cookieLifeTime = 7; //In days. -1 is zero days and the cookies will disappear when the user logs off


function initMenu(menuName)
{
    var cook = getCookie(menuName);
   
    if(cook == null)
        status = 1;
    else
        status = (cook == "1") ? 1 : 0;
   
    setMenuVisibility(menuName, status);
}


function menuNav(menuName)
{
    var cook = getCookie(menuName);
   
    status = (cook == "1") ? 0 : 1;

    setMenuVisibility(menuName, status);
}


function setMenuVisibility(menuName, status)
{
    if(status == 0) //Closed
    {
        document.getElementById(menuName).className = "divmenuhead open menuframe";
        document.getElementById(menuName + "c").style.display='none';
    }
    else        //Open
    {
        document.getElementById(menuName).className ='divmenuhead close menuframe';
        document.getElementById(menuName + "c").style.display='block';
    }

    createCookie(menuName, status, cookieLifeTime);
}


function createCookie(name, value, days)
{
    if (days)
    {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else
        var expires = "";

    if(days != -1)
        document.cookie = name+"="+value+expires;
    else
        document.cookie = name+"="+value;
}

function getCookie( name )
{
    var start = document.cookie.indexOf( name + "=" );
    var len = start + name.length + 1;
    if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) )
    {
        return null;
    }
   
    if ( start == -1 )
        return null;

    var end = document.cookie.indexOf( ";", len );
    if ( end == -1 )
        end = document.cookie.length;
   
    return unescape( document.cookie.substring( len, end ) );
}

</script>

</head>

<body onload="initMenu('menu1'); initMenu('menu2'); initMenu('menu3');">

<form name="frmMenuAdm" method="post" action="/" id="frmMenuAdm">

<div id="menu1" onclick="menuNav('menu1');"><span style="padding-left: 5px; font-weight: bold;">Administrér</span></div>
<div id="menu1c">
<div class="divmenutopcat" onclick="location.href='/test1.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test1.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test2.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test2.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test3.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test3.asp</span></div>
</div>

<div id="menu2" onclick="menuNav('menu2');"><span style="padding-left: 5px; font-weight: bold;">Links</span></div>
<div id="menu2c">
<div class="divmenutopcat" onclick="location.href='/test1.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test1.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test3.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test3.asp</span></div>
</div>

<div id="menu3" onclick="menuNav('menu3');"><span style="padding-left: 5px; font-weight: bold;">Info</span></div>
<div id="menu3c">
<div class="divmenutopcat" onclick="location.href='/test1.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test1.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test2.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test2.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test3.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test3.asp</span></div>
<div class="divmenutopcat" onclick="location.href='/test4.asp'" onmouseover="this.className='divmenutopcatover';" onmouseout="this.className='divmenutopcatout';"><span style="padding-left: 8px;">test4.asp</span></div>
</div>

</form>



</body>
</html>



- Snap

Jeg bukker og takker, den er simpelthen lige i øret! :)

Svarer du lige på http://www.eksperten.dk/spm/754775 - jeg må give 200 point for en løsning. Det får du hermed :)

Det var dejligt, så fik du endelig den ønskede opførsel af menuen. Mange tak for pointene og du kan altid skrive hvis der skulle dukke noget op. :)

Sov godt!

Mvh.

- Snap

I lige måde, og jeg takker også. Vi snakkes :)

Lige et lille spørgsmål: Hvor mange dage kan man sætte cookien til?

Forøvrigt, så virker det fint. MEGET fint :)

Det var da godt at høre! :)

Så vidt jeg ved er der ingen grænse for hvor længe en cookie kan leve i. Så du kan jo bare sætte den til at udløbe en gang i år 2300 ;). De fleste udviklere er dog flinke til at sætte udløbstiden til en dato indenfor den nærmeste fremtid, for det er langt fra alle brugere der sletter sine cookies i ny og næ. Og brugte alle sider cookies som udløb i år 2300 ville man til sidst have en hel hær af cookies liggende på sin maskine.

Det skal dog lige tilføjes at hver gang brugerne logger ind på din side med det javascript bliver cookien "fornyet" og dagene for udløbstiden bliver dermed nulstillet. :)


Mvh

- Snap

Fedest. Takker igen, vi snakkes :)

Hej crazy

Jeg håber du har mod på en lille rettelse: Før benyttede jeg en bestemt baggrund, når menuen var åben, og en anden, når den var foldet ud. Kan det stadig lade sig gøre?

Hej Steen,


Jo det burde sagtens kunne lade sig gøre. :)
Hvis du lige fortæller hvilken style du havde i tankerne og hvad du helt præcist mener med:
"Før benyttede jeg en bestemt baggrund, når menuen var åben, og en anden, når den var foldet ud".

Altså en bestemt menu-baggrund (eller en baggrund på hele siden)?

Og skal også lige høre hvad forskellen er på "menuen er åben" og "menuen er foldet ud" (medmindre du mente når den er lukket kontra foldet ud)? :)


Mvh. :)

- Snap

Hej crazy :)

Det drejer sig ganske enkelt om de to divs, jeg lagde ud med øverst på siden:


Menuen er åben, og ude til højre skal der være en pil (transparent GIF), der peger opad, som indikerer, at menuen kan foldes sammen:

<div id="SubServiceAdmLoggedInOpen" class="divmenuhead" onclick="nav=nav+'SubServiceAdmLoggedInClosed'; menuNav();">Administrér</div>

Når den er lukket, skal pilen, der peger opad, erstattes af en pil, der peger nedad, så man kan se, at der er en menu, der kan åbnes:

<div id="SubServiceAdmLoggedInClosed" class="divmenuhead" onclick="nav=nav.replace('SubServiceAdmLoggedInClosed',''); menuNav();">Administrér</div>


Ved nærmere eftertanke fik jeg det vist aldrig til at fungere med div's, men i en tabel. Men jeg håber det er ligetil.

MENU ÅBEN:
background-image: url(/images/menuclose.gif);

MENU LUKKET:
background-image: url(/images/menuopen.gif);

Hej Steen,

Scriptet burde supporte menu-background stylen (så vidt jeg kan se). Men tror at billederne til baggrunden bliver læst ind forkert. Kan du ikke prøve at erstatte:

background-image: url("/images/menuopen.gif");
background-image: url("/images/menuclose.gif");

med:

background-image: url("images/menuopen.gif");
background-image: url("images/menuclose.gif");


altså fjerne den første "/" fra strengen. Hvis billederne ligger i "images" mappen som ligger på samme niveau som html-siden skal der ikke specificeres en "/"-charakter foran mappe-navnet. :)


Prøv ad og se om det ikke virker. Du skal selvfølgelig også sørge for at billederne som skal vises ikke er større en menu div-tagen. :)


Mvh.

- Snap

Hm, burde det have noget at sige? :) Det er jo ikke en relativ stiangivelse, men en fuldstændig, da menuen inkluderes på forskellige niveauer.

Jeg prøver lige igen ....

Sorry, jeg prøver lige at forklare igen :)

Før havde to tabeller: en, der var åben, og en der var lukket. Nu afgøres det jo i scriptet hvorvidt menuen er åben eller lukket, jeg kan ikke se jeg har muligheden for at bruge enten det ene eller det andet billede?

<div id="menu1" onclick="menuNav('menu1');" class="menuopen">Opret</div>
<div id="menu1c">
    <div class="divmenutopcat" onclick="location.href='/admin/newmainarea.asp'" onmouseover="this.className='topcatover';" onmouseout="this.className='topcatout';">Hovedområde</div>
    <div class="divmenutopcat" onclick="location.href='/admin/newtopcat.asp'" onmouseover="this.className='topcatover';" onmouseout="this.className='topcatout';">Topkategori</div>
    <div class="divmenutopcat" onclick="location.href='/admin/newsubcat.asp'" onmouseover="this.className='topcatover';" onmouseout="this.className='topcatout';">Underkategori</div>
</div>

Hehe, tror vi går lidt forbi hinanden nu. Men du har ret class attributen bliver ikke sat i html koden nu, men i javascriptet i metoden:

function setMenuVisibility(menuName, status)
{
    if(status == 0) //Closed
    {
        document.getElementById(menuName).className = "divmenuhead open menuframe";
        document.getElementById(menuName + "c").style.display='none';
    }
    else        //Open
    {
        document.getElementById(menuName).className = "divmenuhead close menuframe";
        document.getElementById(menuName + "c").style.display='block';
    }

    createCookie(menuName, status, cookieLifeTime);
}

Som du ser specificeres der i den metode om det skal være en "close" eller "open" style der skal bruges på lige netop det menu-punkt. Det forudsætter selvfølgelig at der tilføjes en style der hedder "open" og "close" før det virker. Altså:

<style type="text/css">
.divmenuhead {
width: 158px;
height: 29px;
cursor: hand;
cursor: pointer;
line-height: 29px;
}
.open {
background-image: url("images/menu/menuopen.jpg");
}
.close {
background-image: url("images/menu/menuclose.jpg");
}
.menuframe {
width: 158px;
border: 1px solid #7a6311;
}

</style>


Kommer vi tættere på nu? :)

Ja, det gør vi :)

For DEN da, det lå der jo i forvejen! Jeg tror ikke jeg er helt vågen :D

Jeg prøver det lige af og vender tilbage straks ...

Det driller godt nok, burde være så simpelt, så simpelt :/

Jeg skal snart ud ad døren, så jeg vender tilbage senere. Håber det er ok? :)

Sorry, det var et stiangivelsesproblem, det virker nu. Tak for hjælpen :)

Yep, det var også min første tanke. Men godt at det virker nu!

Og det var så lidt! :)


- Snap