|
02.11.2005, 08:32
#33356525
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
вот примерчик классный
ровно вчера с ним столкнулся
был приятно удивлен
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.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i= 0 ; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
.font1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
}
.а1 {
font-size: 50px;
color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
}
.a2 {
font-style: 15 ;
color: #FFFFFF;
font-weight: bold;
}
.bord {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 2px;
border-left-width: 0px;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
color: #FFFFFF;
}
.bord2 {
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-color: #FFFFFF;
}
.mebetektop {
font-family: "Courier New", Courier, mono;
color: # 999999 ;
font-size: 16px;
}
#nav, #nav ul { /*навигационная строка*/
float: left;
width: 800px;
list-style: none;
line-height: 1 ;
background: #CC3333;
font-weight: bold;
padding: 0 ;
margin: 0 0 0 0 ;
/*border: 1px solid #ccc; */
}
#nav a { /*работа с текстом в навигационной строке*/
display: block;
color: #FFFFFF;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #CCCCCC;
}
#nav li { /*работа с блоком в навигационной строке*/
float: left;
padding: 0 ;
width: 160px;
height: auto;
}
#nav li ul { /*работа с выплывающим вниз меню */
position: absolute;
left: -999em;
height: 0 ;
width: 160px;
width: 160px;
font-weight: normal;
}
#nav li li { /*длина строки меню */
/*padding-right: 1em;*/
width: 160px;
}
#nav li ul a { /*текст в строке выплывающего вниз меню */
/*border: 1px solid #ccc;
border-bottom: 0*/
}
#nav li ul ul { /*место появляющегося нового блока меню относительно старого*/
margin: 0em 0 0 100px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
/* Fix IE. Hide from IE Mac \*/
html ul li { float: left; height: 1 %; }
html ul li a { height: 1 %; }
/* End */
#nav li:hover, #nav li.sfhover {
background: #CCFF00;
color: #CCCCCC;
}
#nav a:hover
{color: #CCCCCC;
}
</style>
</head>
<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFFF00">
<ul id="nav">
<li><a href="#"> 000 </a>
<ul>
<li><a href="#"> 001 </a></li>
<li><a href="#"> 002 </a></li>
</ul>
</li>
<li><a href="#"> 010 </a></li>
<li><a href="#"> 020 </a>
<ul>
<li><a href="stile1.htm"> 021 </a></li>
<li><a href="#"> 022 </a></li>
</ul>
</li>
<li><a href="#"> 030 </a>
<ul>
<li><a href="stile1.htm"> 031 </a></li>
<li><a href="#"> 032 </a></li>
<li><a href="#"> 033 </a></li>
<li><a href="#"> 034 </a></li>
</ul>
</li>
<li><a href="#"> 040 </a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
|
|
|
