制作面包屑，首先我肯要先知道什么是面包屑导航，其原理是什么。
面包屑导航这个概念来自于一个童话故事《汉赛尔和格莱特》，他们兄妹俩在穿过森林时不小心迷路了，但是却发现在沿途走过的地方都撒下面包屑，这些面包屑可以来帮助他们找到回家的路。
所以面包屑导航的用意就是告知用户所处的当前网页的位置，方便用户可以通过该导航快速返回上一页。
1.先写一个树形菜单的大概样式
当我们点击树形菜单时，导航栏会出现一个面包屑（说明在树形菜单的点击事件里，每点击一次都会渲染一个）
<div class="item"> <div class="head"> <div style="display: flex;"> <li class="img"> <img src="./img/房子 (5).png" alt="" /> <p>首页</p> </li> <img style="width: 15px; height: 15px;" src="./img/箭头 下 down (1).png" alt="" /> </div> <div> <li class="img"> <img src="./img/房子 (5).png" alt="" /> <p>首页2</p> </li> </div> </div> <div class="head"> <div style="display: flex;"> <li class="img"> <img src="./img/房子 (5).png" alt="" /> <p>首页</p> </li> <img style="width: 15px; height: 15px;" src="./img/箭头 下 down (1).png" alt="" /> </div> <div> <li class="img"> <img src="./img/房子 (5).png" alt="" /> <p>首页2</p> </li> <li class="img"> <img src="./img/房子 (5).png" alt="" /> <p>首页3</p> </li> </div> </div> <div class="head"> <div style="display: flex; "> <li class="img"> <img src="./img/房子 (5).png" alt="" /> <p>首页</p> </li> <img style="width: 15px; height: 15px;" src="./img/箭头 下 down (1).png" alt="" /> </div> <div> <li class="img"> <img src="./img/房子 (5).png" alt="" /> <p>首页2</p> </li> <li class="img"> <img src="./img/房子 (5).png" alt="" /> <p>首页3</p> </li> </div> </div> </div>
2.大概写一个面包屑的结构
<!-- 面包屑 --> <div class="top_two"> <div class="bread" onmouseover="breadder()" onmouseleave="breadders()"> <div class="breads"> <img id="home" src="./img/房子 (3).png" alt="" /> <p id="shouye">首页</p> <div class="pop"> <img id="pops" onmouseover="cheap()" onmouseleave="cheaps()" src="./img/叉号.png" alt="" /> </div> </div> <div class="bind"></div> </div> <img id="image" src="./img/应用中心.png" alt="" /> </div>
我的树形菜单和面包屑的数据是同一个数据,点击树形菜单时会渲染一块面包屑，但是再次点击时不能重复渲染把，所以这就需要我们“去重”。对比面包屑数据里是否有相同的，有的话删掉，没有就渲染。
<script> // 给一个空数组（用途：将创建的对象尾部添加到空数组里） let boo = []; let aoo = []; // 点击渲染事件（传的是title和路径） // path是名字（name），name是title，puth是带/的路径 function header(path, name, puth) { console.log(path); console.log(name); // let len = boo.length; console.log(boo.length); // 判断数组内查找名字的下标，当找负一时（也就是没有这个名字，就渲染上去） // 否则（有名字的时候）没有操作 if (boo.indexOf(path) == -1) { let arr = ""; // 渲染的面包屑块儿 arr += ` <div class="bread" onmouseover="one()" onmouseleave="two()"> <div class="breads"> <img id="home" src="./img/房子 (4).png" alt="" /> <p id="shouye">${path}</p> <div class="pop"> <img src="./img/叉号.png"alt="" /> </div> </div> <span class="bind"></span> </div> `; document.getElementsByClassName('top_two')[0].innerHTML += arr; } // for循环boo数组的长度 for (let i = 0; i < boo.length; i++) { for (let j = 0; j < boo.length; j++) { // 判断当boo里找到有相同的名字时 if (boo[i] == boo[j]) { // 就剪切掉一个 boo.splice(j, 1); j--; } } } </script>
面包屑的作用
- 便于用户了解当前页面的所处位置，以及当前页面在整个网站中的所处位置
- 便于用户了解网站的层次结构，提高用户的体验
- 降低跳出率，用户通过面包屑导航可以看到自己感兴趣的内容从而吸引用户留在网站中继续进行浏览，降低网站的跳出率
- 有利于网站内链的建设，促进优化排名
以上呢是一个大概的，具体功能的实现不仅仅只是这一点，我写的不全面，请自己思考把。
