Virusscanner tips?
Code review
------------
Code (php)
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
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
#navBar{
background: #F4F4F4;
background: -moz-linear-gradient(top, #eaeaea 1%, #c6c6c6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#eaeaea), color-stop(100%,#c6c6c6));
background: -webkit-linear-gradient(top, #eaeaea 1%,#c6c6c6 100%);
background: -o-linear-gradient(top, #eaeaea 1%,#c6c6c6 100%);
background: -ms-linear-gradient(top, #eaeaea 1%,#c6c6c6 100%);
background: linear-gradient(top bottom, #eaeaea 1%,#c6c6c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#c6c6c6',GradientType=0 );
box-shadow: 0 1px 1px 0px black;
height: 55px;
}
#navBar li{
padding: 6px;
list-style: none;
float: left;
font-size: 18px;
position: relative;
margin-top: 13px;
}
#navBar ul li a{
cursor: pointer;
text-decoration: none;
font-size: 18px;
height: 30px;
display: block;
margin-left: 10px;
}
#navBar ul li a:hover{
color: #D21E39;
}
#navBar ul ul{
top: 43px;
left: 18px;
padding-bottom: 10px;
position: absolute;
visibility: hidden;
background: -moz-linear-gradient(top, #eaeaea 1%, #c6c6c6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#eaeaea), color-stop(100%,#c6c6c6));
background: -webkit-linear-gradient(top, #c6c6c6 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #c6c6c6 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #c6c6c6 1%,#eaeaea 100%);
background: linear-gradient(top bottom, #eaeaea 1%,#c6c6c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#c6c6c6',GradientType=0 );
box-shadow: 0px 1px 1px 1px black;
}
#navBar ul ul li{
border-bottom: 1px solid #A8A8A8;
width: 92.5%;
}
#navBar ul ul li:last-child{
border: none;
}
#navBar ul ul li a {
padding: 5px 15px;
}
#navBar ul li:hover ul{
visibility: visible;
}
background: #F4F4F4;
background: -moz-linear-gradient(top, #eaeaea 1%, #c6c6c6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#eaeaea), color-stop(100%,#c6c6c6));
background: -webkit-linear-gradient(top, #eaeaea 1%,#c6c6c6 100%);
background: -o-linear-gradient(top, #eaeaea 1%,#c6c6c6 100%);
background: -ms-linear-gradient(top, #eaeaea 1%,#c6c6c6 100%);
background: linear-gradient(top bottom, #eaeaea 1%,#c6c6c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#c6c6c6',GradientType=0 );
box-shadow: 0 1px 1px 0px black;
height: 55px;
}
#navBar li{
padding: 6px;
list-style: none;
float: left;
font-size: 18px;
position: relative;
margin-top: 13px;
}
#navBar ul li a{
cursor: pointer;
text-decoration: none;
font-size: 18px;
height: 30px;
display: block;
margin-left: 10px;
}
#navBar ul li a:hover{
color: #D21E39;
}
#navBar ul ul{
top: 43px;
left: 18px;
padding-bottom: 10px;
position: absolute;
visibility: hidden;
background: -moz-linear-gradient(top, #eaeaea 1%, #c6c6c6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#eaeaea), color-stop(100%,#c6c6c6));
background: -webkit-linear-gradient(top, #c6c6c6 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #c6c6c6 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #c6c6c6 1%,#eaeaea 100%);
background: linear-gradient(top bottom, #eaeaea 1%,#c6c6c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#c6c6c6',GradientType=0 );
box-shadow: 0px 1px 1px 1px black;
}
#navBar ul ul li{
border-bottom: 1px solid #A8A8A8;
width: 92.5%;
}
#navBar ul ul li:last-child{
border: none;
}
#navBar ul ul li a {
padding: 5px 15px;
}
#navBar ul li:hover ul{
visibility: visible;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id = "navBar">
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">Cursussen</a>
<ul>
<li><a href = "#">EHBO</a></li>
<li><a href = "##">KinderEHBO</a></li>
<li><a>BHV</a></li>
<li><a>Reanimatie</a></li>
<li><a>Verbandleer</a></li>
<li><a>Kleine ongevallen</a></li>
</ul>
</li>
<li><a>Aanvragen</a></li>
<li><a>Over Ons</a></li>
<li><a>Contact</a></li>
</ul>
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">Cursussen</a>
<ul>
<li><a href = "#">EHBO</a></li>
<li><a href = "##">KinderEHBO</a></li>
<li><a>BHV</a></li>
<li><a>Reanimatie</a></li>
<li><a>Verbandleer</a></li>
<li><a>Kleine ongevallen</a></li>
</ul>
</li>
<li><a>Aanvragen</a></li>
<li><a>Over Ons</a></li>
<li><a>Contact</a></li>
</ul>
http://codepen.io/anon/pen/gjGlk
Enkele wijzigingen:
- breedte niet aan de LI geven, maar aan de A daarin. Dan blijft alles klikbaar
- niet te veel MARGIN gebruiken. Gebruik liever de (interne) PADDING
- geef ook een MIN-WIDTH op bij je submenu.
- tussenlijntjes geven duidelijke aan wat het klikbare gebied is. Dat kan doordat je de A centraal stelt, niet de LI.