創建「導航麪包屑」

我想知道我如何能夠獲得這與CSS/CSS3和HTML。如何才能做到這一點？創建「導航麪包屑」

正如你所看到的，我指出了3導航痕跡。

2011-11-29 oliverbj

您需要更多的信息來獲得任何有用的回覆。你是否已經有了一個跟蹤用戶訪問過的鏈接的機制？如果沒有，你是問這個問題還是僅僅問問如何設計一個麪包屑顯示器？ – arb

只供顯示。有沒有這樣的「機制」？你知道嗎？ – oliverbj

<!DOCTYPE html> 
<html> 

<head> 

    <style type="text/css"> 
     html{ 
      background:#222; 
      font-size:12px; 
      font-family:Arial; 
     } 

     ul#breadcrumbs{   
      list-style:none; 
      /* optional */ 
      margin:100px; 
      padding:10px 2px 10px 10px; 
      background:#000; 
      width:295px; 
      height:30px; 
      border-radius:5px; 
      border:1px solid #222; 
      -moz-box-shadow:0 0 3px 0 #000; 
     } 
     ul#breadcrumbs li{ 
      float:left; 
      background:#93ce68 url(bg.png)no-repeat right; 
      height:30px; 
      padding:0 23px 0 10px; 
      text-align:center; 
      text-decoration:none; 
      color:#000; 
      line-height:32px; 
     } 
     ul#breadcrumbs li.active{ 
      background:url(bg.png)no-repeat right; 
      color:#000; 
     } 
     ul#breadcrumbs li a{ 
      display:block; 
      text-decoration:none; 
      color:#fff; 
      line-height:32px; 
      text-shadow:0 0 2px #222; 
     } 
     ul#breadcrumbs li a:hover{ 
      color:#a2ff00; 
     } 

    </style> 

</head> 

<body> 

    <ul id="breadcrumbs"> 
     <li><a href="">Home</a></li> 
     <li><a href="">Page1</a></li> 
     <li><a href="">Page2</a></li> 
     <li class="active">About Us</li> 
    </ul> 



</body> 
</html>

在HTML的根

enter image description here

保存圖像，並使用clearfix用於UL到結算裏的浮點值。如果您使用CSS邊框技術，則可能會在某些瀏覽器中渲染模糊的邊框。希望它能解決您的查詢。

來源

2011-11-29 18:28:33

只需要這個我自己...所有我發現的例子有很多::before & ::after僞元素。但我想嘗試新的遮蔽技術。沒有發現任何，所以我砍死我一起這樣的：

注：這不是最漂亮的一個，我已經做了，但它必須解決使用clip-path它的實驗性，所以不要指望它所需的結構部分爲此工作。我只在Chrome中測試了這個

一個真棒工具，幫助我做這clippy
就不得不修改一些點（X，Y）從右側數學計算 - 箭頭頭部的寬度>

/* Make the hole background black (since it's hard to simulate a border around the arrow head)*/ 
 
#breadcrumb { 
 
    background: black; 
 
    display: inline-block; 
 
    padding: 1px; 
 
    padding-right: 18px; 
 
    -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); 
 
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); 
 
} 
 

 
#breadcrumb a { 
 
    display: inline-block; 
 
    background: gray; 
 
    padding: 5px 30px 5px 30px; 
 
    position: relative; 
 
    text-decoration: none; 
 
    -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%); 
 
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%); 
 
    margin-right: -17px; 
 
} 
 

 
/* Just to show that even around the arrow head, the mouse pointer is at the correct link */ 
 
a:hover { 
 
    color: red; 
 
} 
 

 
/* first link should not have anything cliped on the left side */ 
 
#breadcrumb a:first-child { 
 
    -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); 
 
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); 
 
    padding-left: 20px; 
 
}

<nav id="breadcrumb"> 
 
    <a href="#1">Home</a> 
 
    <a href="#2">Contact</a> 
 
    <a href="#3">Some extra long name</a> 
 
    <a href="#4">Email</a> 
 
</nav>

來源

2016-10-23 18:16:05 Endless

創建「導航麪包屑」

回答

相關問題