创建“导航面包屑”

我想知道我如何能够获得这与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

创建“导航面包屑”

回答

相关问题