CSS2.0 Make crumbs

Crumbs like this We used to do this work with background pictures , But until about 2 I saw it on Sina Weibo a week ago css3.0 Make crumbs like this But at the moment IE6-8 Does not support css3.0 There's only a standard tourist ( Like foxes Google and other support ). Due to the previous summary of an article on "CSS Achieve bubble box effect " The article One of them is about how to realize the lie of small triangle   So I feel that the small triangle can just simulate this work , So I tried to make a . Let's take a look at the effect of crumbs ! Here's the picture :

As shown above :

Ideas :

1. Page has 3 individual li li Nested tags have 2 A label Simulate respectively 2 A small triangle The first one is the one with a white background The second is the little triangle that overlaps the gray background .

HTML The code can be written as follows :

<div class="box">
<ul>
<li>gggg<em></em><i></i></li>
<li class="current">gggg<em></em><i></i></li>
<li>gggg<em></em><i></i></li>
</ul>
</div>

Now let's put the effect of this example first Let's review what we wrote before "css Achieve bubble box effect " How to realize a small triangle in !

For example, the page has the following HTML Code :

<div class="demo"></div>

Now I want to use css Realize a small triangle What should we do now ? First, no hurry. take your time Step by step split .

1. First let's take a look css border attribute , When we put a div border-color When set to different colors , You can see that the four sides are rectangular . as follows css Code

