實用:JS實現滑鼠移至上方顯示不同的頁面

來源:互聯網
上載者:User
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="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;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the first list item */
.menu ul li:hover ul {
text-align:left;
display:block;
position:absolute;
top:30px;
left:0;
text-align:left;
}
/* make the sub menu ul li the full width with padding and border. Add an auto scroll bar */
.menu ul li:hover ul li {
background:#eee;
color:#000;
padding:10px;
width:689px;
height:180px;
overflow:auto;
border:20px solid #b3ab79;
}
/*float the image left with padding and no border */
.menu ul li:hover ul li img {
float:left;
padding:10px 10px 10px 0;
border:0;
}
/* style the paragraph font height */
.menu ul li:hover ul li p {
font-size:0.9em;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:inline;
background:#eee;
color:#c00;
text-decoration:underline;
border:0;
}
/* style the background and forground colors of the links on hover */
.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" />
<![endif]-->

/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */

/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the first list item */
.menu ul li a:hover ul {
text-align:left;
display:block;
position:absolute;
top:31px;
left:0;
}

/* make the sub menu ul li the full width with padding and border. Add an auto scroll bar */
.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;
}
/*float the image left with padding and no border */
.menu ul li a:hover li img {
float:left;
padding:10px 10px 10px 0;
border:0;
}
/* style the paragraph font height */
.menu ul li a:hover p {
font-size:0.7em;
f\ont-size:1em;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
display:inline;
width:1px;
word-wrap:normal;
background:#eee;
color:#c00;
text-decoration:underline;
border:0;
}

/* style the background and forground colors of the links on hover */
.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:lang="en"><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">John Constable</a> <!--[if lte IE 6]><a href="../menu/index.html">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="http://www.webjx.com/htmldata/2006-03-28/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">Claude Monet</a> <!--[if lte IE 6]><a href="#nogo">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="http://www.webjx.com/htmldata/2006-03-28/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">Vincent Van Gogh</a> <!--[if lte IE 6]><a href="../layouts/index.html">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="http://www.webjx.com/htmldata/2006-03-28/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>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。