source: Dev/trunk/positiontest.html @ 220

Last change on this file since 220 was 220, checked in by tschipper, 13 years ago

Nieuwe implementatie van dropdown menus. Voorbeeld staat in positiontest.html, maar alle code staat in generalScripts.js, dus kan op alle pagina's gebruikt worden.
File size: 3.9 KB
Line 
1<!DOCTYPE html>
2<html>
3    <head>
4        <title></title>
5        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6        <script type='text/javascript' src="js/generalScripts.js"></script>
7        <script type='text/javascript'>
8            debugger;
9            var ddMenu = new DDMenu();
10            var fn = function() {
11                ddMenu.Init("creationMenu", "btnAddMenu");
12            }
13            window.onload = fn;
14        </script>
15        <style type="text/css">
16            body {
17                margin: 0;
18                padding: 0;
19            }
20           
21            #btnAddMenu {
22                margin: 0;
23                padding: 5px;
24                background: #5970B2;
25                font: bold 16px arial;
26                color: #FFF;
27            }
28           
29            #btnAddMenu.down {
30                background: #334167;
31            }
32           
33            #creationMenu {
34                margin: 0;
35                padding: 0;
36                z-index: 30;
37                visibility: hidden;
38            }
39           
40            #creationMenu li {
41                margin: 0;
42                padding: 0;
43                list-style: none;
44                float: left;
45                clear: left;
46                font: bold 11px arial;
47            }
48           
49            #creationMenu li a {
50                display: block;
51                margin: 0 1px 0 0;
52                padding: 4px 10px;
53                width: 100px;
54                background: #5970B2;
55                color: #FFF;
56                text-align: center;
57                text-decoration: none;
58            }
59           
60            #creationMenu li a:hover {
61                background: #49A3FF;
62            }
63           
64            #creationMenu div {
65                position: absolute;
66                visibility: hidden;
67                margin: 0;
68                padding: 0;
69                background: #eaebd8;
70                border: 1px solid #5970B2;
71            }
72           
73            #creationMenu div a{
74                position: relative;
75                float: left;
76                display: block;
77                clear: left;
78                margin: 0;
79                padding: 5px 10px 5px 10px;
80                width: 75px;
81                white-space: nowrap;
82                text-align: left;
83                text-decoration: none;
84                background: #eaebd8;
85                color: #2875DE;
86                font: 11px arial;
87            }
88           
89            #creationMenu div a:hover {
90                background: #49a3ff;
91                color: #fff;
92            }
93        </style>
94    </head>
95    <body id="BODY">
96
97        <input type="button" value="Add" id="btnAddMenu" onclick="ddMenu.Show()" />
98        <ul id="creationMenu">
99            <li>
100                <a href="#" onmouseover="ddMenu.Open('creationMenu_m1')" onmouseout="ddMenu.SetCloseTimer()">Survey</a>
101                <div id="creationMenu_m1" onmouseover="ddMenu.CancelCloseTimer()" onmouseout="ddMenu.SetCloseTimer()">
102                    <a href="#">+ Add new</a>
103                    <a href="#">> Add existing</a>
104                </div>
105            </li>
106            <li>
107                <a href="#" onmouseover="ddMenu.Open('creationMenu_m2')" onmouseout="ddMenu.SetCloseTimer()">Application</a>
108                <div id="creationMenu_m2" onmouseover="ddMenu.CancelCloseTimer()" onmouseout="ddMenu.SetCloseTimer()">
109                    <a href="#">+ Add new</a>
110                    <a href="#">> Add existing</a>
111                </div>
112            </li>
113            <li>
114                <a href="#" onmouseover="ddMenu.Open('creationMenu_m3')" onmouseout="ddMenu.SetCloseTimer()">Dashboard</a>
115                <div id="creationMenu_m3" onmouseover="ddMenu.CancelCloseTimer()" onmouseout="ddMenu.SetCloseTimer()">
116                    <a href="#">+ Add new</a>
117                    <a href="#">> Add existing</a>
118                </div>
119            </li>
120        </ul>
121    </body>
122</html>
Note: See TracBrowser for help on using the repository browser.