从国外一个网站上摘取出来的导航菜
菜单截图 代码如下：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
2<html xmlns="http://www.
3<head>
4<meta http-equiv="Content-Type" c />
5<title>一个简单的DIV+CSS模板</title>
6<style type="text/css">
7* {}{ margin: 0; padding: 0; }
8body {}{
9 color: #555;
10 font:normal 12px Tahoma,Arial, Verdana, Helvetica, Sans-serif;
11 background:#fbd550 url(img/bk-amarillo.jpg) repeat-x;
12 margin-bottom:20px;
13 }
14
15a {}{color:#3e78b3; text-decoration:underline;}
16
17a:hover {}{color: #333; text-decoration:underline;}
18
19
20
21/**//* TABS superiores ------------------------------------------*/
22
23#shademenu {}{ float:right; width:600px;; font-size:11px; line-height:normal; }
24.shadetabs a {}{ color:#CCCCCC; }
25.shadetabs ul{}{margin-left: 0; margin-top: 88px; font:normal 11px Verdana; list-style-type: none;}
26.shadetabs li{}{display: inline;margin: 0;}
27.shadetabs li a{}{ float:left; background:url("img/tableftH.gif") no-repeat left -42px; margin:0; padding:0 0 0 3px; text-decoration:none;}
28.shadetabs a span{}{ display:block; background:url("img/tabrightH.gif") no-repeat right -42px; padding:6px 12px 6px 6px; color:#FFF;}
29.shadetabs a:hover {}{ background-position:0% 0; cursor:pointer; color:#FFF; text-decoration:none; }
30.shadetabs a:hover span {}{ background-position:100% 0; cursor:pointer; color:#614c27; text-decoration:none;}
31
32/**//* ######### Style for Drop Down Menu ######### */
33.dropmenudiv {}{
34 position:absolute;
35 border: 1px solid #d9e0ea; /**//*THEME CHANGE HERE*/
36 border-width: 1px;
37 font:normal 11px Verdana;
38 line-height:18px;
39 z-index:100;
40 background-color: #f1f4f8;
41 visibility: hidden;}
42.dropmenudiv a{}{
43 width: auto;
44 display: block;
45 text-indent: 8px;
46 border-top: 1px solid #d9e0ea; /**//*THEME CHANGE HERE*/
47 padding: 2px 0;
48 text-decoration: none;
49 color:#333;}
50* html .dropmenudiv a{}{ /**//*IE only hack*/width: 100%;}
51.dropmenudiv a:hover{}{ /**//*THEME CHANGE HERE*/background-color: #d9e0ea; color:#333; text-decoration:none;}
52tr ul{}{margin-left:0;}
53
54
55</style>
56
57
58
59<script type="text/javascript">
60var tabdropdown={
61disappeardelay: 150, //set delay in miliseconds before menu disappears onmouseout
62disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
63downsymbol: '', //HTML "symbol" to use to indicate this is a dropdown menu item. Enter ('') to disable.
64
65//No need to edit beyond here////////////////////////
66dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
67
68getposOffset:function(what, offsettype){
69var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
70var parentEl=what.offsetParent;
71while (parentEl!=null){
72totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
73parentEl=parentEl.offsetParent;
74}
75return totaloffset;
76},
77
78showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
79if (this.ie || this.firefox)
80this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
81if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
82if (obj2.parentNode.className.indexOf("default")==-1) //if tab isn't a default selected one
83obj2.parentNode.className="selected"
84obj.visibility="visible"
85}
86else if (e.type=="click")
87obj.visibility="hidden"
88},
89
90iecompattest:function(){
91return ( && )? document.documentElement : document.body
92},
93
94clearbrowseredge:function(obj, whichedge){
95var edgeoffset=0
96if (whichedge=="rightedge"){
97var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
98this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
99if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
100edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
101}
102else{
103var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
104var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
105this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
106if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
107edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
108if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
109edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
110}
111this.dropmenuobj.style.borderTopWidth=(edgeoffset==0)? 0 : "1px" //Add 1px top border to menu if dropping up
112}
113return edgeoffset
114},
115
116dropit:function(obj, e, dropmenuID){
117if (this.dropmenuobj!=null){ //hide previous menu
118this.dropmenuobj.style.visibility="hidden" //hide menu
119if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
120if (this.previousmenuitem.parentNode.className.indexOf("default")==-1) //If the tab isn't a default selected one
121this.previousmenuitem.parentNode.className=""
122tabdropdown.togglehiddenobj(this.previousmenuitem, 'visible')
123}
124}
125this.clearhidemenu()
126if (this.ie||this.firefox){
127obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
128obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
129this.dropmenuobj=document.getElementById(dropmenuID)
130this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
131this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
132this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
133this.showhide(this.dropmenuobj.style, e, obj)
134this.dropmenuobj.x=this.getposOffset(obj, "left")
135this.dropmenuobj.y=this.getposOffset(obj, "top")
136this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
137this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
138this.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
139tabdropdown.togglehiddenobj(obj, "hidden") //Hide (form) object drop down menu overlaps, if any
140}
141},
142
143togglehiddenobj:function(obj2, visible){
144var revvalue=obj2.getAttribute("rev")
145if (typeof revvalue=="string" && revvalue.length>0 && document.getElementById(revvalue)!=null)
146document.getElementById(revvalue).style.visibility=visible
147},
148
149contains_firefox:function(a, b) {
150while (b.parentNode)
151if ((b = b.parentNode) == a)
152return true;
153return false;
154},
155
156dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
157var evtobj=window.event? window.event : e
158if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
159this.delayhidemenu(obj2)
160else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
161this.delayhidemenu(obj2)
162},
163
164delayhidemenu:function(obj2){
165this.delayhide=setTimeout(function(){tabdropdown.dropmenuobj.style.visibility='hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''; tabdropdown.togglehiddenobj(obj2, 'visible')},this.disappeardelay) //hide menu
166},
167
168clearhidemenu:function(){
169if (this.delayhide!="undefined")
170clearTimeout(this.delayhide)
171},
172
173initializetabmenu:function(menuid, opt_selectedmenuitem){
174var menuitems=document.getElementById(menuid).getElementsByTagName("a")
175for (var i=0; i<menuitems.length; i++){
176if (parseInt(opt_selectedmenuitem)==i)
177menuitems[i].parentNode.className+=" selected default"
178if (menuitems[i].getAttribute("rel")){
179var relvalue=menuitems[i].getAttribute("rel")
180menuitems[i].onmouseover=function(e){
181var event=typeof e!="undefined"? e : window.event
182tabdropdown.dropit(this, event, this.getAttribute("rel"))
183}
184if (tabdropdown.downsymbol!="")
185menuitems[i].innerHTML+=tabdropdown.downsymbol //Add symbol HTML to menu item's.
186}
187}
188}
189
190}
191</script>
192</head>
193
194<body>
195
196
197 <div id="shademenu" class="shadetabs">
198 <ul>
199 <li><a href="default.htm" title="Inicio"><span> 公司首页 </span></a></li>
200 <li><a href="acerca-de-nosotros.htm" title="公司概况" rel="dropmenu1"><span> 公司概况 </span></a></li>
201 <li><a href="lo-que-ofrecemos.htm" title="新闻中心" rel="dropmenu2"><span> 新闻中心 </span></a></li>
202 <li><a href="certificaciones.htm" title="组织机构"><span> 组织机构 </span></a></li>
203 <li><a href="fundacion/antecedentes.htm" title="技术资料" rel="dropmenu3"><span> 技术资料 </span></a></li>
204 <li><a href="contacto.htm" title="人才招聘"><span> 人才招聘 </span></a></li>
205 </ul>
206 </div>
207 <!--1st drop down menu -->
208 <div id="dropmenu1" class="dropmenudiv" style="width: 140px;"><a href="directorio.htm"><img src="Images/ftb/folder.small.gif" border="0"/> 荣誉称号</a>
209 </li>
210 <a href="mapa.htm">公司简介公司简介查看</a>
211 </li>
212 <a href="ventas-internacionales.htm">资质证书</a>
213 </li>
214 <a href="nuestras-marcas.htm">公司业绩</a>
215 </li>
216 <a href="contacto.htm">质保体系</a>
217 </li>
218 </div>
219<!--2nd drop down menu -->
220 <div id="dropmenu2" class="dropmenudiv" style="width: 70px;"> <a href="lo-que-ofrecemos/frutas-y-hortalizas.htm">公司新闻</a> <a href="lo-que-ofrecemos/composta.htm">企业动态</a> <a href="lo-que-ofrecemos/transportes-alta.htm">国际新闻</a> <a href="lo-que-ofrecemos/invernadero-alta.htm">国内新闻</a> </div>
221 <!--3rd drop down menu -->
222 <div id="dropmenu3" class="dropmenudiv" style="width: 100px;"> <a href="fundacion/antecedentes.htm">监理资料</a> <a href="fundacion/mision-vision-y-valores.htm">代建制管理技术</a> <a href="fundacion/programa-de-salud.htm">公司资料</a> <a href="fundacion/trabajo-social.htm">资料中心</a> <a href="fundacion/vinculos-de-apoyo.htm">其他资料</a> </div>
223 <script type="text/javascript">
224//tabdropdown.initializetabmenu("tab_menu_id", optional_selected_tab_number)
225//ie: tabdropdown.initializetabmenu("tab_menu_id", 2)
226tabdropdown.initializetabmenu("shademenu")
227</script>
228 </div>
229
230</body>
231</html>
232
233
234
235
做人要厚道，请注明转自酷网动力([url]www.[/url])。
