Avatar billede dundee Nybegynder
06. maj 2005 - 15:48 Der er 20 kommentarer og
1 løsning

dropdown menu

Hej eksperter.

Jeg er ved at lave min hjemmeside www.vub2820.dk lidt mere overskuelig så jeg ville gerne ha en dropdown menu. nogen der ved hvordan jeg kan gøre det og hvor jeg evt. kan finde sådan en henne uden at skulle lave for meget arbejde med den ??

Kan den evt laves i html ??
Avatar billede espersen Novice
06. maj 2005 - 16:05 #1
denne er nem : http://java.skyteam.ru/dropdownmenu.htm

ellers :
http://www.dynamicdrive.com/dynamicindex1/index.html

Der kunne være der var en der var lige i øjet.
Avatar billede nielle Nybegynder
06. maj 2005 - 17:06 #2
Coolmenus er en meget anvent thingy:

http://www.dhtmlcentral.com/projects/coolmenus/
Avatar billede psykochicken Nybegynder
06. maj 2005 - 17:41 #3
eller prøv www.milonic.com - den kan placeres i en tabel og er derfor nem at styre !
Avatar billede gf Nybegynder
07. maj 2005 - 16:53 #4
Hej

Jeg fandt denne her på eksperetn engang den er meget nem at gå til og layout styres fra style sheet:

Mvh gf

placer dette i et htm dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nyt dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<!--
Drop down menu by Jimmy Thomsen - http://www.powerzone.dk
Copyright Jimmy Thomsen - do not remove this note.
-->

<script type="text/javascript">
function showmenu(elmnt, obj) {
  document.getElementById(elmnt).style.visibility="visible";
}

function hidemenu(elmnt) {
  document.getElementById(elmnt).style.visibility="hidden";
}
</script>

<div class="topmenu">
  <div class="menuitemcontainer" onmouseover="showmenu('boern', this)" onmouseout="hidemenu('boern')">
    <a class="menuitemlink" href="#">overskrift1</a>
    <div class="submenu" id="boern" onmouseover="showmenu('forside')" onmouseout="hidemenu('forside')">
      <a href="#" class="submenu">1</a>
      <a href="#" class="submenu">2</a>
      <a href="#" class="submenu">3</a>
    </div>
  </div>
  <div class="menuitemcontainer" onmouseover="showmenu('morogfar', this)" onmouseout="hidemenu('morogfar')">
    <a class="menuitemlink" href="#">overskrift 2</a>
    <div class="submenu" id="morogfar" onmouseover="showmenu('info')" onmouseout="hidemenu('info')">
      <a href="#" class="submenu">1</a>
      <a href="#" class="submenu">2</a>
    </div>
  </div>
  <div class="menuitemcontainer">
    <a class="menuitemlink" href="#">uden sub</a>
  </div>
  <div class="menuitemcontainer" onmouseover="showmenu('stillinger')" onmouseout="hidemenu('stillinger')">
    <a class="menuitemlink" href="#">overskrift 3</a>
    <div class="submenu" id="stillinger" onmouseover="showmenu('kontakt')" onmouseout="hidemenu('kontakt')">
      <a href="#" class="submenu">1</a>
      <a href="#" class="submenu">1</a>
      <a href="#" class="submenu">1</a>
    </div>
  </div>
</div>
<br>
Tekst tekst tekst tekst tekst Tekst tekst tekst tekst tekst Tekst tekst tekst tekst tekst
</body>
</html>

Placer dette i style.css

body {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #000000;
}

div.topmenu {
  border: 0px solid #808080;
  width: 750px;
  height: 21px;
  /*background: url(../images/menu.jpeg) repeat-x;*/
  background-color: #5A6994;
}

div.menuitemcontainer {
  float: left;
}

a.menuitemlink {
  padding-top: 3px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 5px;
  color: #FFFFFF;
  text-decoration: none;
  display: block;
}

a.menuitemlink:hover {
  /*background: url(../images/menuhover.jpeg) repeat-x;*/
  background-color: #E79114;
}

div.submenu {
  width: 150px;
  position: absolute;
  z-index: 1;
  visibility: hidden;
  border: 1px solid #808080;
  background-color: #5A6994;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
  -moz-opacity: 0.90;
  opacity: 0.90;
}

a.submenu {
  width: 135px;
  padding: 2px 10px 3px 5px;
  color: #FFFFFF;
  text-decoration: none;
  display: block;
}

