Toon posts:

[Dhtml/css] raar gedrag dropdown menu

Pagina: 1
Acties:

woensdag 17 november 2004 22:05

Acties:
  • Mach
  • Registratie: December 2002
  • Laatst online: 19-05 22:24

Mach

[END]Avengers

Topicstarter
Ik zit met de volgende uitdaging waar ik (met mijn beperkte kennis) niet uitkom. Ik probeer een pulldownmenu te maken. Gemakshalve heb ik via een dreamweaver template de volgende codes weten te isoleren. Ik weet het, maar goed gejat is beter dan slecht verzonnen :)


Met deze code werkt het menu zoals ik zou willen, doch zit er een Header in "Site-naam" die ik weg wil hebben.

test-3.htm

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="navigation.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 5;

//menu constructor
function menu(allitems,thisitem,startstate){ 
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem;  
  this.numberofmenuitems = 5;
  this.caller = document.getElementById(callname);
  this.thediv = document.getElementById(divname);
  this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
  for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.visibility="hidden";
  }
  theobj.thediv.style.visibility="visible";
}
                
function closesubnav(event){
  if ((event.clientY <48)||(event.clientY > 107)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.visibility='hidden';
    }
  }
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);"> 
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<div id="masthead"> 
 <h1 id="siteName">Site Name</h1> 
  <div id="globalNav"> 
      <div id="globalLink"> 
      <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Home</a>
      <a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Introductie</a>
      <a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Advies</a>
      <a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Informatie</a>
      <a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Contact</a>
    </div> 
    <!--end globalLinks--> 
     </div> 
  <!-- end globalNav --> 
    <div id="subglobal1" class="subglobalNav"> 
  </div> 
  
  <div id="subglobal2" class="subglobalNav"> 
  </div> 
  
  <div id="subglobal3" class="subglobalNav"> 
   <a href="#">Bestuursrecht algemeen</a> | <a href="#">Planschade</a> | <a href="#">Nadeelcompensatie</a> | <a href="#">Grondverwerving en Onteigening</a> |
  </div> 
  
  <div id="subglobal4" class="subglobalNav"> 
    <a href="#">Wet- en regelgeving</a> | <a href="#">Jurisprudentie</a> | <a href="#">Modellen</a> | <a href="#">Knowledgebase</a> | 
  </div> 
  <div align="center" class="subglobalNav" id="subglobal5"> 
    <a href="#">E-mail</a> | <a href="#">Telefax</a> | <a href="#">Telefoon</a> |
  </div> 
</div> 
<!-- end masthead --> 

<br> 
<script type="text/javascript">
    <!--
      var menuitem1 = new menu(7,1,"hidden");
            var menuitem2 = new menu(7,2,"hidden");
            var menuitem3 = new menu(7,3,"hidden");
            var menuitem4 = new menu(7,4,"hidden");
            var menuitem5 = new menu(7,5,"hidden");
            var menuitem6 = new menu(7,6,"hidden");
            var menuitem7 = new menu(7,7,"hidden");
    // -->
    </script> 

</body>
</html>


navigation.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
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

/* CSS Document */

body{
    font-family: Arial,sans-serif;
    color: #333333;
    line-height: 1.166; 
    margin: 0px;
    padding: 0px;
    background: #cccccc;
    
    }
    


/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 400px;
height: 50px;
color: #cccccc;
padding: 0px;
margin: 0px;
}

#globalNav img{
    margin-bottom: -4px;
 
}

#gnl {
    position: absolute;
    top: 0px;
    left:0px;
}

#gnr {
    position: absolute;
    top: 0px;
    right:0px;
}

#globalLink{
    position: absolute;
    top: 6px;
    height: 22px;
    min-width: 640px;
    padding: 0px;
    margin: 0px;
    left: 10px;
    z-index: 100;
}


