Our design is increasingly pursuing a concise style, and we hope to show more content in a limited space. At the same time we found some problems, the simple arrangement of the content always makes the page very long. A lot of scrolling can be done to layout the displayed content. Yahoo and NetEase first applied the layout of the label switch, breaking the limitations of the general layout, in the same size area, you can place more content. We just need to click on a different tab or link to expand the content, which does not need to open a new page, just complete on the same page.
First, the overall implementation of the label switching ideas:
The implementation of this label switch layout has a variety of ways, but also spread a variety of different code, we apply div CSS layout, first to tidy up the idea, how to achieve such a label switch effect:
1, the first to place the label switch container, can be the form of tabs, can also be linked to the form;
2, put the specific content, and the default display of one of the display status. The other content is hidden;
3, when the user clicks on the tab or link, the application of JavaScript switch to the specified layer to display, while the other content layer to hide;
4, the late in-depth, for example, to remove the dotted line and the content layer of the text and other landscaping.
We look at the final picture of the effect of this example:
Second, based on the above ideas we began to organize the HTML code. We have made the following plans:
<div class= "Woaicss" >
<ul class= "Woaicss_title woaicss_title_bg1" id= "Woaicsstitle" >
</ul>
<div class= "Woaicss_con" id= "Woaicss_con1" style= "Display:block"; >
</div>
<div class= "Woaicss_con" id= "Woaicss_con2" style= "Display:none"; >
</div>
<div class= "Woaicss_con" id= "Woaicss_con3" style= "Display:none"; >
</div>
<div class= "Woaicss_con" id= "Woaicss_con4" style= "Display:none"; >
</div>
</div>
1, we decorate an overall container, and apply the class Woaicss.
2. Set up a non-sequential list of UL as a tab or a linked container (described in detail below).
3, we have set up four layers, as the content layer (we assume that there are four switches). Please pay special attention to these four layers have applied the class
Woaicss_con. At the same time, different IDs were specified for them. This is to allow JavaScript to be controlled. We set the first
A layer's style is a block element, which shows the content layer. The other three floors were hidden.
Third, we began to further improve the HTML code. Unordered list ul add some links:
<ul class= "Woaicss_title woaicss_title_bg1" id= "Woaicsstitle" >
<li><a href= "javascript:void (0)" onclick= "JAVASCRIPT:WOAICSSQ (1)" >52CSS.com</a></li>
<li><a href= "javascript:void (0)" onclick= "JAVASCRIPT:WOAICSSQ (2)" >div CSS Tutorial
</a></li>
<li><a href= "javascript:void (0)" onclick= "JAVASCRIPT:WOAICSSQ (3)" >css Layout instance
</a></li>
<li><a href= "javascript:void (0)" onclick= "JAVASCRIPT:WOAICSSQ (4)" >web standardization </a></li>
</ul>
1, we have no series of UL application of two classes Woaicss_title, WOAICSS_TITLE_BG1, the first class can be on the UL and Li,
Link for overall appearance control. To achieve the overall beautification effect. We also specify an ID of woaicsstitle for no sequence table UL, mesh
Is that you can apply JavaScript to style control.
2, we added four links, and the link target specified as: javascript:void (0). We should understand that when the link is "#
, the browser will return to the top of the page. And here we don't want to see this result because in many cases our toggle box
is not necessarily the first screen in the Web page, if you click on the link back to the top, visitors will not immediately see the content layer changes. Lost the
Make the meaning of the label switching effect.
3, we set the onclick action avascript:woaicssq (x) for the link. Here we pass the arguments to JavaScript to
Execute different scripts to achieve the effect of switching.
Start writing JavaScript scripts:
function woaicssq (num) {
for (var id = 1;id<=4;id++)
{
var mrjin= "Woaicss_con" +ID;
if (id==num)
document.getElementById (Mrjin). style.display= "Block";
Else
document.getElementById (Mrjin). style.display= "None";
}
if (num==1)
document.getElementById ("Woaicsstitle"). Classname= "Woaicss_title woaicss_title_bg1";
if (num==2)
document.getElementById ("Woaicsstitle"). Classname= "Woaicss_title woaicss_title_bg2";
if (num==3)
document.getElementById ("Woaicsstitle"). Classname= "Woaicss_title woaicss_title_bg3";
if (num==4)
document.getElementById ("Woaicsstitle"). Classname= "Woaicss_title Woaicss_title_bg4";
}
The JavaScript script works as a brief description:
(Because this site 52css.com only for CSS discussion, this script does not make detailed analysis here)
1, set function WOAICSSQ, and from the label Switch link to get the parameters, such as: JAVASCRIPT:WOAICSSQ (2)
2, declare variable ID value is 1 and less than or equal to 4. This is the value of our four content layers.
3, declare variable Mrjin as "Woaicss_con" +ID; (Note the ID of the content layer that we set in the first step, such as:
Id= "Woaicss_con2". When the ID is the specified value, the property of the layer is display= "block";. Otherwise, the properties of the layer are
Display= "None". That is to achieve the content layer display and hidden switching function.
4, when the variable ID is 1-4 of which a value is, the ID for the Woaicsstitle container for style definition, such as:
Woaicss_title Woaicss_title_bg3. So that we can use different class classes, to switch the link to different style set
Meaning, when a layer is displayed, we can give some indication of the link to that layer. such as the highlight status of the tab.
Five, the beginning of the writing of CSS:
* {
List-style-type:none;
font-size:12px;
Text-decoration:none;
margin:0;
padding:0;
}
Overall layout declaration, remove list item preset tags, set text size to 12px, remove text decoration lines, both outer and inner margins are
Zero.
. woaicss {
width:438px;
height:300px;
Overflow:hidden;
margin:50px Auto;
}
Overall label Switch window style definition, wide-height settings, overflow for hidden, up and down outer distance of 50px, left or right for automatic, achieve level
Center alignment.
. woaicss_title {
width:438px;
height:30px;
Background: #fff URL (btn_bg.png) no-repeat; Overflow:hidden;
}
Unordered list of UL style, wide height setting, background picture for btn_bg.png.
. woaicss_title Li {
Display:block;
Float:left;
margin:0 2px 0 0;
Display:inline;
Text-align:center;
}
The style of the list item in the unordered list, set to the block element and apply the float to the left, and the right outer margin is 2px. Inline a list item, text
The word alignment is centered.
. woaicss_title Li a {
Display:block;
width:90px;
heigth:30px;
line-height:34px;
Color: #fff;
}
The style of the list link, set to block element and specify the width height, the row height is 34px, the colour is white color: #fff;
. woaicss_title Li A:hover {
Color: #f0f0f0;
Text-decoration:underline;
}
The hover style for the list item, with the color #f0f0f0 and underlined as the decorative line.
. woaicss_title_bg1 {background-position:0 0;}
. woaicss_title_bg2 {background-position:0 -30px;}
. woaicss_title_bg3 {background-position:0 -60px;}
. woaicss_title_bg4 {background-position:0 -90px;}
The definitions of the four styles are in contact with the step four JavaScript script. That is, when the value of the function changes, the corresponding pair of unordered table
Style is redefined, where we adjust the position of the background map to achieve the outstanding status of the option card.
. Woaicss_con {
Display:block;
width:438px;
height:270px;
Background:url (con_bg.png) no-repeat 0 0; Overflow:hidden;
}
The style definition of the content layer, specifying the width height, and setting the background picture con_bg.png. 52css.com please pay special attention to the background here
Picture with unordered list ul background picture should be seamless combined. That is, from the outward appearance, they are a whole.
Vi. Content Enrichment:
We populate the content layer with a certain content and beautify it, for example: (just one, the other three identical.) ）
<ul>
<li><a href= "#" title= "" >web Developer Plugin Tutorial CSS Page layout aided design tool! Detailed graphic explanation
！ </a></li>
<li><a href= "#" title= ">css templates channel April 5 Update add template 22 sets </a></li>
<li><a href= "#" title= "" >xhtml with CSS introductory classic from zero-Start series Tutorials! </a></li>
<li><a href= "#" title= ">div+css layout Getting Started sample (TOC) </a></li>
<li><a href= "#" title= ">css basic tutorial 17 [translation htmldog]</a></li>
<li><a href= "#" title= ">div CSS Layout example: Ten steps with CSS website layout! Directory
</a></li>
<li><a href= "#" title= "" >web2.0 Standard tutorial step-by-Step 12-Day Basic Learning! </a></li>
<li><a href= "#" title= ">div+css page layout Tutorial! </a></li>
</ul>
Our enriched content layer is a list of UL unordered, and we define it in style:
. Woaicss_con UL {
width:418px;
height:250px;
MARGIN:12PX Auto;
}
. Woaicss_con Li {
width:418px;
line-height:30px;
margin:0 Auto;
White-space:nowrap;
Text-overflow:ellipsis;
Overflow:hidden;
}
. Woaicss_con Li a {
Color: #03c;
}
. Woaicss_con Li A:hover {
Color: #069;
Text-decoration:underline;
}
Here is not the focus of this article, so no longer repeat, the relevant knowledge please refer to:>>> 52css.com about the list of UL made articles <<<
Seven: Detail modification
Our link here does not play the role of real URL steering, just a tag, so we can remove its dotted box to
Let our pages more neat and natural. Save the following code as a XUXIAN.HTC file:
<public:attach event= "onfocus" onevent= "Hscfsy ()"/>
<script language= "JavaScript" >
function Hscfsy () {
This.blur ();
}
</script>
We add this code to the CSS style: a {Behavior:url (XUXIAN.HTC)}
This allows you to remove the link dotted box (note that this effect is not valid in FF).
Viii.: Final effect and extrapolate:
We can finally achieve this effect, you may >>> click here to view <<<
There may be another scenario that we might encounter in our implementation:
We need to implement when the mouse across the switch, when the mouse clicks open the corresponding content of the link.
We will be no series of UL to make the following changes can be achieved:
<ul class= "Woaicss_title woaicss_title_bg1" id= "Woaicsstitle" >
<li><a href= "#" onmouseover= "JAVASCRIPT:WOAICSSQ (1)" >52CSS.com</a></li>
<li><a href= "#" onmouseover= "JAVASCRIPT:WOAICSSQ (2)" >div CSS Tutorials </a></li>
<li><a href= "#" Onmouseover= "JAVASCRIPT:WOAICSSQ (3)" >css Layout instance </a></li>
<li><a href= "#" Onmouseover= "JAVASCRIPT:WOAICSSQ (4)" >web standardization </a></li>
</ul>
We have achieved this effect by slightly adjusting,
