Full sliding menu in the click area (zz)

ArticleDirectory

• Original code:
• Improved code:

Recently, according to the sliding doors of CSS and Part II of a list apart, Stu Nichols This article revised the sliding door menu and published the 100% clickable sliding doors Makes up for the blind spots of 9 pixels.

Click the blind area icon. It is obvious that there is no hand icon on the edge of the above menu.

Original Code :

1. # Nav Li {
2. Float: left;
3. Background: URL ("left_both.gif") No-repeat left top;
4. Margin: 0;
5. Padding: 0 0 0 9px;
6. Border-bottom: 1px solid #765;
7. }
8. # Nav {
9. Float: left;
10. Display: block;
11. Background: URL ("right_both.gif") No-repeat right top;
12. Padding: 5px 15px 4px 6px;
13. Text-Decoration: none;
14. Font-weight: bold;
15. Color: #765;
16. }

Improved code:

1. # Nav Li {
2. Float: left;
3. Background: URL ("right_both.gif") No-repeat right top;
4. Margin: 0 0 0 9px;
5. Padding: 0;
6. }
7. # Nav {
8. Float: left;
9. Display: block;
10. Position: relative;
11. Left:-9px;
12. Margin-Right:-9px;
13. Width:. 1em;
14. Background: URL ("left_both.gif") No-repeat left top;
15. Padding: 5px 20px;
16. Text-Decoration: none;
17. Font-weight: bold;
18. Color: #765;
19. }

By comparing the above code, we can see that the left and right background images are switched and the relative positioning is adopted. The list project and its link use the positive and negative boundary method. The author has ie5.x, IE6, IE7, firefox and opera are successfully debugged.

On the demo page, I simplified the code for the current location and switched to class selectors.