CSS Taobao navigation code collection (with usage tips)

May 04, 2021 CSS

1. Let someone else's navigation bar CSS code be the method you use

3. Fully transparent navigation CSS code

4. Taobao Tmall Navigation CSS Style Code Online Generation Tool

5. Taobao store navigation CSS code using modification techniques

Today, Taobao supported the Chinese e-commerce half of the sky, Taobao stores like hemp, Taobao competition is becoming more and more fierce, in addition to the price war is to rely on exquisite store decoration to attract visitors to stop. T aobao navigation CSS code believe that many store operators know, but how to use CSS code to make exquisite Taobao navigation is not clear to many people, navigation for buyers refers to street lights, so that a look can be out of the importance of navigation. S ometimes see other people's shop navigation bar good personality, but also want to do one, then how to operate? Then let's organize some super good Taobao css navigation code and use methods and techniques.

Let someone else's navigation bar CSS code be the method you use

1. First find someone else's shop home page, right click on the navigation bar blank space, view the source code.

CSS Taobao navigation code collection (with usage tips)

2. Open the code you'll see later

If you don't find this logo, it's decorated with a sdk premium template, so there's no code.

Find these identifiers, and here's the CSS file we're looking for. H ere's the CSS file we're looking for. Follow us to open it with a browser, or download a notepad program, double-click to open it and you'll see the code.

CSS Taobao navigation code collection (with usage tips)

3. Open the file and click "Replace"

CSS Taobao navigation code collection (with usage tips)

4. Then copy the following code #page#content.tshop-pbsm-shop-nav-ch

Paste into the find content box, replace with the box behind do not fill in, just click the "Replace All" button. So, this CSS code can be used for us.

5. Finally, we put W hen the CSS code is ready, paste it into your store, only to find that the classification has no background color. T he solution is not difficult, we just need to set the header background.

Taobao CSS navigation reference code

The following text can be copied and used together without affecting the effect of use

/? Navigation bar background color / .skin-box-bd .menu-list(background: none repeat scroll 0 0 #00ad08; }
//Home/Shop Dynamic Background Colors/.skin-box-bd .menu-list .link.background: none repeat scroll 0 0 #00ad08; }
//home/store dynamic right-hand line/ .skin-box-bd .menu-list .menu (border-right:1px #006205 solid; }
//Home/Shop Dynamic Text Colors/ .skin-box-bd .menu-list .menu .title.color:#ff0000.
//All classified background colors/.all-cats .link:none repeat scroll 0 0 #00ad08; }
//all-category right-hand line/.all-cats.link(border-right:1px#006205 solid; }
//All classified text colors/.skin-box-bd .all-cats .title(color: #ff0000)

All classified backgrounds can be used in pictures: .skin-box-bd .link.background:url (picture link); }
Modify the background color background of the entire navigation: .skin-box-bd .menu-list:background:#000000; }
Modify a small piece left on the far right: .skin-box-bd(background: #000000; }
The code modified into the picture is as follows: .skin-box-bd.background:url (picture link); }
Out of words: .skin-box-bd .menu-list .menu-selected .link.background: #000000; }
Word: .skin-box-bd .menu-list .menu-selected .link .title.background:#000000; }
Outside the word, in the word, all!
1. Navigate the background color code (excluding "all categories") as follows: .menu-list .link(background: #000000; }
The Navigation Bar Text (Excluding "All Categories") is as enoughows: .Menu-list .menu .title (color: # color code; f ont-size: font-size px; }
The background color code for "All Categories" is as follows: .all-cats .link(background:#000000; }
The text code for "all categories" is as enoughows: .all-cats .link .title: color: # color code; f ont-size: font-size px; }
The latest code solves the situation where the right side of the navigation disappears after the font is changed! T he code is as follows: .all-cats .link .title-font-size: font-size: font size px; } .all-cats .link {background:#3BAFFF; m argin:0; p adding:0px 3px; }
The second-level classification text code is as follows: .popup-content .cats-tree .fst-cat .cat-name(font-size: font-size: font-size: font-size px; c Olor: # color code; f ont-weight:bold/bolder/normal; }
The secondary classification background code is as follows: .popup-content:#000000; }
The three-level classification text code (excluding the "all babies" category) is as follows.popup-content.cats-tree.snd-pop-inner-font-size: font-size: font-size px; c Olor: # color code; f ont-weight:bold/bolder/normal; }
The three-level classification text code (including the "All Baby" category font size) does not change the font color, and we will continue to refine the code! T he following .popup-content .cats-tree .snd-pop-inner-font-size: font-size: font-size; c Olor: # color;}
Three-level classification background code: .popup-content .cats-tree .snd-pop-inner(background:#000000; }
The first-level navigation classification (excluding the "all babies" category) divider color code is as follows: .menu-list .border-color: #000000; }
Level 1 navigation "all babes" classification divider color code is as follows: .all-cats .link -border-color: #000000; }
The Width Modification Code of The First-Level Navigation Classification Is as Follows: .Menu-List .Menu.Background: # color; m argin:0; p adding: 0px increased width px; }
The mouse slips over the first level of classification navigation text to transform the background color code as follows: .menu-list .menu-hover.link:background:#000000; }
The mouse slips over the first-level classification navigation text to change the color code as follows: .menu-list .menu-hover .link .title:#FFFFFF; }
Mouse slips over the secondary classification navigation text to change the background color code as follows: .popup-content .cat-tree .cat-hd-hover.background:#000000; }
The mouse slips over the secondary classification navigation text to change the color code as follows: .skin-box-bd .popup-content.cats-tree .cat-hd-hover .cat-name.color:#ff0000; }
The mouse slips over the three-level classification navigation text to change the background color code as follows: .popup-content .cats-tree .snd-cat-hd-hover:#000000; }
The spatial code added to the secondary classification is as follows: .popup-content .cats-tree-margin:0 0 50px 0; }
Modify the "all babies" right small icon code as follows: .all-cats .link .popup-icon (background:url (picture connection); }
Modify the icon code on the right side of the secondary classification as follows (there are three categories to display): .popup-content .cats-tree .fst-cat-icon-background:url (picture connection); }
Add a small white code before the third-level classification as follows: .popup-content .cats-tree .snd-cat-icon-display:block; h eight:3px; w idth:3px; }

Fully transparent navigation CSS code

Many times in the decoration process, the need for Taobao store navigation to become transparent, do not want to be blocked by the color of the system navigation, so that we can see their own set of store background map;


      font-size:15px;


      font-weight:bold;

This is font size and bold, respectively.

.skin-box-bd{background:none;border:none;}
.menu-list{background:none;}
.link{background:none;border:none;}
.menu{background:none;}
.all-cats{background:none;}
.skin-box-bd .all-cats .link{border:none;}
.skin-box-bd .menu-list .menu{border:none;}
.menu-list .menu .title{color:#000000;font-size:15px;font-weight:bold;}
.all-cats .link .title{color:#000000;font-size:15px;font-weight:bold;}
.skin-box-bd .menu-list .menu-selected .link{background:none;}
.skin-box-bd .menu-list .menu-selected .link .title{background:none;}

CSS Taobao navigation code collection (with usage tips)

Table of contents

Let someone else's navigation bar CSS code be the method you use

Taobao CSS navigation reference code

Fully transparent navigation CSS code

Taobao Tmall Navigation CSS Style Code Online Generation Tool

Taobao store navigation CSS code using modification techniques

Cookie Consent