a.glink, a.glink:visited{
    font-size: small;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    margin: 0px;
    padding: 2px 5px 4px 5px;
    border-right: 1px solid #8FB8BC;
}

a.glink:hover{
    text-decoration: none;
    color: #3333FF
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
    position: absolute;
    top: 80px;
    left: 0px;
    /*width: 100%;*/
    min-width: 400px;
    height: 20px;
    padding: 0px 0px 0px 10px;
    visibility: hidden;
    color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
    font-size: 80%;
    color: #ffffff;
    text-decoration: none;
}

.subglobalNav a:hover{
    color: #000000;
}



Haal ik nu echter de H1 weg, dan vermink ik meteen het menu, namelijk de sublinks komen dat niet of slechts heel even in beeld.

test-4.htm

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="navigation-1.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 5;

//menu constructor
function menu(allitems,thisitem,startstate){ 
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem;  
  this.numberofmenuitems = 5;
  this.caller = document.getElementById(callname);
  this.thediv = document.getElementById(divname);
  this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
  for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.visibility="hidden";
  }
  theobj.thediv.style.visibility="visible";
}
                
function closesubnav(event){
  if ((event.clientY <48)||(event.clientY > 107)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.visibility='hidden';
    }
  }
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);"> 
<div id="masthead"> 
  <div id="globalNav"> 
      <div id="globalLink"> 
      <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Home</a>
      <a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Introductie</a>
      <a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Advies</a>
      <a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Informatie</a>
      <a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Contact</a>
    </div> 
    <!--end globalLinks--> 
     </div> 
  <!-- end globalNav --> 
    <div id="subglobal1" class="subglobalNav"> 
  </div> 
  
  <div id="subglobal2" class="subglobalNav"> 
  </div> 
  
  <div id="subglobal3" class="subglobalNav"> 
   <a href="#">Bestuursrecht algemeen</a> | <a href="#">Planschade</a> | <a href="#">Nadeelcompensatie</a> | <a href="#">Grondverwerving en Onteigening</a> |
  </div> 
  
  <div id="subglobal4" class="subglobalNav"> 
    <a href="#">Wet- en regelgeving</a> | <a href="#">Jurisprudentie</a> | <a href="#">Modellen</a> | <a href="#">Knowledgebase</a> | 
  </div> 
  <div align="center" class="subglobalNav" id="subglobal5"> 
    <a href="#">E-mail</a> | <a href="#">Telefax</a> | <a href="#">Telefoon</a> |
  </div> 
</div> 
<!-- end masthead --> 

<br> 
<script type="text/javascript">
    <!--
      var menuitem1 = new menu(7,1,"hidden");
            var menuitem2 = new menu(7,2,"hidden");
            var menuitem3 = new menu(7,3,"hidden");
            var menuitem4 = new menu(7,4,"hidden");
            var menuitem5 = new menu(7,5,"hidden");
            var menuitem6 = new menu(7,6,"hidden");
            var menuitem7 = new menu(7,7,"hidden");
    // -->
    </script> 

</body>
</html>


navigation-1.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
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

/* CSS Document */

body{
    font-family: Arial,sans-serif;
    color: #333333;
    line-height: 1.166; 
    margin: 0px;
    padding: 0px;
    background: #cccccc;
    
    }
    


/************* globalNav styles ****************/

#globalNav{
position: absolute;
top: 8px;
left: 0px;
width: 100%;
min-width: 400px;
height: 50px;
color: #cccccc;
padding: 0px;
margin: 0px;
}

#globalNav img{
    margin-bottom: -4px;
 
}

#gnl {
    position: absolute;
    top: 0px;
    left:0px;
}

#gnr {
    position: absolute;
    top: 0px;
    right:0px;
}

#globalLink{
    position: absolute;
    top: 6px;
    height: 22px;
    min-width: 640px;
    padding: 0px;
    margin: 0px;
    left: 10px;
    z-index: 100;
}


