Avatar billede chatonline Nybegynder
17. februar 2003 - 20:52 Der er 20 kommentarer og
1 løsning

Simpel drop down menu

Hej,
jeg har søgt efter en ens farvet menu, hvor at der f.eks. står:

Chat - Mode - Mp3

så når du tager musen over "chat" så skal den smide en liste ned. Så der f.eks. står:
Login
Opret
Hjælp
Glemt password

Det skal ikek være noget med at du skal trykke på "chat" før drop down menu'en kommer. Den skal være let at redigere i.
Avatar billede esben85 Nybegynder
17. februar 2003 - 20:53 #1
find et script,
og ret onClick med onMouseOver
Avatar billede chatonline Nybegynder
17. februar 2003 - 20:55 #2
Jamen, det er det. Synes ikke jeg kan finde noget med de funktioner jeg snakker om. Altså bare et rigtig rigtig simpelt drop down menu.
Avatar billede nikolajdu Nybegynder
17. februar 2003 - 21:05 #3
<select onchange="self.location.href=this.options[this.selectedIndex].value">
<option value="www.dr.dk">DR</option>
<option value="www.tv2.dk">TV2</option>
<option value="www.eksperten.dk">eksperten</option>
</select>

Så simpelt?
Avatar billede Slettet bruger
17. februar 2003 - 22:26 #4
Avatar billede Slettet bruger
17. februar 2003 - 22:27 #5
Eller hvis det ikke lige er det så måske http://www.dynamicdrive.com/dynamicindex1/index.html
Avatar billede chatonline Nybegynder
18. februar 2003 - 17:55 #6
http://www.dynamicdrive.com/dynamicindex1/topnavbar.htm

synes jeg om. Men kan den ikke rettes sådan at den ikke fylder hele toppen. Men så den kan sættes ind i en tabel etc? Meningen er at den skal ligne cool3dchat.dk's lidt.
Avatar billede chatonline Nybegynder
18. februar 2003 - 17:57 #7
Kan man evt. ikke indsætte små billeder? F.eks ved login, så indsætte et billede af en lille nøgle?
Avatar billede nikolajdu Nybegynder
18. februar 2003 - 18:09 #8
Hvis du vil indsætte billeder i en dropdown skal du over i noget af dette. : http://reflectoria.dk/javascript/SelectSmartLayer/selectSmartLayer.htm

/Nikolaj
Avatar billede chatonline Nybegynder
18. februar 2003 - 18:28 #9
Okay, så uden billeder :-) Bare den der menu, skal være noget mindre og være i en 750px tabel.
Avatar billede nikolajdu Nybegynder
18. februar 2003 - 19:51 #10
<form style="width:50">
<select onchange="self.location.href=this.options[this.selectedIndex].value">
<option value="www.dr.dk">DR</option>
<option value="www.tv2.dk">TV2</option>
<option value="www.eksperten.dk">eksperten</option>
</select>
</form>
Avatar billede chatonline Nybegynder
18. februar 2003 - 23:51 #11
Hovsa det var ik der menu jeg mente..

Jeg mente den der ligner microsofts bare uden billeder. Men skal bare passe i en 750px
Avatar billede chatonline Nybegynder
19. februar 2003 - 11:09 #12
Så fik jeg den til 750:

  myNavBar1.resize(750);
  myNavBar1.create();
  myNavBar1.setzIndex(2);
  //UNCOMMENT BELOW LINE TO MOVE MENU DOWN 50 pixels
  //myNavBar1.moveTo(0, 50);
}


Men jeg kan sq ik' finde ud af centrer den. Prøver
Avatar billede chatonline Nybegynder
19. februar 2003 - 11:11 #13
He he fandt ud af det:

  myNavBar1.resize(750);
  myNavBar1.create();
  myNavBar1.setzIndex(2);
  //UNCOMMENT BELOW LINE TO MOVE MENU DOWN 50 pixels
  myNavBar1.moveTo(127, 15);
