實用：實作滑鼠懸停顯示不同的頁面
當滑鼠按順序懸停在菜單上時，可在同一位置顯示不同的頁面
作者：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="one_page.css" target="_blank" rel="external nofollow" />
.menu {
font-family: verdana, arial, sans-serif;
width:750px;
margin:0;
position:relative;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
border:0;
}
.menu ul li {
float:left;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:249px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
.menu ul li:hover ul {
text-align:left;
display:block;
position:absolute;
top:30px;
left:0;
text-align:left;
}
.menu ul li:hover ul li {
background:#eee;
color:#000;
padding:10px;
width:689px;
height:180px;
overflow:auto;
border:20px solid #b3ab79;
}
.menu ul li:hover ul li img {
float:left;
padding:10px 10px 10px 0;
border:0;
}
.menu ul li:hover ul li p {
font-size:0.9em;
}
.menu ul li:hover ul li a {
display:inline;
background:#eee;
color:#c00;
text-decoration:underline;
border:0;
}
.menu ul li:hover ul li a:hover {
text-decoration:none;
color:#000;
}
而IE還需要專門為它加一個，用條件判斷加入。
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="one_page_ie.css" target="_blank" rel="external nofollow" />
<![endif]-->
table {
border-collapse:collapse;
margin:0;
padding:0;
}
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
.menu ul li a:hover ul {
text-align:left;
display:block;
position:absolute;
top:31px;
left:0;
}
.menu ul li a:hover ul li {
background:#eee;
color:#000;
padding:10px;
width:746px;
height:240px;
overflow:auto;
border:20px solid #b3ab79;
w/idth:689px;
he/ight:180px;
}
.menu ul li a:hover li img {
float:left;
padding:10px 10px 10px 0;
border:0;
}
.menu ul li a:hover p {
font-size:0.7em;
f/ont-size:1em;
}
.menu ul li a:hover ul li a {
display:inline;
width:1px;
word-wrap:normal;
background:#eee;
color:#c00;
text-decoration:underline;
border:0;
}
.menu ul li a:hover ul li a:hover {
text-decoration:none;
color:#000;
}
xhtml
你會看到用條件判斷來給 IE添加表格，. 其他浏覽器不會用到表格，而将正常使用無序清單。文檔類型聲明是必須要加的，反之不能正常工作。
運作代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> stu nicholls | CSS PLaY | cross browser tabbed pages with embeded links</title>
<meta name="Author" content="Stu Nicholls"/>
<meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations"/>
<meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS"/>
<link rel="stylesheet" media="all" type="text/css" href="http://www.forest53.com/tutorials/onepage/one_page.css"/>
<style type="text/css">
body {text-align:center; font-family:verdana, arial, sans-serif; font-size:76%; color:#000; background:#fff url(back.gif) repeat-x; padding:0; border:0; margin:0;}
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="http://www.forest53.com/tutorials/onepage/one_page_ie.css" />
<![endif]-->
<!--[if lte IE 6]>
<style>
#ads {display:none;}
#smallads {display:none;}
#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}
#smalladsie {clear:both; text-align:center; width:468px; margin-top:10px;}
</style>
<![endif]-->
</head>
<body>
<div class="menu" style="margin: 10px auto;">
<ul>
<li><a class="hide" href="#nogo" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >John Constable</a>
<!--[if lte IE 6]>
<a href="../menu/index.html" target="_blank" rel="external nofollow" >John Constable
<table><tr><td>
<![endif]-->
<ul>
<li>
<p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p>
<img src="constable.jpg" alt="The Hay Wain" title="The Hay Wain"/>
<p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p>
<p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by <a href="http://www.ibiblio.org/wm/paint/auth/delacroix/">Delacroix</a> and Bonington among others.</p>
<p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p>
<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/constable/">The WebMuseum, Paris</a></p>
</li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#nogo" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Claude Monet</a>
<!--[if lte IE 6]>
<a href="#nogo" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Claude Monet
<table><tr><td>
<![endif]-->
<ul>
<li>
<p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor <a href="http://www.ibiblio.org/wm/paint/auth/boudin/">Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p>
<img src="monet.jpg" alt="Women in the Garden" title="Women in the Garden"/>
<p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with <a href="http://www.ibiblio.org/wm/paint/auth/pissarro/">Pissarro</a>. After two years' military service in Algiers, he returned to Le Havre and met <a href="http://www.ibiblio.org/wm/paint/auth/jongkind/">Jongkind</a>, to whom he said he owed `the definitive education of my eye'.</p>
<p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p>
<p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Musée d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p>
<p><a href="http://www.ibiblio.org/wm/paint/auth/courbet/">Courbet</a> visited him when he was working on it and said Monet would not paint even the leaves in the background unless the lighting conditions were exactly right.</p>
<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/monet/">The WebMuseum, Paris</a></p>
</li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#nogo" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Vincent Van Gogh</a>
<!--[if lte IE 6]>
<a href="../layouts/index.html" target="_blank" rel="external nofollow" >Vincent Van Gogh
<table><tr><td>
<![endif]-->
<ul>
<li>
<p>Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman after <a href="http://www.ibiblio.org/wm/paint/auth/rembrandt/">Rembrandt</a>.</p>
<img src="vincent.jpg" alt="The Starry Night" title="The Starry Night"/>
<p>With <a href="http://www.ibiblio.org/wm/paint/auth/cezanne/">Cézanne</a> and <a href="http://www.ibiblio.org/wm/paint/auth/gauguin/">Gauguin</a> the greatest of Post-Impressionist artists. He powerfully influenced the current of <a href="http://www.ibiblio.org/wm/paint/glo/expressionism/">Expressionism</a> in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known <a href="http://www.ibiblio.org/wm/paint/auth/gogh/starry-night/">The Starry Night</a> (1889).</p>
<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/gogh/">The WebMuseum, Paris</a></p>
</li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<div class="clear"> </div>
</div>
</body>
</html>
</div><!-- /content -->
<div class="dede_pages">
<ul class="pagelist">
<li><a>共3頁: </a></li><li><a href='33953.html'>上一頁</a></li><li><a href='33953.html'>1</a></li><li class="thisclass"><a href='#'>2</a></li><li><a href='33953_3.html'>3</a></li><li><a href='33953_3.html'>下一頁</a></li>
</ul>
</div><!-- /pages -->
<div class="boxoff">
<strong>------分隔線----------------------------</strong>
</div>
<div class="handle">
<div class="context">
<ul>
<li>上一篇：<a href='/info/html/wangyezhizuo/Javascript/20080224/33949.html'>JavaScript經典效果集錦（三）</a> </li>
<li>下一篇：<a href='/info/html/wangyezhizuo/Javascript/20080224/33956.html'>簡單實用技巧之網頁表格特效</a> </li>
</ul>
</div><!-- /context -->
<div class="actbox">
<ul>
<li id="act-pnt"><a href="#" target="_blank" rel="external nofollow" onClick="window.print();">列印</a></li>
</ul>
</div><!-- /actbox -->
</div>
<div class="picnews">
<dl class="tbox">
<dt><strong>相關文章</strong></dt>
<dd>
<ul class="d1 ico3">
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/33361.html'>漂浮廣告代碼完全解析</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/34069.html'>破解網頁滑鼠右鍵被禁用的最新方法</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/34045.html'>（Javascript）prototype的一個優勢也是缺點</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/32765.html'>VBScript基礎教程之二在HTML頁面中添加VBscript代碼</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/32650.html'>各種網頁播放器代碼大全</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/33101.html'>JavaScript實際應用：innerHTMl和确認提示的使用</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/34598.html'>javascript通過調用doPostBack回傳頁面</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/32965.html'>常用的Javascript函數</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/34010.html'>JS特效-N級的關聯Select下拉框</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/33345.html'>JavaScript模拟ACDSEE簡單功能</a></li>
</ul>
</dd>
</dl>
</div>
<!-- /handle -->
</div><!-- /viewbox --><!-- /comment -->
</div><!-- /pleft -->
<div class="pright">
<div class="commend mt1">
<dl class="tbox">
<dt><strong>推薦内容</strong></dt>
<dd>
<ul class="d4">
</ul>
</dd>
</dl>
</div><!-- /commend -->
<div class="hot mt1">
<dl class="tbox">
<dt><strong>熱點内容</strong></dt>
<dd>
<ul class="c1 ico2">
</ul>
</dd>
</dl>
</div>
<div class="hot mt1">
<dl>
<dd>
<ul class="c1 ico2 center"><center><script language="javascript" src="http://ads.west263.com/vcp/getJScode/getJScode.asp?ReferenceID=46061&No=150x300"></script></center>
</ul>
</dd>
</dl>
</div>
</div><!-- /pright -->
</div>
<div class="footer w960 center mt1 clear">
<!--
為了支援織夢團隊的發展,請您保留織夢内容管理系統的連結資訊.
我們對支援織夢團隊發展的朋友表示真心的感謝!織夢因您更精彩!
-->
<p class="powered">
Powered by <strong>ABC188<span>.COM</span></strong> © 2004-2009 All Rights Reserved. </p>
<!-- /powered -->
<p class="copyright">
站長資訊中心-網際網路最全面，最專業的行業資訊網站！<br />蜀ICP備05000045号
</p>
</div>
<!-- /footer -->
</body>
</html>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)