实用：JS实现鼠标悬停显示不同的页面
当鼠标按顺序悬停在菜单上时，可在同一位置显示不同的页面
作者：Stu Nicholls
翻译：forestgan
信息
这是 cssplay的站长根据其最近创作的dropdown and flyout menus而改编而成的，当鼠标按顺序悬停在菜单上时，可在同一位置显示不同的页面，可在Opera, IE5.5, IE6, IE7 beta,Safari 1.3.2 & Firefox.中正确显示和工作，不兼容Mac IE5。
鼠标悬停在菜单和页面上时显示文字与图片以及链接，滚动条要加在每个页上。
样式
对于非IE浏览器来说是比较简单的，只用一个样式表。
<link rel="stylesheet" media="all" type="text/css" href="http://www.webjx.com/htmldata/2006-03-28/one_page.css" />
/* common styling */
/* set up the overall width of the menu div, the font and the margins with a relative position*/
.menu {
font-family: verdana, arial, sans-serif;
width:750px;
margin:0;
position:relative;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
border:0;
}
/* float the list so that the items are in a line */
.menu ul li {
float:left;
}
/* style the links to be 249px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:249px;
height:30px;
color:#000; [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] 下一页
|
