Om te beginnen, ik ben hier een hele tijd niet meer geweest. Heb wel de policy gelezen en schop er volgens mij niemand tegen de schenen met het posten van dit topic. Als ik dat wel doe, mijn excuus.
Goed, dat heb ik overleefd
De reden dat ik dit topic open is om eens lekker te discusieren over DHTML uitklap menu's. Ondanks dat ik er tot nu toe weinig gebruik van heb gemaakt zie ik er wel degelijk nut in.
Het probleem echter bij veel menu's vind ik de grote hoeveelheid overbodige code (overhead), de onhandige mogelijkheden tot positioneren, traagheid, slecht doorzoekbaar, etc.
Nu ben ik zelf eens aan het bouwen gegaan met hetvolgende doel voor ogen:
Goed doorzoekbaar
Simpelweg DIV's met link's daarin. Geen javascript hierarchie, of 'onclick' events, gewoon keiharde oudhollandse links.
Zo min mogelijk overhead
Tja, wat valt er te vertellen over een menu wat 3x zo klein is als een gemiddeld DHTML menu? 26 regels javascript, eigenlijk maar 5 regels verplichte CSS, de rest puur vrij te besteden aan vormgeving.
Inbouwen is redelijk eenvoudig, eventueel aan de hand van de positie nog een paar kleine aanpassingen doen, that's it.
Ook een voordeel is dat het menu niet geinitieerd hoeft te worden.
Snel
Menu werkt soepel, geen overbodige functies, geen memory leaks, getest op het dubbel aanroepen van functie's, geen vollopende variabelen, simpele en heldere code. In te stellen tijd voor het sluiten van het menu.
Compatability
Ik heb helaas zelf alleen kunnen testen op IE6, FF1 en Opera 8.51 onder Windows. Hier op werkt het menu iig vlekkeloos. Hier valt niet heel veel uit op te maken, maar dit zijn mijn inziens wel de meest gebruikte browsers onder windows. Ik zou het menu graag nog op de Mac testen, maar heb hier helaas geen mogelijkheden toe.
Verder is ook nergens in het menu browser-sniffing toegepast.
Multi-depth
Dit punt is aardig goed gelukt. De structuur valt eventueel in 1 query uit te lezen met oneindige diepte. In praktijk blijkt de grootte van het browser venster de enige beperking.
Leesbaarheid code
4 simpele functies, 2 tracking variabelen, that's about it. Maarja, in amper 1kb aan JS kun je amper verdwaald raken ;-)
Goed, het moge duidelijk zijn dat ik enthousiast ben over m'n eigen menu. Maar goed, ik ben ook maar iemand die met een enthousiast idee is gaan bouwen. Misschien zie ik ook wel dingen over het hoofd.
Uit ervaring weet ik dat als je om een beoordeling vraagt je voornamelijk kritiek krijgt. Ik ben daarom ook benieuwd naar de kritieken. Tips zijn uiteraard ook welkom.
Hieronder zal ik een simpele voorbeeld code plakken van het menu:
Sorry voor het ontbreken van DTD e.d.
Hieronder een simpele code om via 1 query het menu uit een DB te lezen.
De enige truc hierbij is is een tabel gebruiken met een id en een pid (parent id). Het parent id geeft aan onder welk menu het menu moet uitklappen en uiteraard een 0 voor een 'main'-menu.
Ik hoop dat hier mensen toevallig nog mee geholpen zijn of dat iemand nog goede tips heeft, of mij eventueel kan vertellen of het menu ook op andere browsers/platformen werkt.
BVD
Goed, dat heb ik overleefd
De reden dat ik dit topic open is om eens lekker te discusieren over DHTML uitklap menu's. Ondanks dat ik er tot nu toe weinig gebruik van heb gemaakt zie ik er wel degelijk nut in.
Het probleem echter bij veel menu's vind ik de grote hoeveelheid overbodige code (overhead), de onhandige mogelijkheden tot positioneren, traagheid, slecht doorzoekbaar, etc.
Nu ben ik zelf eens aan het bouwen gegaan met hetvolgende doel voor ogen:
- goed doorzoekbaar
- zo min mogelijk overhead
- snel
- moet compatible zijn met de meest gebruikte browsers
- moet oneindig diep kunnen gaan zonder aanpassing per diepte
- leesbare code
Goed doorzoekbaar
Simpelweg DIV's met link's daarin. Geen javascript hierarchie, of 'onclick' events, gewoon keiharde oudhollandse links.
Zo min mogelijk overhead
Tja, wat valt er te vertellen over een menu wat 3x zo klein is als een gemiddeld DHTML menu? 26 regels javascript, eigenlijk maar 5 regels verplichte CSS, de rest puur vrij te besteden aan vormgeving.
Inbouwen is redelijk eenvoudig, eventueel aan de hand van de positie nog een paar kleine aanpassingen doen, that's it.
Ook een voordeel is dat het menu niet geinitieerd hoeft te worden.
Snel
Menu werkt soepel, geen overbodige functies, geen memory leaks, getest op het dubbel aanroepen van functie's, geen vollopende variabelen, simpele en heldere code. In te stellen tijd voor het sluiten van het menu.
Compatability
Ik heb helaas zelf alleen kunnen testen op IE6, FF1 en Opera 8.51 onder Windows. Hier op werkt het menu iig vlekkeloos. Hier valt niet heel veel uit op te maken, maar dit zijn mijn inziens wel de meest gebruikte browsers onder windows. Ik zou het menu graag nog op de Mac testen, maar heb hier helaas geen mogelijkheden toe.
Verder is ook nergens in het menu browser-sniffing toegepast.
Multi-depth
Dit punt is aardig goed gelukt. De structuur valt eventueel in 1 query uit te lezen met oneindige diepte. In praktijk blijkt de grootte van het browser venster de enige beperking.
Leesbaarheid code
4 simpele functies, 2 tracking variabelen, that's about it. Maarja, in amper 1kb aan JS kun je amper verdwaald raken ;-)
Goed, het moge duidelijk zijn dat ik enthousiast ben over m'n eigen menu. Maar goed, ik ben ook maar iemand die met een enthousiast idee is gaan bouwen. Misschien zie ik ook wel dingen over het hoofd.
Uit ervaring weet ik dat als je om een beoordeling vraagt je voornamelijk kritiek krijgt. Ik ben daarom ook benieuwd naar de kritieken. Tips zijn uiteraard ook welkom.
Hieronder zal ik een simpele voorbeeld code plakken van het menu:
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
| <html>
<head>
<style type="text/css">
body {
font-family: Arial;
}
.menu {
font-size: 8pt;
}
.menu a {
color: #FFFFFF;
text-decoration: none;
}
.menu .main {
background-color: #FF0000;
border: 1px solid #000000;
padding: 2px;
}
.menu .main a {
padding-right: 20px;
}
.menu .main .active {
color: #000000;
}
.menu .sub {
background-color: #FF0000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
display: none;
position: absolute;
}
.menu .sub a {
border-top: 1px solid #000000;
display: block;
padding: 1px;
padding-left: 3px;
width: 100px;
}
.menu .sub .active {
background-color: #DD0000;
}
</style>
</head>
<script type="text/javascript">
var active = new Array();
var interval = false;
var visible = new Array();
function Over(obj,sub,main){
Hide(obj.parentNode.depth === undefined ? obj.parentNode.depth = visible.length : obj.parentNode.depth);
obj.className = "active";
active.push(obj);
if (sub){
visible.push(sub = document.getElementById("sub" + sub));
sub.style.left = main ? obj.offsetLeft - 3 : parseInt (obj.parentNode.style.left) + obj.offsetWidth + 1;
sub.style.top = main ? obj.offsetTop + obj.offsetHeight + 2 : parseInt (obj.parentNode.style.top) + obj.offsetTop;
sub.style.display = "block";
}
}
function Keep(){
if (interval){
clearInterval (interval);
interval = false;
}
}
function Close(depth){
if (visible.length) interval = setTimeout ("Hide(0)",300);
}
function Hide(depth){
while (active.length > depth) active.pop().className = "";
while (visible.length > depth) visible.pop().style.display = "none";
}
</script>
<body>
<div class="menu" onmouseover="Keep()" onmouseout="Close()" nowrap>
<div class="main"><a href="Main 1" onmouseover="Over(this,1,true)">Main 1</a><a href="Main 2" onmouseover="Over(this,2,true)">Main 2</a><a href="Main 3" onmouseover="Over(this,3,true)">Main 3</a></div>
<div class="sub" id="sub1"><a href="Sub 1" onmouseover="Over(this)">Sub 1</a><a href="Sub 2" onmouseover="Over(this)">Sub 2</a><a href="Sub 3" onmouseover="Over(this)">Sub 3</a></div>
<div class="sub" id="sub2"><a href="Sub 1" onmouseover="Over(this)">Sub 1</a><a href="Sub 2" onmouseover="Over(this,8)">Sub 2</a><a href="Sub 3" onmouseover="Over(this)">Sub 3</a><a href="Sub 4" onmouseover="Over(this)">Sub 4</a></div>
<div class="sub" id="sub3"><a href="Sub 1" onmouseover="Over(this)">Sub 1</a><a href="Sub 2" onmouseover="Over(this)">Sub 2</a></div>
<div class="sub" id="sub8"><a href="Sub 1" onmouseover="Over(this)">Sub 1</a><a href="Sub 2" onmouseover="Over(this,14)">Sub 2</a></div>
<div class="sub" id="sub14"><a href="Sub 1" onmouseover="Over(this)">Sub 1</a><a href="Sub 2" onmouseover="Over(this,16)">Sub 2</a></div>
<div class="sub" id="sub16"><a href="Sub 1" onmouseover="Over(this)">Sub 1</a><a href="Sub 2" onmouseover="Over(this)">Sub 2</a></div>
</div>
</body>
</html> |
Sorry voor het ontbreken van DTD e.d.
Hieronder een simpele code om via 1 query het menu uit een DB te lezen.
De enige truc hierbij is is een tabel gebruiken met een id en een pid (parent id). Het parent id geeft aan onder welk menu het menu moet uitklappen en uiteraard een 0 voor een 'main'-menu.
code:
1
2
3
4
5
6
7
8
9
10
11
| <div class="menu" onmouseover="Keep()" onmouseout="Close()" nowrap>
<?
$result = mysql_query ("SELECT id,pid,naam FROM menu");
while ($row = mysql_fetch_assoc ($result)) $items[$row["pid"]][$row["id"]] = $row["naam"];
while (list ($pid,$item) = each ($items)){
echo "<div class=\"" . ($pid ? "sub\" id=\"sub$pid" : "main") . "\">";
while (list ($id,$naam) = each ($item)) echo "<a href=\"$naam\" onmouseover=\"Over(this" . (isset ($items[$id]) ? ",$id" : ($pid ? "" : ",false")) . ($pid ? "" : ",true") . ")\">$naam</a>";
echo "</div>\r\n";
}
?>
</div> |
Ik hoop dat hier mensen toevallig nog mee geholpen zijn of dat iemand nog goede tips heeft, of mij eventueel kan vertellen of het menu ook op andere browsers/platformen werkt.
BVD
:strip_exif()/u/50656/andre-scholten-avatar.gif?f=community){kind=avatar}
:strip_exif()/u/87035/li.gif?f=community)
/u/5360/crop65d3c045ca48f_cropped.png?f=community)
:strip_exif()/u/13818/episodebutler_60x60.gif?f=community)
. Even kort door de bocht kun je precies hetzelfde maken met een simpele show/hide layer en dat is toch niet hoe je een menu in elkaar wilt zetten.
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
/u/4739/logo-clean-icon.png?f=community){kind=icon}