.demo {width:50px;height:50px;border-width:50px;border-style:solid;border-color:#CCC #00F #933 #0C9;}

As shown in the figure below :

2.  If we continue to div Set the width and height of 0 Words Then the four sides will be triangles .

As shown in the figure below :

however IE6 Next The top and bottom are triangles Right and left are rectangles : as follows :

Through experiments, we found that when div Of font-size and line-height All set to 0 When ,div On the four sides of the road IE6 You can form perfect triangles in all directions : The code is as follows

.demo{width:; height:; border-width:50px; border-style:solid; border-color:#CCC #00F #933 #0C9;line-height:;font-size:;}

3.   It's clear that we just need a triangle , Then we just need to set the other three colors to be transparent or the same as the background color to make a triangle , Set the other three colors to transparent , namely color The value of is transparent, If the other three colors are the same as the page background , Although only one triangle can be seen visually , But once the background color changes , The color of the other three sides will change as well . The following code :

.demo{width:; height:; border-width:50px; border-style:solid; border-color:#CCC transparent transparent transparent;line-height:;font-size:;}

But in IE6 Next There's another problem IE6 Transparency is not supported transparent as follows :

But experiments have shown that border-style Set to dashed after ,IE6 The other three sides will be transparent ! as follows :

Now the triangle is finished !

Now how to make the small triangle of bread crumbs ?

1. First of all, let's see HTML The structure is as follows :

<div class="box">
<ul>
<li>gggg<em></em><i></i></li>
<li class="current">gggg<em></em><i></i></li>
<li>gggg<em></em><i></i></li>
</ul>
</div>

So under normal circumstances Let's add the following css style

*{ margin:; padding:;}
ul,li{list-style:none;}
.box{position:relative;margin:100px auto;background:#ccc;width:600px;height:32px;line-height:32px;overflow:hidden;}
.box li{float:left;width:200px;text-align:center;position:relative;z-index:;}

The following effects can be achieved :

2. Our problem now is I want to add a small triangle to the right of each column The background is white Over the gray background So we can em Write on labels css style How to make a small triangle So I won't go into that . The code is as follows :

.box li em{width:;height:;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;border-width:24px 0 24px 24px;position:absolute;right:-24px;top:-8px;line-height:;font-size:;}

add css After code The renderings are as follows :

Ann: under normal circumstances Because I add a small triangle on the right side of each column And used overflow:hidden So the last little triangle is gone , But in IE6,7 Next The last one also has a little triangle So I'm in the outermost container

.box{position:relative}; Added a relative positioning So it's compatible with IE6+ firefox Google, etc .

3. Now it's done as shown above We are far from the effect we want So we still need to be in li On the label We need to make a little triangle The background is gray Cover it up CSS The code is as follows :

.box li i{width:;height:;border-color:transparent transparent transparent #ccc;border-style:dashed dashed dashed solid;border-width:16px 0 16px 16px;position:absolute;right:-16px;top:;line-height:;font-size:;}

4. But because there is currently a selected state So we have to put current Style plus as follows :

.box li.current{background:#933;z-index:;}
.box li.current i{border-color:transparent transparent transparent #933;}

Now it's all done The effect is as follows :

Now put all the code together :

HTML The code is as follows :

<div class="box">
<ul>
<li>gggg<em></em><i></i></li>
<li class="current">gggg<em></em><i></i></li>
<li>gggg<em></em><i></i></li>
</ul>
</div>

CSS The code is as follows :

*{ margin:; padding:;}
ul,li{list-style:none;}
.box{position:relative;margin:100px auto;background:#ccc;width:600px;height:32px;line-height:32px;overflow:hidden;}
.box li{float:left;width:200px;text-align:center;position:relative;z-index:;}
.box li em{width:;height:;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;border-width:24px 0 24px 24px;position:absolute;right:-24px;top:-8px;line-height:;font-size:;}
.box li i{width:;height:;border-color:transparent transparent transparent #ccc;border-style:dashed dashed dashed solid;border-width:16px 0 16px 16px;position:absolute;right:-16px;top:;line-height:;font-size:;}
.box li.current{background:#933;z-index:;}
.box li.current i{border-color:transparent transparent transparent #933;}

Page completed If there are shortcomings Please leave a message ! thank you !!

CSS2.0 More articles on bread crumbs

  1. yii2.0 The use of bread crumbs and the use of Chinese

    ( notes : Oneself yii2.0 Advanced applications, for example ) After the crumbs are defined in the layout , Just make it in the view , But it's in English . One . Breadcrumbs are defined in the layout backend/views/layout/main.php: use back ...

  2. vue 2.0 + elementUI Achieve breadcrumb navigation bar

    Main.js 9 A responsive breadcrumb navigation and step-by-step navigation indicator UI Design var routeList = []; router.beforeEach((to, from, next) => { var in ...

  3. yii2.0 The use of crumbs

    yii2 The crumbs in the bread are yii2 The little parts that come with you , The navigation bar of this website should be finished with bread crumbs Examples are as follows , Need to introduce yii\widgets\Breadcrumbs echo Breadcrumbs::widge ...

  4. Bootstrap &lt; Foundation 18 &gt; Breadcrumb navigation (Breadcrumbs)

    Breadcrumb navigation (Breadcrumbs) It's a display mode based on the hierarchical information of the website . Take blogs for example , Breadcrumb navigation shows the release date . Category or label . They represent the position of the current page within the navigation hierarchy . Bootstrap Breadcrumbs in the navigation ( ...

  5. Menu navigation /URHere/ Bread crumbs , adopt CSS Medium content Concise expression code

    For example, we need to write a menu navigation /URHere/ Bread crumbs , Such as : home page > Personal center > Change Password Code : <ul> <li><a href="javascri ...

  6. Fall in love with MVC3 series ~ Develop a site map ( It's commonly known as bread crumbs )

    Back to directory It used to be webform The age of controls has come SiteMap This thing , And MVC After the times , We also hope to have such a thing , It provides us with a lot of convenience , For example, it is very convenient to realize the content modification of page navigation , Page navigation style skin change, etc . I ...

  7. Learn to use CSS3 Make the breadcrumb navigation effect of the website

    As one of the most important forms of navigation display , Breadcrumb navigation allows users to know more about the hierarchy of their page , So that they can easily navigate to the previous page . In this tutorial , You will learn how to use  CSS3  Technology to create your own breadcrumb navigation effect . Effect demonstration ...

  8. Bootstrap ( Navigation 、 label 、 Breadcrumb navigation )

    Navigation Bootstrap The navigation available in has similar tags , Use base class .nav start , This is a similar part . Changing the modifier class can change the style . <!DOCTYPE html> <html> <head& ...

  9. WordPress Add breadcrumb navigation

    Bread crumbs , It's something like this : home page > Company profile > The development history Show the tree structure of the website , And let visitors know where they are at any time , It's easy to go back up a few levels . Add the following code to the functions.php ...

Random recommendation

  1. ajax Pass on JSON Object parameters

    https://msdn.microsoft.com/zh-cn/library/cc836466(v=vs.94).aspx https://msdn.microsoft.com/zh-cn/lib ...

  2. Nutch One of the main class code analysis (Injector)

    Injector(org.apache.nutch.crawl.Injector): Input : The directory where the seed list file is located Output :crawldb( preservation URL And its corresponding information database ) effect : Take the seed URL Injection into c ...

  3. Json Object serialization and deserialization

    If the background parameter number object , It needs to be introduced at the front desk : JS Code : // establish JS object var CUTTING_TABLET_MO = new Object(); CUTTING_TABLET_MO.CUTTING_T ...

  4. China's first SaaS The Android version of the cloud warning platform based on the mode APP go online

    At the end of January this year , The first one in China SaaS Cloud warning platform of mode OneAlert Officially released iOS edition App client , This morning, , Android version App The client is also officially online ! Every Android user , No computer , All can be tracked by mobile phone ...

  5. IIS Support to download .config Suffix file

    Here we use .config give an example , Same for other types of documents . Set up MIME Click add on the right , File extension fill in .config,MIME Type fill in application/octet-stream. Or add .*, Will all unlisted files ...

  6. Windows 8 Example tutorial series - Data binding basic instance

    original text :Windows 8 Example tutorial series - Data binding basic instance Data binding is WPF,Silverlight as well as Windows Phone The most commonly used development technology in application development , Based on XAML Of Windows Stor ...

  7. UVa 507 - Jill Rides Again

    The main idea of the topic : The maximum sum subsequence problem . Since the subsequence with the largest sum has the following properties : The first term is not negative , And add up from the first item , There won't be a negative sum in the middle , Because once there is a negative number, we can discard the front part to get a larger subsequence and , This will create contradictions . ...

  8. mysql 5.7 Post version time datetime The default is 0000-00-00 00:00:00 problem

    CREATE TABLE `test_user` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `name` char(25) DEFAULT '' ...

  9. Codeforces 1016G Appropriate Team number theory FWT

    Link to the original text https://www.cnblogs.com/zhouzhendong/p/CF1016G.html Subject portal - CF1016G The question Given $n,x,y$ , And one containing $n$ Yuan ...

  10. Student and department management app- Simple design of product function and interface

    Student and department management app- Simple design of product function and interface 1. Student number of paired members I :********* bosses :*******10 2. Demand analysis (NABCD Model ) 2.1 N- demand At the beginning of the school, each department occupies the majority of the school's youth ...