dropdown menu + div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pieter M

Pieter M

06/10/2010 14:07:48
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<HTML>
<HEAD>
<link HREF="Dropdown_extra2.css" REL="stylesheet" TYPE="text/css">
    </HEAD>
    
    <BODY BACKGROUND="background_main.jpg">
                     <div class="menublock" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
                              <a class="tl"><img src="home.jpg" width="100%"></a>
                              <div class="subs">
                                          <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/sitemap.html" TARGET="mainscreen">sitemap</a>
                                         </MTCategories>
                             </div>
                     </div>
                    
                     <div class="menublock" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
                              <a class="tl"><img src="/~groep3zoetermeer/I/iconinformatica.jpg" width="100%"></a>
                              <div class="subs">
                                    
                                     <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/I/ialgemeen.html" TARGET="mainscreen">Algemeen</a>
                                     </MTCategories>                                    
                                     <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/I/iopleiding.html" TARGET="mainscreen">Opleiding</a>
                                     </MTCategories>                                    
                                     <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/I/itoekomst.html" TARGET="mainscreen">Toekomst</a>
                                     </MTCategories>
                                    
                              </div>
                     </div>
                    
                     <div class="menublock" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
                              <a class="tl"><img src="/~groep3zoetermeer/BI/iconbi.jpg" width="100%"></a>
                            
                              <div class="subs">
                            
                                          <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/BI/bialgemeen.html" TARGET="mainscreen">Algemeen</a>
                                     </MTCategories>                                    
                                     <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/BI/biopleiding.html" TARGET="mainscreen">Opleiding</a>
                                     </MTCategories>                                    
                                     <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/BI/bitoekomst.html" TARGET="mainscreen">Toekomst</a>
                                     </MTCategories>
                                        
                             </div>
                     </div>
                    
                     <div class="menublock" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
                              <a class="tl"><img src="/~groep3zoetermeer/ISM/iconism.jpg" width="100%"></a>
                            
                              <div class="subs">
                            
                                      <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/ISM/ismalgemeen.html" TARGET="mainscreen">Algemeen</a>
                                     </MTCategories>                                    
                                     <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/ISM/ismopleiding.html" TARGET="mainscreen">Opleiding</a>
                                     </MTCategories>                                    
                                     <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/ISM/ismtoekomst.html" TARGET="mainscreen">Toekomst</a>
                                     </MTCategories>
                                        
                             </div>
                     </div>
                    
                     <div class="menublock" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
                              <a class="tl"><img src="/~groep3zoetermeer/school_zmeer/school.jpg" width="100%"></a>
                            
                              <div class="subs">
                            
                                      <MTCategories>
                                                                 <a class="sl" href="Demo.html" TARGET="mainscreen">Algemeen</a>
                                     </MTCategories>                                    
                                     <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/school_zmeer/majorminor.html" TARGET="mainscreen">Major/minor</a>
                                     </MTCategories>                                    
                                     <MTCategories>
                                                                 <a class="sl" href="Demo.html" TARGET="mainscreen">Verschillen</a>
                                     </MTCategories>
                                        
                             </div>
                     </div>
                    
                     <div class="menublock" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
                              <a class="tl"><img src="/~groep3zoetermeer/school_zmeer/zoetermeer.jpg" width="100%"></a>
                            
                              <div class="subs">
                            
                                      <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/school_zmeer/algemeenz.html" TARGET="mainscreen">Algemeen</a>
                                     </MTCategories>                                    
                                     <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/school_zmeer/uitgaanz.html" TARGET="mainscreen">Uitgaan</a>
                                     </MTCategories>                                    
                                     <MTCategories>
                                                                 <a class="sl" href="/~groep3zoetermeer/school_zmeer/sportz.html" TARGET="mainscreen">Sport</a>
                                     </MTCategories>
                                        
                             </div>
                     </div>
                    
                     <div class="menublock" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
                              <a class="tl"><img src="/~groep3zoetermeer/stage/marktplaats.jpg" width="100%"></a>
                            
                              <div class="subs">
                            
                                          <MTCategories>
                                                                     <a class="sl" href="/~groep3zoetermeer/stage/bedrijfofstudent.html" TARGET="mainscreen">Registreer</a>
                                          </MTCategories>                            
                                          <MTCategories>
                                                                     <a class="sl" href="/~groep3zoetermeer/stage/log.html" TARGET="mainscreen">Log in</a>
                                          </MTCategories>                            
                                          <MTCategories>
                                                                     <a class="sl" href="/~groep3zoetermeer/stage/plaatsing.html" TARGET="mainscreen">Plaats een opdracht</a>
                                          </MTCategories>                            
                                          <MTCategories>
                                                                     <a class="sl" href="/~groep3zoetermeer/stage/zoeken.html" TARGET="mainscreen">Vind een opdracht</a>
                                          </MTCategories>
                                        
                             </div>
                     </div>

<DIV class="borderdiv" STYLE="width: 900px; height: 450px; position: absolute; top: 39px; left: 0px;>

    <?php
        include('mainscreen.php');
    ?>
</DIV>
</BODY>
</HTML>



CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
#menubox{
margin: 1px;
height: 23px;
z-index: 9;
width: 1024px;
}

#menucont {
color: #069;
background-color : transparent;
position: absolute;
z-index: 2;
width: 1024px;
}

.menublock, .display {
float:left;
width:14%;
background-color: #036;
}

.subs{
background-color: #036;
}

.subs a{
display: block;
}

.menublock .subs{
display: none;
}

