Toon posts:

[HTML] Menu moet overlappen

Pagina: 1
Acties:

vrijdag 29 maart 2002 13:25

Acties:
  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 21:08

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
Topicstarter
Ik heb het probleem dat ik een pull down menu heb gemaakt, maar wanneer je er overheen gaat, verdwijnen bepaalde delen van het menu. Hij hoort de achtergrond te overlappen, maar dat doet hij niet ;( Nu heb ik een paar topics gevonden en daaruit bleek dat ik een regel moest toevoegen, maar dat wil maar niet werken, terwijl ik precies doe zoals daar staat:


Menu.css
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

body       { color: #FFFFFF }
.menuBar     { position: relative; text-align: center; color: #FFFFFF }
.Bar       { float: right; width: 100px; cursor: hand; text-indent: 5px; position: relative; 
           background-color: #045DA1; text-align: center; 
           border: 1px solid #0000CC }
.menu     { visibility: hidden; width: 150px; line-height: 140%; position: absolute; 
           background-color: #045DA1; border: thin outset #0000CC }
.menuItem    { width: 100%; cursor: hand; line-height: 20px; color: #FFFFFF; 
           border-bottom: 1px solid white; padding-left: 10px; 
           padding-right: 15px }
.ItemMouseOver { width: 100%; cursor: hand; color: #FFFFFF; line-height: 20px; 
           background-color: #045DA1; border-bottom: 1px solid #FFFFFF; 
           padding-left: 10px; padding-right: 15px; 0px; z-index: 6000000}
.ItemMouseOut { width: 100%; color: #FFFFFF }
.Arrow
{
    FLOAT: right;
    FONT-FAMILY: Webdings;
    POSITION: absolute;
    TEXT-ALIGN: left
}
.barOver     { float: right; width: 100px; cursor: hand; text-indent: 5px; position: relative; 
           background-color: #045DA1; text-align: center; 
           border: 1px ridge #000080 }

Het gaat dus om die "z-index" die moest worden toegevoegd

vrijdag 29 maart 2002 13:43

Acties:
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 29-08 19:47

Bosmonster

*zucht*

Je moet wel overal z-indeces toe voegen dan...

vrijdag 29 maart 2002 13:47

Acties:
  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 21:08

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
Topicstarter
Op vrijdag 29 maart 2002 13:43 schreef Bosmonster het volgende:
Je moet wel overal z-indeces toe voegen dan...
Hoe bedoel je, ik geef hier toch aan dat OnmouseLeave sluit menu :? Of bekijk ik het nu verkeerd...Dit is btw het menu zelf
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<html>

<head>
<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>
</head>
<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgColor=aliceblue>
<DIV Id="menuBar" class="menuBar" >
    <DIV Id="Bar1" class="Bar"  menu="menu1">Menu #1</DIV>
    <DIV Id="Bar2" class="Bar"  menu="menu2">Menu #2</DIV>
    <DIV Id="Bar3" class="Bar"  menu="menu3">Menu #3</DIV>
    <DIV Id="Bar4" class="Bar"  menu="menu4">Menu #4</DIV>
</DIV>
<!--MenuItem Definition -->
<div Id="menu1" class="menu" >
   <div Id="menuItem1_1" class="menuItem"  menu="menu6">SubMenu #1</div>
   <div Id="menuItem1_2" class="menuItem" title="JavaScripts" cmd="http://javascript.internet.com/">JavaScript Source</div>
   <div Id="menuItem1_3" class="menuItem" title="WDVL" cmd="http://www.wdvl.com">WDVL</div>
</div>
<div Id="menu2" class="menu">
   <div Id="menuItem2_1" class="menuItem">Page #1</div>
   <div Id="menuItem2_2" class="menuItem">Page #2</div>
   <div Id="menuItem2_3" class="menuItem">Page #3</div>
</div>
<div Id="menu3" class="menu">
   <div Id="menuItem3_1" class="menuItem">Page #1</div>
   <div Id="menuItem3_2" class="menuItem">Page #2</div>
   <div Id="menuItem3_3" class="menuItem">Page #3</div>
   <div Id="menuItem3_4" class="menuItem" menu="menu5">SubMenu #4</div>
</div>
<div Id="menu4" class="menu">
   <div Id="menuItem4_1" class="menuItem">Page #1</div>
   <div Id="menuItem4_2" class="menuItem">Page #2</div>
   <div Id="menuItem4_3" class="menuItem">Page #3</div>
   <div Id="menuItem4_4" class="menuItem">Page #4</div>
</div>
<div id="menu5" class="menu">
    <div Id="menuItem5_1" class="menuItem">Page #4-1</div>
    <div Id="menuItem5_2" class="menuItem">Page #4-2</div>
    <div Id="menuItem5_3" class="menuItem">Page #4-3</div>
</div>
<div id="menu6" class="menu">
    <div Id="menuItem6_1" class="menuItem">Page #1-1</div>
    <div Id="menuItem6_2" class="menuItem">Page #1-2</div>
    <div Id="menuItem6_3" class="menuItem" menu="menu7">SubMenu #1-1</div>
</div>
<div id="menu7" class="menu">
    <div Id="menuItem7_1" class="menuItem">Page #1-1-1</div>
    <div Id="menuItem7_2" class="menuItem">Page #1-1-2</div>
    <div Id="menuItem7_3" class="menuItem">Page #1-1-3</div>
</div><!-- End of Menu -->
</html>

vrijdag 29 maart 2002 13:50

Acties:
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 29-08 19:47

Bosmonster

*zucht*

De menu's moeten toch overlappen? niet de items?

.menu moet je iig een z-index geven

vrijdag 29 maart 2002 13:59

Acties:
  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 21:08

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
Topicstarter
Op vrijdag 29 maart 2002 13:50 schreef Bosmonster het volgende:
De menu's moeten toch overlappen? niet de items?

.menu moet je iig een z-index geven
.menu een z index geven hielp niet. Even om duidelijk te zijn, dit is het probleem:

Afbeeldingslocatie: http://www.endoria.net/upload/?bekijk=1049983062

vrijdag 29 maart 2002 14:01

Acties:
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 29-08 19:47

Bosmonster

*zucht*

menu een z index geven hielp niet. Even om duidelijk te zijn, dit is het probleem:
Ow dat.. dat kun je wel vergeten want dat kan niet. select boxes zijn windowed controls en daar krijg je nooit een html-laag over heen (in internet explorer).

Tijd om je design op die beperking aan te passen dus.

Of wat je ook kan doen is die select's in een losse laag te zetten die je onzichtbaar makt zodra er een menu over heen valt.. maar die keuze is aan jou :P

vrijdag 29 maart 2002 14:04

Acties:
  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 21:08

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
Topicstarter
Op vrijdag 29 maart 2002 14:01 schreef Bosmonster het volgende:

[..]

Ow dat.. dat kun je wel vergeten want dat kan niet. select boxes zijn windowed controls en daar krijg je nooit een html-laag over heen (in internet explorer).

Tijd om je design op die beperking aan te passen dus.

Of wat je ook kan doen is die select's in een losse laag te zetten die je onzichtbaar makt zodra er een menu over heen valt.. maar die keuze is aan jou :P

Dan bij ItemMouseOver ;hide(HeaderMenu) :?

Zo heet dat ding wat in de weg zit ;)
Hmm, probeer ik eens creatief te zien, werkt internet explorer niet meer :P Maar goed, dat laatste vind ik een leuke oplossing. Can you tell me how :)

vrijdag 29 maart 2002 14:07

Acties:
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 29-08 19:47

Bosmonster

*zucht*

ligt er een beetje aan hoe je site is opgebouwd, hoe het script dat je nu gebruikt eruit ziet etc etc
Pagina: 1
Reageer