With the rapid development of the Internet, more and more people have personal homepage, but the static HTML language of the past can not meet people's requirements. The advent of JavaScript and multi-tier mode forms (cascading Style Sheet, CSS) makes the Web page more lively and can achieve satisfying results. In this paper, JavaScript and CSS to make a floating menu for example, to illustrate its flexibility, but also to stimulate the hope and the vast number of netizens to discuss technology, Make a Better Home page (homepage). When we browse a page that exceeds the screen display, in order to return to the menu items, often need to move up the scroll bar to complete, and the use of floating menu to save the trouble, the page's floating menu options as you go up or down the page and automatically move. But not all of the pages are suitable for the use of floating menus, only in a relatively short menu, the screen can be fully displayed, and the body is relatively long, not all on the screen, you need to drag the scroll bar to complete, using a floating menu can achieve unexpected results. The procedure is as follows:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<style type= "Text/css" >
<!--
a{text-transform:none; text-decoration:none; Color:black}
a:hover{color:blue; text-decoration:underline;}
-->
</style>
<link href= "Http://www.webjx.com/templates/webjx/css/style.css" rel= "stylesheet" type= "Text/css"/>
<title> use JavaScript and CSS to make floating menu</title>
<body bgcolor= "#FFFFFF" >
<table width= "75%" border= "0" align= "right" >
<tr>
<td><font face= "_gb2312 in italics" size= "5" color= "#990033" >
<b><p align= "Center" ></b></font> using JavaScript
and CSS making floating menu</td>
</tr>
<tr>
<td><p align= "center" > Web Teaching Network finishing </td>
</tr>
<tr>
<td> A global health care investigation report called "HealthCast2010"
Show <p>, in the next few years the Internet will bring a huge global health care industry </p>
Changes in <p>. Respondents from the United States, Canada, the United Kingdom, Australia, France </p>
<p>, Germany, Finland, New Zealand and Spain, 400 senior </p> in healthcare industry
<p> ... </p>
<p> the number of customers will vary according to the online pharmacy, but not depending on the medical institution </p>
<p> size. This will bring great impact to the traditional famous hospital. </td>
</tr>
</table>
<div id= "Win0" style= "Position:absolute; right:10px; top:10px; width:136px; height:227px; Z-index:25 ">
<table width= "99%" border= "0" >
<tr>
<td background= ". /9908pic/feature3.gif ">
<p align= "center" > "<a href=". /all/news.htm "> Latest News </a>"
</td>
</tr>
<tr>
<td background= ". /9908pic/help3.gif ">
<p align= "center" > "<a href=" telmedicine.html "> Telemedicine </a>"
</td>
</tr>
<tr>
<td background= ". /9908pic/net3.gif ">
<p align= "center" > "<a href=". /all/new.htm "> New World </a>"
</td>
</tr>
<tr>
<td background= ". /9908pic/living3.gif ">
<p align= "center" > "<a href=". /all/syberspace-feature.htm "> Life Resources </a>"
</td>
</tr>
<tr>
<td background= ". /9908pic/net3.gif ">
<p align= "center" > "<a href=". /all/netware.htm "> Query Skills </a>"
</td>
</tr>
<tr>
<td background= ". /9908pic/free3.gif ">
<p align= "center" > "<a href=" software/index.htm "target=" _blank "> software download </a>"
</td>
</tr>
<tr>
<td background= ". /9908pic/lab3.gif ">
<p align= "center" > "<a href=". /lab/lab.htm "> Experiment Fax </a>"
</td>
</tr>
<tr>
<td background= ". /9908pic/mail3.gif ">
<p align= "center" > "<a href=". /all/lianxi.htm "> Contact Us </a>"
</td>
</tr></table></div>
<script language= "JavaScript" >
ie4= (document.all) 1:0if (IE4)
SetInterval (' Keepie ("Win0", 10,10) ', 1)
function Keepie (thename,thewanttop,thewantright) {therealtop=parseint (DOCUMENT.BODY.SCROLLTOP)
Thetruetop=thewanttop+therealtop
Document.all[thename].style.top=thetruetop therealright=parseint (document.body.scrollRight) thetrueright= Thewantright+therealright Document.all[thename].style. Right=thetrueright}
</script>
</body>
The demo effect is as follows:
<ptml><pead><meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "><style type=" text/css "><!--a{text-transform:none; text-decoration:none : hover{color:blue; text-decoration:underline;} --></style> <link href= "http://www.webjx.com/templates/webjx/css/style.css rel=" stylesheet "type=" Text/css "/><title> uses JavaScript and CSS to make floating menu</title></pead> <body bgcolor=" #FFFFFF "> <table width= "75%" border= "0" align= "right" ><tr><td><font face= "italics _gb2312" size= "5" color= "# 990033 "><b><p align=" center "></b></font> using JavaScript and CSS to make floating menu</td></tr ><tr><td><p align= "center" > Web Teaching Network Collation </td></tr><tr><td> a name " HealthCast2010 "Global Health Care Survey report <p> shows that over the next few years the Internet will bring huge </p><p> changes to the global health care industry. The survey was conducted by 400 healthcare industry veterans from the United States, Canada, UK, Australia, France </p> <p>, Germany, Finland, New Zealand and Spain </p><p> ... </p>< Number of p> customersThe amount will vary depending on the online pharmacy, but not the size of the medical establishment </p><p>. This will bring great impact to the traditional famous hospital. </td></tr></table> <div id= "Win0" style= "Position:absolute; right:10px; top:10px; width:136px; height:227px; Z-index:25 "><table width=" 99% "border=" 0 "><tr> <td background=". /9908pic/feature3.gif "><p align=" center ">" <a href= ". /all/news.htm "> Latest news </a>" </td> </tr> <tr><td background= ". /9908pic/help3.gif "><p align=" center ">" <a href= "telmedicine.html" > Telemedicine </a> "</td> </ Tr> <tr><td background= ". /9908pic/net3.gif "><p align=" center ">" <a href= ". /all/new.htm > New World </a> "</td></tr> <tr><td background=". /9908pic/living3.gif "> <p align=" center ">" <a href= ". /all/syberspace-feature.htm "> Life resources </a> </td></tr> <tr><td background=". /9908pic/net3.gif "> <p align=" center ">" <a href= ". /all/netware.htm "> Query skills</a> "</td></tr> <tr><td background=". /9908pic/free3.gif "> <p align=" center ">" <a href= "software/index.htm" target= "_blank" > software download </a> "</td> </tr><tr><td background=". /9908pic/lab3.gif "><p align=" center ">" <a href= ". /lab/lab.htm "> Experimental fax </a>" </td></tr><tr><td background= ". /9908pic/mail3.gif "><p align=" center ">" <a href= ". /all/lianxi.htm "> Contact us </a>" </td></tr></table></div><script language= " JavaScript "> ie4= (document.all)" 1:0if (IE4) setinterval (' Keepie ", Win0) ', 1) function 10,10 (Keepie, Thewanttop,thewantright) {therealtop=parseint (DOCUMENT.BODY.SCROLLTOP) thetruetop=thewanttop+therealtop Document.all[thename].style.top=thetruetop therealright=parseint (document.body.scrollRight) thetrueright= Thewantright+therealright Document.all[thename].style. Right=thetrueright}</script></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
