Avatar billede Frederik Nybegynder
28. februar 2005 - 15:23 Der er 10 kommentarer og
1 løsning

Menu Spørgsmål.

Hej.
Jeg har spekuleret over hvordan man laver en menu ligesom på:
http://www.asp.dk/default.asp

Jeg er ikke sikker på hvilket kodesprog det skal skrives i, men håber i kan hjælpe mig.


- XuZeM
Avatar billede fennec Nybegynder
28. februar 2005 - 15:45 #1
Det er en simpel tabel de har brugt der. Du kan se koden ved at få vist kildekoden.
Her er et udklip:

<script language="javascript" type="text/javascript">
  function flipbg(element,mode)
  {
    if (mode=="in")
    {
      cursortype = 'hand'
      colorval = '#B21C00'
    }
    else if (mode=="out")
    {
      cursortype = ''
      colorval = '#DA310D'
    }
    element.style.backgroundColor=colorval;
    element.style.cursor=cursortype;
  }
</script>

<table bgcolor='#ffffff' width='100%' border='0' cellpadding='0' cellspacing='0'  height='100%'><tr><td bgcolor='#DA310D' width='150' align='center' valign='top' height='100%'><table bgcolor='#DA310D'  border='0' cellpadding='0' cellspacing='0' width='150'><tr><td>&nbsp;</td></tr><tr><td align='left' bgcolor='#B21C00'><div class='menuheader'>&nbsp;<b>Teknologier</b></div></td></tr>
<tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<img name='Active Server Pages' width='7' height='7' src='/graphics/pil_menu.gif' alt=''>&nbsp;<a title='Active Server Pages' class='mainmenu' href='/technology.asp?tech_id=1'>Active Server Pages</a></td></tr>
<tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<img name='Java / Java SDK' width='7' height='7' src='/graphics/pil_menu.gif' alt=''>&nbsp;<a title='Java / Java SDK' class='mainmenu' href='/technology.asp?tech_id=9'>Java / Java SDK</a></td></tr>
<tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<img name='.NET platformen' width='7' height='7' src='/graphics/pil_menu.gif' alt=''>&nbsp;<a title='.NET platformen' class='mainmenu' href='/technology.asp?tech_id=10'>.NET platformen</a></td></tr>
<tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<img name='Komponenter' width='7' height='7' src='/graphics/pil_menu.gif' alt=''>&nbsp;<a title='Komponenter' class='mainmenu' href='/technology.asp?tech_id=12'>Komponenter</a></td></tr>
<tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<img name='Scripting' width='7' height='7' src='/graphics/pil_menu.gif' alt=''>&nbsp;<a title='Scripting' class='mainmenu' href='/technology.asp?tech_id=14'>Scripting</a></td></tr>
<tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<img name='HTML / DHTML' width='7' height='7' src='/graphics/pil_menu.gif' alt=''>&nbsp;<a title='HTML / DHTML' class='mainmenu' href='/technology.asp?tech_id=15'>HTML / DHTML</a></td></tr>
</table>
Avatar billede Frederik Nybegynder
28. februar 2005 - 16:39 #2
Hmm... så hvis jeg skal have en menu hvor der er 3 punkter

Menupunkt1
Menupunkt2
Menupunkt3

Hvordan skulle koden så se ud? Gerne helt fra bunden.

<html>
<head>
<titel>test</title>
</head>
<body>
</body>
</html>


- XuZeM
Avatar billede Frederik Nybegynder
28. februar 2005 - 19:26 #3
og det skulle gerne holdes i html, css eller php
Avatar billede Slettet bruger
28. februar 2005 - 20:08 #4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <title>Min hjemmeside</title>

<meta name="Generator" content="Stone's WebWriter 4">
<meta name="Author" content="Ib Bermann">
<style type="text/css" media="screen">
body{
    background: Aqua;
    color: black;
    margin: 0px;
}

#topbar{
    position: absolute;
    top: 20px;
    left: 60px;
    height: 30px;
    width: 100%;
    color: Maroon;
    font-size: x-large;
}

#indhold{
padding-top:180px;
padding-left:170px;
padding-right:20px;
}

#menu{
position:absolute;
top: 80px;
left:20px;
width:150px;
}

p{
font-family:verdana,arial,sans-serif;
font-size:0.8em;
}

h1{
font-family:verdana,arial,sans-serif;
font-size:1em;
}

a{
font-family:verdana,arial,sans-serif;
font-size:0.9em;
padding:3px;
color:green;
background:transparent;
text-decoration:none;
font-weight:bold;
}

a:hover{
color:maroon;
background:transparent;
}