Avatar billede chatonline Nybegynder
19. februar 2003 - 11:13 #14
Damn.. Så virker det ik, hvis man skifter opløsning:
Avatar billede chatonline Nybegynder
19. februar 2003 - 11:13 #15
Hele mit script, prøv det. Hvad kan fejlen være?
Avatar billede chatonline Nybegynder
19. februar 2003 - 11:14 #16
<html>
<head>

<script language="JavaScript" src="navcond.js"></script>
<script language="JavaScript">

/*
Top Navigational Bar II (By Mike Hall)
Last updated: 00/05/08
Permission granted and modified by Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var myNavBar1 = new NavBar(0);
var dhtmlMenu;

//define menu items (first parameter of NavBarMenu specifies main category width, second specifies sub category width in pixels)
//add more menus simply by adding more "blocks" of same code below

dhtmlMenu = new NavBarMenu(100, 0);
dhtmlMenu.addItem(new NavBarMenuItem("Forside", "http://www.chatonline.dk/"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(100, 120);
dhtmlMenu.addItem(new NavBarMenuItem("Chat", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Login", "http://www.adr.dk"));
dhtmlMenu.addItem(new NavBarMenuItem("Opret bruger", "http://www.adr.dk"));
dhtmlMenu.addItem(new NavBarMenuItem("Glemt kodeord", "http://www.adr.dk"));
dhtmlMenu.addItem(new NavBarMenuItem("Hjælp", "http://www.adr.dk"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(110, 120);
dhtmlMenu.addItem(new NavBarMenuItem("Musik", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Tomt", "http://www.adr.dk"));
dhtmlMenu.addItem(new NavBarMenuItem("Tomt", "http://www.adr.dk"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(100, 150);
dhtmlMenu.addItem(new NavBarMenuItem("Mode", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Tomt", "http://www.adr.dk"));
dhtmlMenu.addItem(new NavBarMenuItem("Tomt", "http://www.adr.dk"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(100, 150);
dhtmlMenu.addItem(new NavBarMenuItem("Webmaster", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Tomt", "http://www.adr.dk"));
dhtmlMenu.addItem(new NavBarMenuItem("Tomt", "http://www.adr.dk"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(100, 150);
dhtmlMenu.addItem(new NavBarMenuItem("Webmaster", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Tomt", "http://www.adr.dk"));
dhtmlMenu.addItem(new NavBarMenuItem("Tomt", "http://www.adr.dk"));
myNavBar1.addMenu(dhtmlMenu);

//set menu colors
myNavBar1.setColors("#000000", "#FFFFFF", "#437CB6", "#ffffff", "#666666", "#000000", "#cccccc", "#ffffff", "#437cb6")

//uncomment below line to center the menu (valid values are "left", "center", and "right"
//myNavBar1.setAlign("center")

var fullWidth;

function init() {

  // Get width of window, need to account for scrollbar width in Netscape.

  fullWidth = getWindowWidth()
    - (isMinNS4 && getWindowHeight() < getPageHeight() ? 16 : 0);

  myNavBar1.resize(750);
  myNavBar1.create();
  myNavBar1.setzIndex(2);
  //UNCOMMENT BELOW LINE TO MOVE MENU DOWN 50 pixels
  myNavBar1.moveTo(126, 15);
}
</script>

<meta http-equiv="Content-Language" content="da">
<title>ChatOnline.dk - 3d tekstchat v. 1.0</title>
</head>

<body style="font-family: Verdana; font-size: 10pt">
<body onload="init()">
</body>

<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color: #437cb6;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #a7a7a7;
scrollbar-track-color: #a7a7a7;
}
-->
</STYLE>

<style>
<!--
a:link{color: #FFFFFF;text-decoration: none;}
a:visited{color: #FFFFFF;text-decoration: none;}
a:active{color: #000000;text-decoration: underline;}
a:hover{color: #000000;text-decoration: none;}
-->
</style>

<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; font-family:Verdana; font-size:10pt" bordercolor="#111111" width="750" id="AutoNumber1">
  <tr>
    <td width="100%">
    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="100%" id="AutoNumber2">
      <tr>
        <td width="100%" style="border-style: none; border-width: medium">
        </td>
      </tr>
      <tr>
        <td width="100%" style="border-left: medium none #111111; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">
        <body onload="init()"></td>
      </tr>
      <tr>
        <td width="100%" style="border-left: medium none #111111; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
      </tr>
      <tr>
        <td width="100%" style="border-left: medium none #111111; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
Avatar billede chatonline Nybegynder
19. februar 2003 - 11:57 #17
Denne menu på denne side kan jeg godt li':
http://www.xup.dk/

men menu'en skal ikke komme frem når man trykker, men bare når man holder musen over.
Avatar billede chatonline Nybegynder
19. februar 2003 - 18:09 #18
Ingen der gider hjælpe? Sidder point tallet lidt op..
Avatar billede chatonline Nybegynder
19. februar 2003 - 19:55 #19
Her var lidt:
<script language="javascript">
function chat(filnavn,titel,hoj,bred){
UniqueWindow = window.open(filnavn, titel,"scrollbars=yes,toolbars=no,location=no,status=yes,directories=no,resizable=no,height="+hoj+",width="+bred+"");
}
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="?go2=login"><b>Login</b></a><br>'
menu1[1]='<a href="?go2=opret"><b>Opret Bruger</b></a><br>'
menu1[2]='<a href="?go2=forside"><b>Forside</b></a><br>'
//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href="?go2=bestilfig"><b>Figur salg</b></a><br>'
menu2[1]='<a href="?go2=news"><b>Nyheder</b></a><br>'

//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href="http://www.coolius.dk" target="_blank"><b>Coolius.dk</b></a><br>'

//Contents for menu 4
var menu4=new Array()
menu4[0]='<a href="?go2=xup"><b>Om xup</b></a><br>'
menu4[1]='<a href="?go2=team"><b>Holdet Bag</b></a><br>'
menu4[2]='<a href="?go2=supporter"><b>Supporters</b></a><br>'
var overcolor = '#D8DEEE'
var outcolor = '#a3b3c3'

function mover(object){
if (object == "knap1"){
knap1.style.background = overcolor
knap2.style.background = outcolor
knap3.style.background = outcolor
knap4.style.background = outcolor
}
if (object == "knap2"){
knap1.style.background = outcolor
knap2.style.background = overcolor
knap3.style.background = outcolor
knap4.style.background = outcolor
}
if (object == "knap3"){
knap1.style.background = outcolor
knap2.style.background = outcolor
knap3.style.background = overcolor
knap4.style.background = outcolor
}
if (object == "knap4"){
knap1.style.background = outcolor
knap2.style.background = outcolor
knap3.style.background = outcolor
knap4.style.background = overcolor
}
}
function mout(object){
if (object == "knap1"){
knap1.style.background = outcolor
}
if (object == "knap2"){
knap2.style.background = outcolor
}
if (object == "knap3"){
knap3.style.background = outcolor
}
if (object == "knap4"){
knap4.style.background = outcolor
}
}
</script>
<body>
<script language="javascript" type="text/javascript">
//reusable/////////////////////////////
var zindex=100
function dropit2(whichone,nr){
if (nr == '3'){
var minus = 9
}
else if (nr == '4') {
var minus = 9
} else {
var minus = 9
}

if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX-minus
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+12
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++
}
else{
hidemenu()
}
}
}

function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide"){
themenu.visibility="show"
}else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY
return false
}

function hidemenu(whichone){
if (window.themenu){
var outcolor = '#a3b3c3'
knap1.style.background = outcolor
knap2.style.background = outcolor
knap3.style.background = outcolor
knap4.style.background = outcolor
themenu.style.visibility="hidden"
}
}
function hidemenu2(){
themenu.visibility="hide"
}
if (document.all)
document.body.onclick=hidemenu
//reusable/////////////////////////////
</script>
<table class="outline" cellpadding=0 cellspacing=0 align="center" width=565>
<tr>
<td colspan=5 height=60>&nbsp;</td>
</tr>
<tr>
<td id="slider" align="center" width=260 valign="bottom">&nbsp;&nbsp;</center></td>
<td id="knap1" width=75 onmouseover="mover('knap1')">&nbsp;<ilayer height=10px><layer visibility=show><span class=iewrap1><span class=iewrap2 onMouseOver="dropit2(dropmenu0,0);event.cancelBubble=true;return false"><b>Chatten</b></a></span></span></layer></ilayer></td>
<td id="knap2" width=75 onmouseover="mover('knap2')">&nbsp;<ilayer height=10px><layer visibility=show><span class=iewrap1><span class=iewrap2 onMouseOver="dropit2(dropmenu1,1);event.cancelBubble=true;return false"><b>Fun stuff</b></a></span></span></layer></ilayer><br></td>
<td id="knap3" width=75 onmouseover="mover('knap3')">&nbsp;<ilayer height=10px><layer visibility=show><span class=iewrap1><span class=iewrap2 onMouseOver="dropit2(dropmenu2,2);event.cancelBubble=true;return false"><b>Partnere</b></a></span></span></layer></ilayer><br></td>
<td id="knap4" width=75 onmouseover="mover('knap4')">&nbsp;<ilayer height=10px><layer visibility=show><span class=iewrap1><span class=iewrap2 onMouseOver="dropit2(dropmenu3,3);event.cancelBubble=true;return false"><b>Information</b></a></span></span></layer></ilayer><br></td>
</tr>
<tr>
<td colspan=5 valign="middle" class="newsbox" height=322 align="center">
<body><DIV ID="dek"></DIV></center></align>
</body>
</div>
<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:white;background-color:#D8DEEE;width:85;visibility:hidden;border:1px solid black;padding:0px;font-family:verdana;font-size:10px;color:black;text-decoration:none">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="2px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu2
}
  </script>
<div id="dropmenu1" style="position:absolute;left:0;top:0;layer-background-color:white;background-color:#D8DEEE;width:85;visibility:hidden;border:1px solid black;padding:0px;font-family:verdana;font-size:10px;color:black;text-decoration:none">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="2px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu2
}
  </script>
<div id="dropmenu2" style="position:absolute;left:0;top:0;layer-background-color:white;background-color:#D8DEEE;width:85;visibility:hidden;border:1px solid black;padding:0px;font-family:verdana;font-size:10px;color:black;text-decoration:none">
<script language="JavaScript1.2">
if (document.all)
dropmenu2.style.padding="2px"
for (i=0;i<menu3.length;i++)
document.write(menu3[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu2
}
  </script>
<div id="dropmenu3" style="position:absolute;left:0;top:0;layer-background-color:white;background-color:#D8DEEE;width:85;visibility:hidden;border:1px solid black;padding:0px;font-family:verdana;font-size:10px;color:white;text-decoration:none">
<script language="JavaScript1.2">
if (document.all)
dropmenu3.style.padding="2px"
for (i=0;i<menu4.length;i++)
document.write(menu4[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu3.captureEvents(Event.CLICK)
document.dropmenu3.onclick=hidemenu2
}
  </script>
</body>
</html>
Avatar billede chatonline Nybegynder
19. februar 2003 - 19:56 #20
Synes stadig "Microsoft's" er federe, men det er lidt irriterende at den ikke kan være ordenlig.. Den skal passe når opløsning osv ændres..



NOGEN DER GIDER AT HJÆLPE!!
Avatar billede chatonline Nybegynder
20. februar 2003 - 13:18 #21
Nå, så lukker jeg.
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