Søg
Avatar billede webrex Nybegynder
21. august 2005 - 12:06 Der er 52 kommentarer og
2 løsninger

Menu - hvordan laves den lettest

HEj

Hvordan laver jeg en menu lettest a la den der ses på maersk.dk side? -

Jeg vil ikke kode det komplicerede, der ses i anden linje, når musen føres over links'ne.

Bare det der ses i første menu-linje!
Avatar billede softspot Forsker
21. august 2005 - 12:16 #1
Mener du den effekt med at menuen skifter farve eller hvad?
Avatar billede roenving Novice
21. august 2005 - 12:17 #2
*lol*

-- man skulle ikke tro, at de havde haft professionelle på den menu ...

-- men ideen er meget simpel, du har din menu med punkterne, når så en mus føres over, skifter det aktuelle elements baggrund, og alle andre elementers nulstilles (det har de på mærsk-siden løst på den måde, at de har 7 forskellige udgaver, det synes jeg er uprofessionelt !-)

-- i samme moment kan man så vise eller skjule et lag med en undermenu !o]
Avatar billede webrex Nybegynder
21. august 2005 - 12:47 #3
Den reagerer da hurtigt ved skift! > Roeving, så burde du næsten lige give et eks. på hvordan en professionel ville gøre. Er det java, da ikke css - det reagerer ikke så hurtigt!
Avatar billede webrex Nybegynder
21. august 2005 - 12:49 #4
>softspot - ja, jeg mener det, at den skifter farve - (ikke særlig svært - men hvordan laves en kode smartest - og med hurtig reaktionstid som denne.
Avatar billede roenving Novice
21. august 2005 - 12:50 #5
Du kan både lave det i javascript (brug ikke Java som forkortelse for javascript, da det er noget helt andet !-) og css ...
Avatar billede webrex Nybegynder
21. august 2005 - 12:58 #6
ok - vil ikke lave det i css - det reagerer ikke så hurtigt, synes jeg, men javascript ;) - der er jeg på bar bund - er vi da ude i noget onMouseover m.m. som jeg skal lægge på de enkelte <td>-tags i menu-tabellen?
Avatar billede roenving Novice
21. august 2005 - 13:01 #7
css reagerer udmærket, f.eks.

