花裡胡哨的頁面佈局 - 導航欄
阿新 • • 發佈:2021-09-15
1 導航欄樣式
最終實現樣式:
通過一組ul,li標籤實現導航欄
<div class="sear-list"> <ul> <li class="current"><span>全部搜尋</span></li> <li><span>圖書</span></li> <li><span>期刊論文</span></li> <li><span>學位論文</span></li> <li><span>標準</span></li> <li><span>紙本館藏</span></li> <li><span>外文資源發現</span></li> <li><span>資料庫導航</span></li> </ul> </div>
對應樣式為:
/* reset */ *{ padding: 0; margin: 0; box-sizing: border-box; } ul,li{ list-style: none; } /* 導航欄樣式 -start */ .sear-list{ width: 1000px; height: 60px; background-color: #ccc; padding: 20px 0 0 10px; margin: 0 auto; } /*清除浮動*/ .sear-list ul::after{ content: ''; display: block; clear: both; } .sear-list ul li{ min-width: 55px; float: left; padding: 0 10px; margin: 0 11px; line-height: 30px; height: 30px; background-color: #fff; text-align: center; position: relative; cursor: pointer; } /* 通過偽元素新增新增三角形 */ .sear-list ul li::before{ content: ''; display: inline-block; border-width: 0 0 30px 20px; border-color: #fff; border-left-color: transparent !important; border-style: solid; position: absolute; left: -20px; } .sear-list ul li::after{ content: ''; display: inline-block; border-width: 30px 20px 0 0; border-color: #fff; border-right-color: transparent !important; border-style: solid; position: absolute; right: -20px; } .current{ background-color: red !important; color: #fff; } .current::before,.current::after{ border-color: red !important; } /* 下方三角形 */ .current span::after{ content: ''; display: inline-block; border-top: 6px solid red; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; bottom: -6px; left: 50%; transform: translateX(-6px); }
通過jQuery實現導航欄的點選效果,首先需要引入jQuery庫:
$(document).ready(function (){// ready 事件 $(".sear-list ul li").each(function(index){//遍歷物件 $(this).click(function(){//點選觸發事件 $(".sear-list ul li").removeClass("current");//刪除當前元素的樣式 $(".sear-list ul li").eq(index).addClass("current");//添加當前元素的樣式 }); }); });