Practical: JS implementation of the mouse hover display different pages

js| Mouse | show | page

When the mouse hovers over the menu in order, you can display different pages in the same location

Author: Stu Nicholls
translation:Forestgan

Information

This is the cssplay of the webmaster based on its recently created dropdown and flyout menus, when the mouse in order to hover on the menu, you can display a different page in the same location, can be in opera, IE5.5, IE6, IE7 Beta,safari 1.3.2 & Firefox. Display and work correctly, not compatible with Mac IE5.

Hover over menus and pages to display text and pictures as well as links, and scroll bars to be added to each page.

Style

It's simpler for non-ie browsers, with only one stylesheet.

<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" the items are in a line * *
. menu ul Li {
Float:left;
}
/* Style The links to is 249px wide by 30px high with a and right border 1px solid. 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 "i" *
. 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 "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;
}

and IE also need to specifically add one for it, with conditions to judge join.

<!--[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 the 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:non E
}
/* Set the background and foreground color of the main menu link on hover */
. Menu ul li a:hover {
Color: #f ff
Background: #b3ab79;
}
/* Make the Sub menu UL visible and position it beneath the "list item */
. Menu ul Li A:hover ul {
Tex T-align:left;
Display:block;
Position:absolute;
top:31px;
left:0;
}

* Make the Sub menu ul li "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

You'll see Using conditional judgment to add a table to ie. No tables are used by other browsers, and no sequence tables are used normally. The document type declaration must be added, otherwise it will not work correctly.

Run Code Box

<! 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" ><pead><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, the consortium, doing it with Style, Recommendations, opacity, box model, Mozilla, Opera, Netscape, Internet Explorer, V6, v7.23, techniques, layout, three Co Lumn, 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 St Yle 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]--></pead><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 a early talent for art and began painting His native Suffolk scenery before him left school, his great originality matured slowly.</p> <p >he committed himself to a career as "a artist only in 1799", when he joined the Royal Academy Schools and it is not UN Til 1829 that he is grudgingly made a full academician, elected by a majority of only one vote.</p> &L T;p>in 1816 he became financially secure on the death of him father and married Maria Bicknell after a seven-year Ship with 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 is admired by <a href= "http://www.ibiblio.org/wm/paint/auth/delacroix/">Delacroix</a> and Bonington among others.</p> <p>his wife in 1828, However, and the remaining years of his. were clouded by despondency.</p> <p>this text is 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> <!--[i F LTE IE 6]><a href= "#nogo" >claude monet<table><tr><td><! [endif]--> <ul> <li> <p>his Youth is spent in Le Havre, where he fi RST excelled as a caricaturist but is then converted to landscape painting from his early mentor <a href= "Http://www.ibi blio.org/wm/paint/auth/boudin/">boudin</a>, from whom him derived his firm predilection for painting out of doors.</p> <p> In 1859 him studied in Paris at the Atelier of Suisse and formed a friendship with <a href= "Http://www.ibiblio.org/wm/paint /auth/pissarro/"&GT;PISSARRO&LT;/A&GT; 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&gt, to whom him said he owed ' 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 is to form the nucleus of the Impressionist group.</p> <p>monet's devotion to painting out of D Oors 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 at the garden so tha T the canvas could is 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 is working on it and said Monet W Ould not paint even the leaves in background unless the lighting conditions were exactly <p>this text is a 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, 185 3, Zundert, neth.--d. July, 1890, Auvers-sur-oise, near Paris), generally considered the greatest Dutch painter and draughtsman after <a H ref= "http://www.ibiblio.org/wm/paint/auth/rembrandt/" >Rembrandt</a>.</p> <p>w ith <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-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= gogh/starry-night/">The Starry Night</a> (1889) .</p> <p>this text is a excerp T 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>&lt ;/html>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]