a.glink, a.glink:visited{
    font-size: small;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    margin: 0px;
    padding: 2px 5px 4px 5px;
    
}

a.glink:hover{
    text-decoration: none;
    color: #3333FF
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
    position: absolute;
    top: 30px;
    left: 0px;
    /*width: 100%;*/
    min-width: 640px;
    height: 40px;
    padding: 0px 0px 0px 10px;
    visibility: hidden;
    color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
    font-size: 80%;
    color: #ffffff;
    text-decoration: none;
}

.subglobalNav a:hover{
    color: #000000;
}



Nu ben ik al uren aan het turen naar de code. Maar omdat ik slechts enigszins bedreven ben in html en css, en eigenlijk niet in javascript kan ik het probleem niet vinden. Ik realiseer mij dat ik door mijn enthousiaste knip-en-plakwerk de (toch al niet nette) dreamweavercode nog meer verminkt zal hebben, maar ik ben razend benieuwd naar wat ik nu over het hoofd zie!!

Help :)

DUGG

woensdag 17 november 2004 22:10

Acties:
  • PaulZ
  • Registratie: Augustus 2004
  • Laatst online: 21-05-2024

PaulZ

Heb je al eens geprobeerd om ipv de H1 regel weg te halen de tag H1 te vervangen door iets anders (P of div of ???).
Best kans dat de id 'SiteName' moet blijven bestaan.
code:
1

<p id="siteName">Site Name</p>

Vlinders moet je volgen, niet vangen...

woensdag 17 november 2004 22:21

Acties:
  • Mach
  • Registratie: December 2002
  • Laatst online: 19-05 22:24

Mach

[END]Avengers

Topicstarter
PaulZ schreef op woensdag 17 november 2004 @ 22:10:
Heb je al eens geprobeerd om ipv de H1 regel weg te halen de tag H1 te vervangen door iets anders (P of div of ???).
Best kans dat de id 'SiteName' moet blijven bestaan.
code:
1

<p id="siteName">Site Name</p>
Daar zit wat in. Het vreemde is echter dat zodra ik de positie van de 'menu-balk' verander, dezelfde fout weer opduikt (ook als ik "sitename" laat staan).

DUGG

woensdag 17 november 2004 22:23

Acties:
  • PaulZ
  • Registratie: Augustus 2004
  • Laatst online: 21-05-2024

PaulZ

Dat zou dan weer met de Y-positie van het menu te maken kunnen hebben (zie: event.clientY <48)||(event.clientY > 107)

Vlinders moet je volgen, niet vangen...

woensdag 17 november 2004 22:34

Acties:
  • Mach
  • Registratie: December 2002
  • Laatst online: 19-05 22:24

Mach

[END]Avengers

Topicstarter
PaulZ harstikke bedankt.

Ik heb de code als volgt aangepast:

code:
1
2
3
4
5

function closesubnav(event){
  if ((event.clientY <0)||(event.clientY >60)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.visibility='hidden';


en het werkt nu.

mucho gracias!!

[ Voor 9% gewijzigd door Mach op 17-11-2004 22:34 ]

DUGG

woensdag 17 november 2004 22:38

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

Je post alleen relevante code zie ik? In het vervolg of een url aanbieden of alleen relevante code, dit is moeilijk leesbaar :)

woensdag 17 november 2004 22:43

Acties:
  • Mach
  • Registratie: December 2002
  • Laatst online: 19-05 22:24

Mach

[END]Avengers

Topicstarter
André schreef op woensdag 17 november 2004 @ 22:38:
Je post alleen relevante code zie ik? In het vervolg of een url aanbieden of alleen relevante code, dit is moeilijk leesbaar :)
Sorry André, ik dacht met het posten van de relevante code voldoende info te verschaffen.

Ik had idd ook de bestanden ff kunnen hosten. Zal ik volgende keer maar doen dan :)

DUGG

Pagina: 1
Reageer