<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
.menu{border-collapse:collapse;}
.menu td{background:#4bb8dc;color:white;line-height:1;border:white solid;border:0 1px;padding:0;}
.menu a,.menu a:link,.menu a:visited{display:block;text-decoration:none;color:white;}
#menu1 a:hover,#menu1 a:active{display:block;background:#f00;text-decoration:none;}
#menu2 a:hover,#menu2 a:active{display:block;background:#589;text-decoration:none;}
#menu3 a:hover,#menu3 a:active{display:block;background:#f0f;text-decoration:none;}
#menu4 a:hover,#menu4 a:active{display:block;background:#0f0;text-decoration:none;}
#menu5 a:hover,#menu5 a:active{display:block;background:#00f;text-decoration:none;}
</style>

<table class="menu">
  <tr>
    <td id="menu1"><a href="lkjh">Link1</a></td>
    <td id="menu2"><a href="lkjh">Link2</a></td>
    <td id="menu3"><a href="lkjh">Link3</a></td>
    <td id="menu4"><a href="lkjh">Link4</a></td>
    <td id="menu5"><a href="lkjh">Link5</a></td>
  </tr>
</table>
Avatar billede softspot Forsker
21. august 2005 - 13:01 #8
Jeg kunne forestille mig noget i stil med dette:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>DHTMLMenu</title>
    <script type="text/javascript">
        function highlight(e)
        {
            var evt = (e ? e : window.event);
            var obj = (evt.srcElement ? evt.srcElement : evt.target);
            if(obj)
            {
                var tdcell = obj.parentNode;
                tdcell.style.backgroundColor = obj.hcol;
            }
        }
       
        function normal(e)
        {
            var evt = (e ? e : window.event);
            var obj = (evt.srcElement ? evt.srcElement : evt.target);
            if(obj)
            {
                var tdcell = obj.parentNode;
                tdcell.style.backgroundColor = "";
            }
        }
       
        function setupLinks()
        {
            var hicol = "red,blue,green,yellow,gray".split(",");
            var lnks = document.getElementsByTagName("A");
            var cnt = 0;
            for(var i = 0; i < lnks.length; i++)
            {
                if(lnks[i].className == "menuitem")
                {
                    var obj = lnks[i];
                    obj.onmouseover = highlight;
                    obj.onmouseout = normal;
                    obj.hcol = hicol[cnt];
                    cnt++;
                }
            }
        }
        window.onload = setupLinks;
    </script>
  </head>
  <body>
    <table>
        <tr>
            <td><a href="" class="menuitem">Menu 1</a></td>
            <td><a href="" class="menuitem">Menu 2</a></td>
            <td><a href="" class="menuitem">Menu 3</a></td>
            <td><a href="" class="menuitem">Menu 4</a></td>
            <td><a href="" class="menuitem">Menu 5</a></td>
        </tr>
    </table>
  </body>
</html>
Avatar billede roenving Novice
21. august 2005 - 13:10 #9
Tjah, hvis jeg skulle lave sådan noget, ville jeg jo nok medsende elementet for at undgå problemerne med de forskellige event-modeller (skal man også dække andre browsere end IE og Geckoerne, mener jeg, man skal endnu længere ud !-)
Avatar billede softspot Forsker
21. august 2005 - 13:13 #10
OK, min tanke var at det stadig ville fungere (dog ikke med denne funktionalitet), hvis browseren ikke understøttede javascript, men man får nok scriptfejl i andre browsertyper, hvor evt.target eller evt.srcElement ikke er understøttet (har kun testet i IE og FF).
Avatar billede softspot Forsker
21. august 2005 - 13:14 #11
Det jeg godt kan lide ved denne fremgangsmåde er at koden ikke griber ind i HTML-koden (andet end at links får en klasse som jeg kan identificere de relevante links på)...
Avatar billede roenving Novice
21. august 2005 - 13:17 #12
Jepz, bruger den også selv, men jeg ville sætte anonyme funktioner ind:

                    obj.onmouseover = function(){highlight(this);};
                    obj.onmouseout = function(){normal(this);};
                    obj.hcol = hicol[i];

-- så skulle funktionerne selvfølgelig tage imod elementerne også:

function normal(obj){//osv.

-- og jeg rettede lige en tavetosse i nederste linje !-)
Avatar billede softspot Forsker
21. august 2005 - 13:21 #13
tænker du på obj.hcol = hicol[cnt]?

Det er med vilje at jeg har lavet en counter, da der potentielt er flere links end dem jeg vil sætte hcol-værdien på...
Avatar billede roenving Novice
21. august 2005 - 13:21 #14
Men jeg ville satse på css-løsningen, da den såvidt jeg ved, fungerer i alle nutidige browsere uanset indstillinger ...

-- bortset fra de tilfælde, hvor brugeren har bestemt et andet stylesheet, selvfølgelig !-)
Avatar billede roenving Novice
21. august 2005 - 13:22 #15
-- argh, jeg kiggede ikke lige efter ...
Avatar billede softspot Forsker
21. august 2005 - 13:24 #16
fair nok - jeg kæmpede selv lidt med den krølle ;)
Avatar billede webrex Nybegynder
21. august 2005 - 13:38 #17
> SOftspot - det ser svært ud!
Satser i første omgang på css-løsningen, men har da et par spgm.?
Den skifter først farve, når musen føres over teksten - kan det ikke ske bare den rører feltet?

Og hvordan styrer jeg bredden af feltene, fx at de skal være ligeså store som den tekst, der fyldes i  -
Avatar billede roenving Novice
21. august 2005 - 13:47 #18
Hrm, den forstår jeg ik' li'e, for det er kun IE, som ikke forstår display:block; den skal jeg lige lure lidt på ...

-- og normalt vil felterne få bredde i forhold til den tekst, der er indeni, så det andet spørgsmål forstår jeg ikke !-)
Avatar billede softspot Forsker
21. august 2005 - 13:49 #19
Ja, men det er jo lavet, så du behøver vel ikke bekymre dig om hvor svært det er...? ;)

Felterne udvider sig med teksten (jeg forstår vist ikke rigtig dit spm.). Du kan naturligvis stadig styre layout med CSS hvad angår margin, padding osv.
Avatar billede webrex Nybegynder
21. august 2005 - 13:55 #20
>Roeving  - det er måske fordi du kun siger at den skal opføre sig som et block element, når den føres over linket?

