Our design is increasingly pursuing a concise style, and we want to show more content in a limited space. At the same time we find some problems, the simple arrangement of content always makes the page very long. A lot of scrolling is required to have the displayed content layout complete. Yahoo and NetEase first applied the layout of the label switch, breaking the limitations of the conventional layout, in the same size area, you can put more content. We only need to click on different tabs or links to expand the content, this does not need to open a new page, just on the same page to complete.
First, the implementation of the overall label switching ideas:
The implementation of this label switching layout There are many ways, but also spread a variety of different code, we apply the div CSS layout, first to tidy up the idea, how to achieve such a label switching effect:
1, first to place the label switch container, can be a tab form, can also be the form of a link;
2, put the specific content, and the default display one of the display status. The rest of the content is hidden;
3. When the user clicks on a tab or link, the application JavaScript switches to the specified layer for display, while the other content layer is hidden;
4, to carry out the deep, for example, to remove the link dotted line and content layer of the beautification of the text.
Let's look at the final piece of this example:
Second, according to the above ideas, we began to tidy up the HTML code. We have made the following plans:
1, we decorate a general container, and apply class Woaicss.
2, set an unordered list of UL as a tab or a link to the container (detailed below).
3, we set up four layers respectively, as the content layer (we are supposed to have four switches). Please pay special attention to these four layers are applied to the class
Woaicss_con. At the same time, they were assigned different IDs. This is to allow JavaScript to be controlled. We set up section
The style of a layer is a block element, that is, the content layer is displayed. And the other three layers are hidden.
Third, we begin to further refine the HTML code. Unordered list ul add some links:
- 52css.com
- Div CSS Tutorials
- CSS Layout instances
- Web standardization
1, we have applied two classes of Woaicss_title, WOAICSS_TITLE_BG1 for the UL, the first class can be UL and Li,
Link for overall appearance control. To achieve the overall beautification effect. We have also specified an ID of woaicsstitle for the unordered list UL,
Is that JavaScript can be used for style control.
2. We have added four links and specified the link target as: javascript:void (0). We should understand that when the link is "#
, the browser will go back to the top of the page. And here we don't want to see such a result, because in many cases our toggle box
is not necessarily in the first screen of the page, if you click 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. We are here to pass parameters to JavaScript to
Execute different scripts to achieve the effect of switching.
Iv. 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";
}
A brief description of how JavaScript scripts work:
(Because this site 52css.com only for the CSS discussion, this script does not make a detailed analysis)
1. Set the function woaicssq and get the parameters from the link of the tag switch, such as: JAVASCRIPT:WOAICSSQ (2)
2. Declare the variable ID to be a value of 1 and less than or equal to 4. This is the value of our four content layers.
3, the declaration variable Mrjin is "Woaicss_con" +ID; (Note the ID of the content layer that we set up 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, one of the values is a style definition for a container with ID woaicsstitle, such as:
Woaicss_title Woaicss_title_bg3. This allows us to vary the style of the toggle link through different class classes.
Meaning, when a layer is displayed, we can give some indication of the link to that layer. such as the highlighted state of the tab.
Five, start the preparation of CSS:
* {
List-style-type:none;
font-size:12px;
Text-decoration:none;
margin:0;
padding:0;
}
Overall layout declaration, remove the list item preset marker, set the text size to 12px, remove the text decoration line, the margin and the inner margin are
Zero.
. woaicss {
width:438px;
height:300px;
Overflow:hidden;
margin:50px Auto;
}
Overall label Switch window style definition, wide height setting, overflow to hide, up and down margin is 50px, left and 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 image 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 within the unordered list, set as a block element, and apply the left float to the right margin of 2px. Inline the list item, the 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 item link, set to the block element and specify the width height, the row height is 34px, the color is white color: #fff;
. woaicss_title Li A:hover {
Color: #f0f0f0;
Text-decoration:underline;
}
The hover style of the list item link, with a color of #f0f0f0, underlined as a 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;}
This four-style definition is linked to step four JavaScript scripting. That is, when the value of the function changes, the corresponding pair of unordered table
Style is redefined, we have adjusted the position of the background map here, which realizes the prominent state 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 for the content layer, specify the width height, and set the background picture con_bg.png. 52css.com please pay special attention to the background here
Pictures with the unordered list of UL background images should be seamlessly combined. That is, from the look of them both are a whole.
Six, Content enrichment:
We fill the content layer with certain content and beautify it, for example: (only one, the other three similarities.) ）
- Web Developer Plugin Tutorial CSS page Layout Assistant Design Weapon! Detailed graphic explanation
！
- CSS Templates Channel April 5 Update add template 22 sets
- Get started with XHTML and CSS from the zero-based tutorial series!
- DIV+CSS layout Getting Started sample (directory)
- Basic CSS Tutorial 17 [translation Htmldog]
- DIV CSS Layout example: Using CSS site layout of the ten-step record! Directory
- WEB2.0 Standard Tutorial Step 12 days of basic Learning!
- Div+css Page Layout Tutorial!
Our enriched content layer is a UL unordered list, which we define as a 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;
}
This is not the focus of this article, so do not repeat, related knowledge please refer to:>>> 52css.com about the list of UL produced articles <<<
Seven: Detail decoration
Our link here does not play the role of a real URL steering, just a label, so we can remove its dashed box to
Make our page more neat and natural. Save the following code as a XUXIAN.HTC file:
We add this code to the CSS style: a {Behavior:url (XUXIAN.HTC)}
This allows you to remove the link dashed box (note that this effect is not valid in FF).
Eight: Final effect and extrapolate:
We can finally achieve this effect, you may >>> click here to view <<<
Another scenario may be encountered in our implementation:
We need to implement a link that toggles when the mouse is clicked and opens the content when the mouse clicks.
We will do the following modifications to the non-sequential list ul:
- 52css.com
- Div CSS Tutorials
- CSS Layout instances
- Web standardization
We have achieved this effect by a slight adjustment,
