Home > Developer > Web Develop
650) this. length = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/111P4C07-0.jpg "title =" sina.jpg "width =" 300 "height =" 123 "border =" 0 "hspace =" 0 "vspace =" 0 "style =" width: 300px; height: 123px; float: left; "/> In the Sina Blog, you can see that the navigation bar is simple, elegant, dynamic, and beautiful, and you can enjoy it. You can open the source file and find new discoveries: the structure of the navigation bar is not based on the ul-li-a structure of textbooks or web tutorials, but a text tile structure of "no technical content, the code is concise and intuitive. like Sina's webpage style, it follows the simple and beautiful concept, reflecting the developers' profound understanding and grasp of css.
However, the special effects of Sina Blog navigation bar are implemented using js scripts. Next we will try to implement it with pure html + css.
Step 1: Make a basic navigation bar based on Sina's ideas.
Code:
<Style type = "text/css">
A: link, a: visited {
Float: left;/* Set float to make a block element. You can set the height and width */
Width: 4em;/* menu item width: Four default font widths <meta charset = "gb2312"> */
Text-decoration: none;
Color: white;
Background-color: # e04e00;
Padding: 0.5em 0.6em;/* adjust the block height and vertical alignment with the inner margin */
Border-right: 1px solid;/* specify the right border as the interval line */
Border-color: # f0700e;/* interval line color */
}
A: hover {
Background-color: # f0700e;/* line color at the same interval as the menu item */
}
</Style>
<Body>
<Div>
<A href = "#"> entertainment </a>
<A href = "#"> sports events </a>
<A href = "#"> document history </a>
<A href = "#"> Shang pintang </a>
</Div>
</Body>
Execution result:
650) this. length = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/111P42956-1.jpg "title =" menu.jpg "width =" 357 "height =" 54 "border =" 0 "hspace =" 0 "vspace =" 0 "style =" width: 357px; height: 54px; "/>
The above code is concise, intuitive, and involves only the attribute control of Element a, and does not require special skills. Even div elements are dispensable. The effect is comparable to the navigation bar designed with ul-li-a complex structure. Since the property a of the li element is also owned by the li element, it is redundant to use the li element to carry the element to construct the menu.
Based on the above Code, we try to use pure html + css to implement the remaining special effects.
Step 2: Add a menu item increase effect when hovering over the mouse
Insert the blue part of the code below in the above Code a: hover selector). The function is to increase the menu item height by a bit by em when the mouse is hovering over. However, the height increase is extended down, you need to reposition it. Relative positioning is adopted here, which is simpler than absolute positioning. You do not need to consider the mutual influence with other elements, as long as you move up relative to your original location.
A: hover {
Background-color: # f0700e;
Padding: 0.7em 0.6em;/* increase the height of the added menu item by 0.4em */
Position: relative;/* the height of the added block is extended downward. You need to increase the block position */
Top:-0.4em;/* move up to 0.4em */
}
Execution result:
650) this. length = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/111P4JX-2.jpg "title =" menu2.jpg "width =" 357 "height =" 54 "border =" 0 "hspace =" 0 "vspace =" 0 "style =" width: 357px; height: 54px; "/>
Relatively close, there is a small triangle "margin" in the upper right corner of the menu item"
Review the relative positioning of css:The element box offsets a certain distance from its original position. The element remains the type before its position, and its original space remains.
Fortunately, after relatively locating the menu item,The space it originally occupied is retained ",Otherwise, the original space of the menu item will be filled by the subsequent menu items, and our navigation bar will be totally different.
Step 3: Add "hover" in the upper right corner of the menu item"
Observe the Sina Blog navigation bar. This triangle is out of the box of the menu item and cannot be implemented using the background image method. The idea of implementing this special effect is:Add a triangle in the menu item that can be repositioned when you hover the mouse over it. Remove the triangle from the menu item box by repositioning it.. Following this idea, we continue to design special effects.
650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/111P43064-3.gif "title =" block.gif "/>
1. Create with cssTriangle
Principle: css can independently control the four borders of the block element. If the Border width of the block element is large enough relative to the content field, the external attributes of the border will be fully reflected.
650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/111P46418-4.png "title =" xsj.png "/>
The small triangle we need is as follows: the height and width of the content area are reduced to. The width of the four borders is half the length of the small triangle, the color of the Left and bottom borders is dark red, and the color of the top and right borders is transparent, such a rectangle looks like a small triangle. The vast majority of elements can be used to create small triangles. The following uses div elements to create small triangles.
2. The small triangle div is included in the menu item so that the small triangle can interact with the menu item.
Insert a div into the link and see the blue code.) element a must contain a div, which has two functions: the selector of the div is triggered when the mouse is hovering over the menu item; element a serves as the positioning benchmark for the small triangle div.
<Div>
<A href = "#"> entertainment <div> </a>
<A href = "#"> sports events <div> </a>
<A href = "#"> document history <div>/div> </a>
<A href = "#"> Shang pintang <div> </a>
</Div>
3. When the mouse is hovering over the div, The div is relocated.
In the current css version, the mouse can only trigger the: hover selector when hovering over the menu item, but the: hover selector can only control the attributes of Element a, but cannot control the attributes of the small triangle div, if you can trigger another selector to control the small triangle when hovering over the menu item, the door to solving the problem is open.
Is there a selector that is triggered simultaneously with the: hover selector? Yes! This is the descendant selector of a: hover. For example, a: hover div must contain div in html ). Now we use it to generate and locate a small triangle. Its css code segment is:
A: hover div {
/****** Start to generate a small triangle *****/
Width: 0px;/* the width of the content area is 0 **/
Height: 0px;
Border-style: solid;
Border-width: 0.2em;/* If the width of each border is 0.2em, the rectangular side length is 0.4em, which is the height added to the menu item when the mouse is hovering */
Border-color: transparent # d00 # d00;/* transparent upper-right border, with a dark red border at the bottom left to form a small triangle */
/***** Start positioning. The triangle is positioned based on the menu item when the mouse is hovering *****/
Position: absolute;
Top: 0; right:-0.4em;/* click the arrow in the upper-right corner of the menu item box */
}
The triangle here uses absolute positioning. No matter how the menu item size and position change, the triangle is always positioned in the upper right corner of menu item a, which has wide adaptability.
In addition, do not forget that menu item a has been positioned and moved up when hovering. 0.4em) and the triangle is included in menu item a. Therefore, you can use menu item a for absolute positioning. This is very important. Let's review css's description about absolute positioning:The element box is relative to the most recent located ancestor element that contains it.Offset a certain distance. The space occupied by the element in the normal Document Stream will be closed, as if the element did not exist. After the element is located, a block-level box is generated, regardless of the type of box it generated in the normal stream.
Okay. Run it.
650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/111P43227-5.jpg "title =" menu3.jpg "/>
Succeeded. No images, no JS, no special skills. We use pure html + css to fully control the attributes of html elements, and use the least elements and the most concise code to implement the navigation bar featuring Sina.
This article from the "Liu gongwuyu" blog, please be sure to keep this source http://liuzhenyao.blog.51cto.com/7642920/1292005
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