</style>
</head>
<body>
<div id="indhold">
<h1>Overskrift til indhold</h1>
<p>Tekst og billeder p&aring; din side.</p>
</div>
<div id="topbar">Her er min Hjemmeside</div>
<div id="menu">
<a href="side1.htm">Side 1</a><br>
<a href="side2.htm">Side 2</a><br>
<a href="side3.htm">Side 3</a><br>
<a href="side4.htm">Side 4</a>
</div>

</div>

</body>
</html>
Avatar billede fennec Nybegynder
01. marts 2005 - 08:26 #5
Lidt mere forenklet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Untitled</title>
</head>

<body>
<script language="javascript" type="text/javascript">
  function flipbg(element,mode)
  {
    if (mode=="in")
    {
      cursortype = 'hand'
      colorval = '#B21C00'
    }
    else if (mode=="out")
    {
      cursortype = ''
      colorval = '#DA310D'
    }
    element.style.backgroundColor=colorval;
    element.style.cursor=cursortype;
  }
</script>

<table bgcolor='#DA310D'  border='0' cellpadding='0' cellspacing='0' width='150'>
  <tr><td>&nbsp;</td></tr>
  <tr><td align='left' bgcolor='#B21C00'><div class='menuheader'>&nbsp;<b>Menu 1</b></div></td></tr>
  <tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<a title='menu 1' class='mainmenu' href='/default.asp?page=1'>menu 1.1</a></td></tr>
  <tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<a title='mwnu 2' class='mainmenu' href='/default.asp?page=2'>menu 1.2</a></td></tr>
  <tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<a title='menu 3' class='mainmenu' href='/default.asp?page=3'>menu 1.3</a></td></tr>

  <tr><td>&nbsp;</td></tr>
  <tr><td align='left' bgcolor='#B21C00'><div class='menuheader'>&nbsp;<b>Menu 2</b></div></td></tr>
  <tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<a title='menu 1' class='mainmenu' href='/default.asp?page=4'>menu 2.1</a></td></tr>
  <tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<a title='mwnu 2' class='mainmenu' href='/default.asp?page=5'>menu 2.2</a></td></tr>
  <tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left'>&nbsp;&nbsp;<a title='menu 3' class='mainmenu' href='/default.asp?page=6'>menu 2.3</a></td></tr>
</table>
</body>
</html>
Avatar billede Slettet bruger
01. marts 2005 - 17:00 #6
>fennec... Kan der sættes submenu (undermenu til menupunkter) ind i sidstnævnte menu
Avatar billede Frederik Nybegynder
01. marts 2005 - 20:35 #7
Hmm... når jeg skriver den kode på den sidst nævnte menu, så hvis man trykker i feltet hvor musen ikke er over teksten, så virker linket ikke.. kan man gøre så det kmmer til det???
Avatar billede fennec Nybegynder
02. marts 2005 - 08:59 #8
ja og ja :o)

1. Det kommer lidt an på hvordan du vil have submenuen til at virke. På eks er den fremme hele tiden.

2. Så sætter du linket på td's onClick event. Det gøres med location.href.

<table bgcolor='#DA310D'  border='0' cellpadding='0' cellspacing='0' width='150'>
  <tr><td>&nbsp;</td></tr>
  <tr><td align='left' bgcolor='#B21C00'><div class='menuheader'>&nbsp;<b>Menu 1</b></div></td></tr>
  <tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left' onclick="location.href='enSide.htm'">&nbsp;&nbsp;menu 1.1</td></tr>
  <tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left' onclick="location.href='enSide.htm'">&nbsp;&nbsp;menu 1.2</td></tr>
  <tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left' onclick="location.href='enSide.htm'">&nbsp;&nbsp;&nbsp;&nbsp;submenu 1.2.1</td></tr>
  <tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left' onclick="location.href='enSide.htm'">&nbsp;&nbsp;&nbsp;&nbsp;submenu 1.2.2</td></tr>
  <tr><td onmouseover='flipbg(this,"in");' onmouseout='flipbg(this,"out");' align='left' onclick="location.href='enSide.htm'">&nbsp;&nbsp;menu 1.3</td></tr>
</table>
Avatar billede Slettet bruger
02. marts 2005 - 09:21 #9
Tak det virker fint, men nu er det jo ikke mit spm, så jeg har oprettet:

http://www.eksperten.dk/spm/596044
Avatar billede Frederik Nybegynder
03. marts 2005 - 18:59 #10
tak :) det virker :) smid et svar så du kan få dine point ;)
Avatar billede fennec Nybegynder
04. marts 2005 - 08:26 #11
.o) <-- One Eyed Jack
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