#menucont a.tl, #menucont a.tl:hover, #menucont a.tl:active, #menucont a.sl, #menucont a.sl:hover, #menucont a.sl:active {
font-family: "lucida grande", "Lucida Sans Unicode", verdana, sans-serif;
font-size: 10px;line-height: 17px;
display: block;
text-decoration: none;
color: #fff;
background-color: #069;
margin: 1px 1px 1px 1px;
padding: 2px 2px 2px 2px;
order: none;
text-align: center;
font-weight: normal;
}

#menucont a.tl:hover, #menucont a.tl:active , #menucont a.sl:hover, #menucont a.sl:active{
background-color: #036;
text-align: center;
}

#menucont a.sl, #menucont a.sl:hover, #menucont a.sl:active{
text-align: left;
}



Hoe zorg ik er voor dat het dropdown menu niet wegvalt als ik met mijn muis over de div ga?
(site waar het over gaat: http://eduweb.hhs.nl/~groep3zoetermeer/divs/index.php )

Graag in het vervolg bij code, [code] [/code] tags gebruiken. Tevens heb ik je andere topic gesloten (dubbele post).[/modedit]
Gewijzigd op 06/10/2010 15:16:08 door Pieter M
 
PHP hulp

PHP hulp

22/12/2024 10:21:41
 
Teun Hesseling

Teun Hesseling

06/10/2010 14:08:23
Quote Anchor link
<dubbele post>
 
Pieter M

Pieter M

06/10/2010 14:34:36
Quote Anchor link
weet ik, eerste was verkeerd geplaatst

Toevoeging op 06/10/2010 15:04:05:

ik zou wat hulp kunnen gebruiken
Gewijzigd op 06/10/2010 15:04:39 door Pieter M
 
Joakim Broden

Joakim Broden

06/10/2010 15:08:48
Quote Anchor link
Pieter M op 06/10/2010 14:34:36:
weet ik, eerste was verkeerd geplaatst


Oh dus open je even nog een topic?

Plaats je code tussen de [.code] [./code] tags (zonder . natuurlijk...)

1) Geen menu opbouw met divs (gebruik li hiervoor)
2) Gebruik geen javascript voor menu's
3) Leer eerst normaal xhtml

en een voorbeeld van een dropdown menu zonder js

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
        <ul>
            <li><a href="#">Item 2.1</a><li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
<ul>

?>


en dan laat je met li:hover het submenu zien..
 
Pieter M

Pieter M

06/10/2010 15:12:46
Quote Anchor link
Dat doet het NIET op IE, en dat MOET... (we hadden dat eerst)
en dit werkt ook als drop down menu alleen niet in samenwerking met een div (Die van mainscreen.php). en die MOET ik gebruiken.

en er zit geen javascript in het menu

en ik wil weten hoe ik het kan fixen, en niet hoe het anders kan
 
Synaps Framework

Synaps Framework

06/10/2010 15:14:41
Quote Anchor link
Je kunt best Javascript gebruiken voor een menu om dingen onzichtbaar te maken bijvoorbeeld. Echter, om het te optimaliseren voor SEO is de opbouw via <ul> en <li> het beste.
 
Joakim Broden

Joakim Broden

06/10/2010 15:25:21
Quote Anchor link
Pieter M op 06/10/2010 15:12:46:
Dat doet het NIET op IE, en dat MOET... (we hadden dat eerst)
en dit werkt ook als drop down menu alleen niet in samenwerking met een div (Die van mainscreen.php). en die MOET ik gebruiken.

en er zit geen javascript in het menu

en ik wil weten hoe ik het kan fixen, en niet hoe het anders kan


Pieter.. Wat is dit dan? onmouseover="this.className='display'" onmouseout="this.className='menublock'"

Ja klopt dat is javascript!

En mijn code werkt wel in IE 7+ als je het ook in die strond IE 6 wilt hebben moet je even zoeken op csshover.htc

Toevoeging op 06/10/2010 15:26:19:

Synaps Framework op 06/10/2010 15:14:41:
Je kunt best Javascript gebruiken voor een menu om dingen onzichtbaar te maken bijvoorbeeld. Echter, om het te optimaliseren voor SEO is de opbouw via <ul> en <li> het beste.


Waarom het beste met Javascript als het met CSS kan? Mensen zonder javascript zien geen submenu dan...
 
Pieter M

Pieter M

06/10/2010 15:28:09
Quote Anchor link
Niet om vervelend te doen of zo, maar ik wil graag op die manier mijn drop down hebben, en ik vraag of DAAR een oplossing voor is
 
Joakim Broden

Joakim Broden

06/10/2010 16:08:24
Quote Anchor link
Pieter M op 06/10/2010 15:28:09:
Niet om vervelend te doen of zo, maar ik wil graag op die manier mijn drop down hebben, en ik vraag of DAAR een oplossing voor is


*denkt 'eigenwijs stuk ******'*

En ja er is een oplossing voor maar als je toch geen advies wilt ga ik hem ook niet geven :) Misschien is iemand anders aardig genoeg om je verder te helpen
 
Synaps Framework

Synaps Framework

06/10/2010 16:26:43
Quote Anchor link
Oetzie en mijn achternaam op 06/10/2010 15:25:21:
Synaps Framework op 06/10/2010 15:14:41:
Je kunt best Javascript gebruiken voor een menu om dingen onzichtbaar te maken bijvoorbeeld. Echter, om het te optimaliseren voor SEO is de opbouw via <ul> en <li> het beste.

Waarom het beste met Javascript als het met CSS kan? Mensen zonder javascript zien geen submenu dan...


Dat was een reactie op de reactie er boven dat javascript ten boze is in een menu structuur.

Waarom je website maken als het met asp.net kan. Tsjah.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.