a.submenu:hover {
  width: 135px;
  /*background: url(../images/menuhover.jpeg) repeat-x;*/
  background-color: #E79114;
}
Avatar billede espersen Novice
07. maj 2005 - 16:55 #5
kaster et svar ;o)
Avatar billede psykochicken Nybegynder
08. maj 2005 - 01:58 #6
Hvis du ikke kan bruge nogen af ovenstående, så er der også den helt simple:
<form>
<select onChange="if (options[selectedIndex].value) {parent.main.location = options[selectedIndex].value}">
<option value="side1.htm">Forside</option>
<option value="side2.htm">Historie</option>
<option value="side3.htm">Bestyrelsen</option>
<option value="...osv">Billeder</option>
</select>
</form>
Se eksempel (kopi af din egen side): http://www.myplayhouse.dk/vub/
Den kan sågar redigeres i Frontpage, som jeg tror du bruger ;-)
Avatar billede nielle Nybegynder
11. maj 2005 - 19:21 #7
Svar :^)
Avatar billede dundee Nybegynder
11. maj 2005 - 21:32 #8
okay jeg kan squ ikke finde ud af det her :-( jeg tror jeg opretter et nyt emne om det under opgaver for det er ikke noget jeg kan finde ud af :-(

inden jeg opretter nyt emne under opgaver er der så en af jer der vil påtage sig denne opgave ?? jeg forhøjer til 60 point.

hilsen Dundee
Avatar billede dundee Nybegynder
11. maj 2005 - 21:38 #9
hvis der er en der vil påtage sig denne opgave har jeg lavet menu_data.js filen som den skal være.

linket til denne fil er www.vub2820.dk/menu_data.js
Avatar billede psykochicken Nybegynder
13. maj 2005 - 00:00 #10
Måske kan den her bruges http://www.myplayhouse.dk/vub/
Avatar billede dundee Nybegynder
14. maj 2005 - 10:49 #11
psykochicken: du er bare den bedste. :-) det er lige det jeg skulle bruge og det har samme farver som resten ef siden det er for godt

hva skal jeg så gøre nu ?? skal jeg bare hente de filer ??? der er op siden og så er den som den skal ?? eller hvordan er det med det ??
Avatar billede psykochicken Nybegynder
14. maj 2005 - 13:17 #12
Det nemmeste er at kopiere hele kilden fra forsiden.
Så henter du de 4 filer og lægger i samme bibliotek som forsiden :)

Hvis du skal rette i menuen, behøver du kun at arbejde på forsiden.

På sigt vil jeg anbefale dig at lære noget om css. Du kan gå på http://html.dk og prøve deres css-tutorial (godt sted at starte). Når du har været gennem denne tutorial, vil du selv kunne rette i common.css. De 3 .js-filer får du ikke brug for at rette i.
Avatar billede dundee Nybegynder
14. maj 2005 - 17:04 #13
jeg har lagt det ind. :-) kan du lige se på www.vub2820.dk om du kan se nogen fejl i ???

og hvis du så lige smider et svar :-)
Avatar billede dundee Nybegynder
14. maj 2005 - 17:20 #14
men der er lige en ting hvordan får jeg min hovedemenu til at være samme størelse som før ??
Avatar billede psykochicken Nybegynder
14. maj 2005 - 19:48 #15
Højden på hovedmenuen:
.top{   
        background-color: #98c2f0;
    padding:5px;
}
fjern - padding:5px;
-------------------
Kommentar - Bredden på din submenu til vub2820:
i scriptet styres bredde/højde af: slidemenu.setup(3, 'top', 120, 60);
Det skal læses: slidemenu.setup(submenu nr, åbnes fra, bredde, højde);
hvis du ændrer bredden, vil menupunktet "viceværsens side" kunne være der i bredden.

Ellers ser det ud til at du har forstået at bruge den rigtigt ;)
Avatar billede dundee Nybegynder
17. maj 2005 - 20:31 #16
psykochicken:

Hvordan får jeg min hovedemenu til at få samme str. som der nede hvor der står copyblablabla & design by Jimmy Strange ???
Avatar billede psykochicken Nybegynder
17. maj 2005 - 21:55 #17
Det er enkelt (når man ved det):
indsæt flg. under <style type="text/css"> på index-siden:
a { color: #000; }
a:hover { color: #000; text-decoration: none; }
li {color:#000;}
....og slet så common.css, som du herpå ikke har brug for mere. Det fjerne dit problem helt.

Derefter vil jeg anbefale dig at lære lidt om css (typografiark) - tro mig det vil lette dit fremtidige arbejde en del og gøre din htmlkode mere overskuelig.
Den lette - http://html.dk/tutorials/css/
Den videregående - http://www.w3schools.com/css/
:)
Avatar billede psykochicken Nybegynder
17. maj 2005 - 21:56 #18
hov.....
så skal du også lige slette linien:
<link rel="stylesheet" type="text/css" href="common.css">
fra index-siden.
Avatar billede dundee Nybegynder
17. maj 2005 - 22:53 #19
oki takker
:-)

Så skal jeg lige spørge om noget med det belledegalleri :-)
hvis det er oki :-)

hvordan får jeg den til kun at vise 4 billeder pr side???
Avatar billede dundee Nybegynder
17. maj 2005 - 23:26 #20
det har jeg fundet ud af men hvordan får jeg så det hele til at være senter i iframen ??
Avatar billede psykochicken Nybegynder
21. maj 2005 - 17:35 #21
Hej igen - har lige været ramt af arbejde et par dage ;o)

løsning på centrering:
Stjæl koden herfra - http://www.myplayhouse.dk/menu/billeder.htm
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