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
|
@@--
@@-- This template implements pure CSS menus.
@@-- These menus require no javascript. However, they are displayed as soon as
@@-- the mouse is over a menu item.
@@--
@@-- This template has been tested on Opera 7 and Firefox 1.0.
@@-- It doesn't work with Internet Explorer 6
@@--
@@-- To use this template, you must do the following in your HTML file:
@@-- * Include this template in the header (between <head> and </head>).
@@-- This is done with an instruction like:
@@--
@@-- @@INCLUDE@@ menu.tcss 1=>menuClass 2=>submenuClass
@@--
@@-- where the parameters are used below
@@--
@@-- * Optional parameters:
@@--
@@-- $3 - Main menu-bar background color
@@-- $4 - Background color of the submenus
@@-- $5 - Background color of the selected menu entry
@@-- $6 - The menu text color
@@-- $7 - The selected menu text color
@@--
@@-- * Create a <ul> list in the body of your document, that describes the
@@-- menu. This list should be put in a <div> with the appropriate id
@@-- attribute.
@@--
@@-- <div class="menuClass">
@@-- <ul>
@@-- <li><h2>Menu1</h2>
@@-- <ul>
@@-- <li><a href="...">Submenu1</a></li>
@@-- <li><a href="..." class="submenuClass">Submenu2</a></li>
@@-- <ul>
@@-- <li><a href="...">SubSubmenu1</a></li>
@@-- <li><a href="...">SubSubmenu1</a></li>
@@-- </ul>
@@-- </li>
@@-- </ul>
@@-- </li>
@@-- </ul>
@@--
@@-- <ul>
@@-- <li><h2>Menu2</h2>
@@-- ....
@@--
@@-- Note that for submenus, the <a> element should have a specific class
@@-- for proper rendering.
@@--
@@-- These menus will degrade properly on browsers that do not implement style
@@-- sheets, and will simply show a list instead
@@--
@@-- $Id: menu.tcss,v 1.3 2004/12/23 14:47:07 obry Exp $
@@SET@@ MAIN_BG_COLOR = $3 | #aaa
@@SET@@ BG_COLOR = $4 | #ccc
@@SET@@ SELECTED_BG_COLOR = $5 | #ddd
@@SET@@ TEXT_COLOR = $6 | black
@@SET@@ SELECTED_TEXT_COLOR = $7 | black
<style>
.@_$1_@ { width:100%;
float:left; }
.@_$1_@ a, .@_$1_@ h2 { display:block;
font:bold 0.7em/1.4em arial,helvetica,sans-serif;
border-width:0.1em;
border-style:solid;
border-color:@_BG_COLOR_@ #888 #555 #bbb;
white-space:nowrap;
text-indent:3px;
margin:0;
padding:1px 0px; }
.@_$1_@ a { background:@_BG_COLOR_@;
text-decoration:none; width:100%; }
.@_$1_@ a,
.@_$1_@ a:visited { color:@_TEXT_COLOR_@; }
.@_$1_@ a:hover { color:@_SELECTED_TEXT_COLOR_@;
background:@_SELECTED_BG_COLOR_@; }
.@_$1_@ a:active { color:@_SELECTED_BG_COLOR_@; background:@_BG_COLOR_@; }
.@_$1_@ ul { margin:0; padding:0;
position: relative;
list-style:none; float:left; width: 6.9em; }
.@_$1_@ li:hover { cursor:pointer; position:relative; }
.@_$1_@ ul ul { position:absolute; top:auto; display:none; }
.@_$1_@ ul ul ul { top:0; left:7.05em; }
.@_$1_@ li:hover ul ul,
.@_$1_@ li li:hover ul ul,
.@_$1_@ li li li:hover ul ul,
.@_$1_@ li li li li:hover ul ul {display:none;}
.@_$1_@ li:hover ul,
.@_$1_@ li li:hover ul,
.@_$1_@ li li li:hover ul,
.@_$1_@ li li li li:hover ul {display:block;}
.@_$1_@ h2 { color: black;
background:@_MAIN_BG_COLOR_@ url('/we_icons/arrow.png')
no-repeat bottom right;
text-transform:uppercase;
margin:0;
width:100%; }
.@_$1_@ li { background: @_BG_COLOR_@; }
.@_$1_@ .@_$2_@ { background: url('/we_icons/arrow.png')
no-repeat bottom right;}
</style>
|
