自定義組件--nav菜單

做這個東西的出發點很簡單，就是把做過的東西，封裝起來，寫個博客，記錄一下，以後項目需要用就可以直接拿來用，做法很簡單，不喜歡的勿噴，覺得有用的可以拿去試試。

直接上代碼

html部分：

<div class="ul">
    <ul>
        <li><a href="javascript:void(0)">首頁</a></li>
        <li><a href="javascript:void(0)">產品中心</a></li>
        <li><a href="javascript:void(0)">服務中心</a></li>
        <li><a href="javascript:void(0)">聯繫我們</a></li>
        <li><a href="javascript:void(0)">集團信息</a></li>
    </ul>
</div>

css樣式部分：

.ul{
            width: 700px;
            height: 80px;
            margin:20px auto;
            border-top:1px solid red;
            border-bottom:1px solid red;
        }
        .ul ul{
            width: 100%;
            height: 100%;
        }
        .ul ul li{
            width: 18%;
            height: 80px;
            float: left;
            list-style: none;
            padding: 0 1%;
        }

        .ul ul li a{
            display: block;
            height: 100%;
            color: #333;
            text-align: center;
            line-height: 80px;
            text-decoration: none;
            position: relative;
        }
        .ul ul li a:before{
            content: "";
            width: 0;
            height: 0;
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            border-bottom: 12px solid red;
            position: absolute;
            left: 18%;
            bottom: 0;
            opacity: 0;
        }
        .ul ul li a:after{
            content: "";
            width: 0;
            height: 0;
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            border-top: 12px solid red;
            position: absolute;
            left: 18%;
            top: 0;
            opacity: 0;
        }
        .ul ul li:hover a:before{
            opacity: 1;
        }
        .ul ul li:hover a:after{
            opacity: 1;
        }

效果圖：

默認狀態：

選中狀態：

到此結束，簡單粗暴，通俗易懂！