Mht. teksten - så er det bare fordi, at den deler tabellen op i 5 lige store dele?

> Softspot - jeg prøver din metode bag efter, hvis ikke css virker! - Prøver ellers lige at kopiere dit ind i et html-dokument, og da virkede det ikke.
Avatar billede softspot Forsker
21. august 2005 - 13:59 #21
Hmm... hvis du tager det jeg har postet og paster over i et nyt html-dokument, fungerer det så? Hvis ja, så vil jeg gætte på at du mangler et eller andet i dit dokument, f.eks. class på de links der skal aktiveres, eller at links ligger i en tabelcelle...
Avatar billede roenving Novice
21. august 2005 - 14:00 #22
Næh, den er netop under alle omstændigheder formatteret som block !-)
Avatar billede softspot Forsker
21. august 2005 - 14:09 #23
Jeg kan se at der er "stjålet" et anførselstegn i alle links' href da jeg pastede koden ind på eksperten... kan det være det der ikke fungerer for dig når du tager udgangspunkt i min kode?
Avatar billede webrex Nybegynder
21. august 2005 - 14:13 #24
>Softspot - ja det var det - ! Hvis man kan lave ordentlig typografi på den, så kan det jo være man skulle bruge den - eller den virkede måske ikke i alle browsere.?
Avatar billede softspot Forsker
21. august 2005 - 14:15 #25
Næppe i ALLE browsere (det er der vist ikke mange sider der gør), men det jeg har postet fungerer i IE 6, FF og Opera i nogle rimelig nye versioner...
Avatar billede roenving Novice
21. august 2005 - 14:23 #26
Og denne skulle virke i endnu flere (nutidige !-) browsere:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>DHTMLMenu</title>
    <script type="text/javascript">
        function highlight(obj){
            if(obj){
                var tdcell = obj.parentNode;
                tdcell.style.backgroundColor = obj.hcol;
            }
        }
       
        function normal(obj){
            if(obj){
                var tdcell = obj.parentNode;
                tdcell.style.backgroundColor = "";
            }
        }
       
        window.onload = function(){
            var hicol = "red,blue,green,yellow,gray".split(",");
            var lnks = document.getElementsByTagName("A");
            var cnt = 0;
            for(var i = 0; i < lnks.length; i++){
                if(lnks[i].className.indexOf("menuitem")>-1){
                    var obj = lnks[i];
                    obj.onmouseover = function(){highlight(this);};
                    obj.onmouseout = function(){normal(this);};
                    obj.hcol = hicol[cnt];
                    cnt++;
                }
            }
        }
    </script>
  </head>
  <body>
    <table>
        <tr>
            <td><a href="#" class="menuitem">Menu 1</a></td>
            <td><a href="#" class="menuitem">Menu 2</a></td>
            <td><a href="#" class="menuitem">Menu 3</a></td>
            <td><a href="#" class="menuitem">Menu 4</a></td>
            <td><a href="#" class="menuitem">Menu 5</a></td>
        </tr>
    </table>
  </body>
</html>
Avatar billede softspot Forsker
21. august 2005 - 14:28 #27
Så kan det da vist ikke blive ret meget bedre... eller hva'? :)
Avatar billede webrex Nybegynder
21. august 2005 - 14:30 #28
Ok, prøver den lige - men til jer begge - hvis brugeren (som tilfældet sikkert ofte er) ikke tillader aktivt-X elementer - eller hvad det indhold nu hedder - så virker menuen ikke, vel? - Det er da ikke smart? - men prøver lige...
Avatar billede webrex Nybegynder
21. august 2005 - 14:31 #29
Kan man sætte hex koder ind i det script? Altså i stedet for yellow....
Avatar billede roenving Novice
21. august 2005 - 14:32 #30
Jo, det er der ingen problemer i !-)

-- problemet opstår først, hvis browseren er indstillet til slet ikke at afvikle javascript !-)
Avatar billede roenving Novice
21. august 2005 - 14:33 #31
Ja, du kan sætte lovlige css-koder ind, og det er de konstante farver, #abc, #abcdef, rgb(22,33,44) !-)
Avatar billede softspot Forsker
21. august 2005 - 14:33 #32
Effekten virker ikke, men menuen fungerer stadig...
Avatar billede roenving Novice
21. august 2005 - 14:38 #33
-- og javascript er fra ufatteligt få steder hjemme hos brugerne og ikke i noget særligt stort omfang andre steder:

http://www.thecounter.com/stats/2005/June/javas.php + http://www.thecounter.com/stats/2005/July/javas.php

http://www.w3schools.com/browsers/browsers_stats.asp

-- og jeg har en formodning om, at rigtig mange af de besøgende, som ikke understøtter javascript er crawlere af forskellig slags !-)
Avatar billede webrex Nybegynder
21. august 2005 - 15:10 #34
Mange tak for hjælpen - I kan begge jeres grej! - Sidder lige nu og kæmper med de kanter - jeg har 2 tabeller: 1 med links'ne og en med hele den horisontale menu-stykke. Derved fremkommer dobbel-kantlinje, når links kanten støder på menu-kanten....hmm? Smid et svar - begge to!
Avatar billede softspot Forsker
21. august 2005 - 15:13 #35
Giv border-left på den omkransende tabel en border og så border på border-top, border-right og border-bottom på selve menu-cellerne. Det burde løse dobbeltborder-problemet (med mindre den omkransende tabel har mere indhold en menuen).
Avatar billede roenving Novice
21. august 2005 - 15:16 #36
Velbekomme '-)
Avatar billede webrex Nybegynder
21. august 2005 - 15:20 #37
Ja, altså udgangspunktet er magen til den der maersk - menuen skal ligge til højre og så en dato til venstre - (laver selvfølgelig om på farver m.m.
Avatar billede roenving Novice
21. august 2005 - 15:21 #38
-- og tak for point ;~}
Avatar billede softspot Forsker
21. august 2005 - 15:29 #39
ok, så vender du bare om på højre og venstre i det jeg foreslog :)

Ja, og tak for point naturligvis :)
Avatar billede webrex Nybegynder
21. august 2005 - 15:38 #40
I har gjort hvad I skulle, men vil bare godt have gjort det ordentligt - kan en af jer få den til at passe - med den samme kode - men liggende i en menu-horisontal linje, med samme kant system som på maersk? - Jeg giver gerne 60 point ekstra for det! ;)
Avatar billede softspot Forsker
21. august 2005 - 15:51 #41
Kan du bruge dette (udskifter den sidste del af eksemplet):

    <style type="text/css" rel="styelesheet">
        .menutab { border-left: solid 1px black; float:right; }
        .menutab td { border-right:solid 1px black; border-top:solid 1px black; border-bottom:solid 1px black; }
        .menutab a { text-decoration:none; padding:0px 5px; }
    </style>
  </head>
  <body>
    <table class="menutab" cellpadding="0" cellspacing="0">
        <tr>
            <td><a href="" class="menuitem">Menu 1</a></td>
            <td><a href="" class="menuitem">Menu 2</a></td>
            <td><a href="" class="menuitem">Menu 3</a></td>
            <td><a href="" class="menuitem">Menu 4</a></td>
            <td><a href="" class="menuitem">Menu 5</a></td>
        </tr>
    </table>
  </body>
</html>
Avatar billede softspot Forsker
21. august 2005 - 15:52 #42
CRAP! nu fjernede den igen anførselstegn! Sætter du selv lige #" på alle links' href'er...?
Avatar billede softspot Forsker
21. august 2005 - 15:54 #43
Nå, der var da også lige en stavefejl i style-tag'et:

<style type="text/css" rel="styelesheet">

Det skal naturligvis være:

<style type="text/css" rel="stylesheet">
Avatar billede roenving Novice
21. august 2005 - 15:59 #44
Der er da ikke nogen rel-attribut på et style-tag !-)
Avatar billede softspot Forsker
21. august 2005 - 16:14 #45
hmm... er det kun på link?
Avatar billede webrex Nybegynder
21. august 2005 - 18:06 #46
>Softspot- din kode er fin, dog laver den kun border i højre side, dvs. rundt om linksene - så var det, at jeg tænkte, at man måske kunne lave et punkt, som man lader strække sig lige fra menupunkt 1 og helt til venstre - men hvilken kode bruger man da - for at sige at dette felt skal optage resten af den plads, som menu punkterne ikke optager?
Avatar billede softspot Forsker
21. august 2005 - 18:25 #47
Kan du så bruge dette (igen kun det sidste af eksemplet som er ændret):

    <style type="text/css">
        .menu { width:750px; float:left; border:solid 1px black; }
        .menutab { float:right; }
        .menutab td { border-left:solid 1px black; }
        .menutab a { text-decoration:none; padding:0px 5px; }
    </style>
  </head>
  <body>
    <div class="menu">
        <table class="menutab" cellpadding="0" cellspacing="0">
            <tr>
                <td><a href="#" class="menuitem">Menu 1</a></td>
                <td><a href="#" class="menuitem">Menu 2</a></td>
                <td><a href="#" class="menuitem">Menu 3</a></td>
                <td><a href="#" class="menuitem">Menu 4</a></td>
                <td><a href="#" class="menuitem">Menu 5</a></td>
            </tr>
        </table>
    </div>
  </body>
</html>



Jeg har smidt en div omkring menutabellen som har en fast bredde og flyder til venstre. Desuden har jeg fjernet en masse border fra selve cellerne, da det med denne metode kun er nødvendigt at have border på venstre-kanten af tabelcellerne.
Avatar billede softspot Forsker
21. august 2005 - 18:26 #48
og juhuuuu!!! Anførselstegnene var med denne gang :P
Avatar billede softspot Forsker
21. august 2005 - 18:36 #49
Hvis du vil have noget med ind foran menuen, kan du gøre det således:

    <style type="text/css">
        .menu { width:750px; float:left; border:solid 1px black; }
        .menu span { float:left; }
        .menutab { float:right; }
        .menutab td { border-left:solid 1px black; }
        .menutab a { text-decoration:none; padding:0px 5px; }
    </style>
  </head>
  <body>
    <div class="menu">
        <span>Blah bla blaaaah</span>
        <span>&nbsp;-&nbsp;1. september 2005, kl. 15:09:02</span>
        <table class="menutab" cellpadding="0" cellspacing="0">
            <tr>
                <td><a href="#" class="menuitem">Menu 1</a></td>
                <td><a href="#" class="menuitem">Menu 2</a></td>
                <td><a href="#" class="menuitem">Menu 3</a></td>
                <td><a href="#" class="menuitem">Menu 4</a></td>
                <td><a href="#" class="menuitem">Menu 5</a></td>
            </tr>
        </table>
    </div>
  </body>
</html>


Altså smide det i en span (eller flere), som i stylesheetet har fået en float:left for at de bliver på samme linie.
Avatar billede webrex Nybegynder
21. august 2005 - 18:39 #50
Så nu er vi tæt på mål - - - har fået det til at se ud som ønsket - men i stedet for din faste bredde havde jeg width: 100%;  - for menuen skal bare være ligeså lang som topbanner - Det virker bare ikke helt - så bliver menuen 1-2px længere end sidens bredde - men ændrede de 100% til en 2px mindre bredde end sidens og så stemmer pengene. Men er det en amatør-løsning? -
Avatar billede softspot Forsker
21. august 2005 - 18:47 #51
Ehm... jeg vil sige hvis det fungerer og du kan leve med det, så er det vel godt nok...

Det er min oplevelse at dem der skal betale for en løsning typisk er indstillet på at funktionalitet kommer før æstetik... :)
Avatar billede webrex Nybegynder
21. august 2005 - 19:01 #52
Nå, men det ser skam ud som det skal håber bare ikke at browsere'ne laver forskellige border str. for så vil det måske ændre sig - jeg ved ikke - det må tiden vise - lige nu - ligner den fuldstændig maersks! hehe - så skal den gøres fin og personlig! Tak for hjælpen - hvordan giver jeg dig nemmest 60 point?
Avatar billede softspot Forsker
21. august 2005 - 19:12 #53
Point skal du ikke tænke på, det var jo en problemstilling som var relateret til den anden...

Glad for at du blev glad(ere) ;)
Avatar billede webrex Nybegynder
21. august 2005 - 19:22 #54
Mange tak for hjælpen! Jeg er skam meget taknemmelig. :)
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 HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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 12:15 morf bilede Af knuldefar1942 i Fri debat
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
07/0821:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »