卡卡網(wǎng)

今天介紹一款非常受歡迎的CSS3水平導(dǎo)航菜單，此導(dǎo)航包含二級(jí)菜單，具有鼠標(biāo)懸停時(shí)顯示的過渡動(dòng)畫效果，看起來令人舒服。此外，在設(shè)計(jì)上它也用上了圖標(biāo)字體（iconfont），讓菜單名稱的顯示更加飽滿。

效果圖

demodownload

示例介紹

該實(shí)例使用CSS3實(shí)現(xiàn)，主要是用layui框架搭建。

• 導(dǎo)航背景為淺黑色，當(dāng)鼠標(biāo)移到菜單上時(shí)，該菜單背景變成深黑色。
• 菜單背景顏色變化采用過渡動(dòng)畫效果，黑色背景塊是隨鼠標(biāo)移動(dòng)過來，而不是在鼠標(biāo)懸停時(shí)瞬間出現(xiàn)。
• 主菜單若有二級(jí)菜單，那么它右側(cè)有一個(gè)向下的三角形。
  當(dāng)鼠標(biāo)移到該菜單時(shí)，二級(jí)菜單會(huì)漸變顯示出來，這時(shí)三角形方向改為向上。

HTML代碼

下面是示例導(dǎo)航的HTML代碼結(jié)構(gòu)。

<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"> <a class="layui-nav-item-logo" href="javascript:;">LOGO</a> </li>
  <li class="layui-nav-item layui-this"> <a href="javascript:;">首頁</a>
    <dl class="layui-nav-child">
      <!-- 二級(jí)菜單 -->
      <dd> <a href="javascript:;">二級(jí)菜單</a> </dd>
      <dd> <a href="javascript:;">二級(jí)菜單</a> </dd>
      <dd> <a href="javascript:;">二級(jí)菜單</a> </dd>
      <dd> <a href="javascript:;">二級(jí)菜單</a> </dd>
      <dd> <a href="javascript:;">二級(jí)菜單</a> </dd>
    </dl>
  </li>
  <li class="layui-nav-item"> <a href="javascript:;">推薦</a> </li>
  <li class="layui-nav-item"> <a href="javascript:;">資訊</a> </li>
  <li class="layui-nav-item"> <a href="javascript:;">個(gè)人中心</a> </li>
  <li class="layui-nav-item layui-nav-item-a"> <a class="" target="_parent" href="javascript:;">登錄 / 注冊(cè)</a> </li>
</ul>

ul是導(dǎo)航盒子，其class屬性值為layui-nav。

li為菜單列舉項(xiàng)目，其class屬性值為layui-nav-item。

當(dāng)某主菜單有二級(jí)菜單時(shí)，該li的class屬性值為“layui-nav-item layui-this”。二級(jí)菜單的容器標(biāo)簽為dl，其class屬性值為layui-nav-child，二級(jí)菜單列舉項(xiàng)是dd標(biāo)簽。

CSS

該示例包含一個(gè)CSS文件：layui.css。

<link rel="stylesheet" href="layui/css/layui.css" />

雖然只有一個(gè)CSS文件，不過其代碼相當(dāng)豐富，導(dǎo)航所有樣式設(shè)計(jì)代碼都在這一個(gè)文件里。

layui.css還調(diào)用了iconfont圖標(biāo)字體：

@font-face {
  font-family: layui-icon;
  src: url(../font/iconfont.eot?v=250);
  src: url(../font/iconfont.eot?v=250#iefix)
   ...
}

下面我們看看導(dǎo)航的主要樣式代碼。

.layui-nav 設(shè)置導(dǎo)航欄位置、背景顏色、字體顏色、邊框等樣式。

.layui-nav {
  position: relative;
  background-color: #333333;
  color: #fff;
  border-radius: 2px;
  font-size: 0;
  box-sizing: border-box;
  text-align: center;
  align-items: auto;
}

.layui-nav-item 設(shè)置菜單列舉項(xiàng)屬性的樣式：位置、顯示方式、行高等，

.layui-nav .layui-nav-item {
  position: relative;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: middle;
  line-height: 99px;
  z-index: 1002;
}

.layui-nav-more 是設(shè)置三角形樣式。

.layui-nav .layui-nav-more {
  content: '';
  width: 0;
  height: 0;
  border-style: solid dashed dashed;
  border-color: #fff transparent transparent;
    border-top-color: rgb(255, 255, 255);
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
  -webkit-transition: all .2s;
  position: absolute;
  top: 50%;
  right: 3px;
  margin-top: -3px;
  border-width: 6px;
  border-top-color: rgba(255, 255, 255, .7);
}

JavaScript

本示例使用layui框架，因此要引用layui的js文件。

<script type="text/javascript" src="layui/layui.js"></script>

JavaScript代碼如下：

layui.use('element', function() {
  var $ = layui.jquery,
  element = layui.element;
});

該程序主要實(shí)現(xiàn)菜單項(xiàng)的切換功能，切換事件監(jiān)聽等。需要依賴element模塊，所以modules目錄下兩個(gè)文件不能少：element.js和jquery.js。

總結(jié)

本文介紹了非常受歡迎好看的CSS3水平導(dǎo)航菜單，該導(dǎo)航包含二級(jí)菜單，該導(dǎo)航使用layui框架搭建，所以需要引用一些JS和CSS文件，尤其是JS不能缺少modules目錄和該目錄里的兩個(gè)JS文件，否則鼠標(biāo)懸停和點(diǎn)擊事件無法觸發(fā)。可喜的是，小編把示例都打包好了，喜歡的朋友可以直接下載使用。

相關(guān)文章

• 一款簡易的CSS3側(cè)欄滑動(dòng)導(dǎo)航菜單
• 很漂亮的 Bootstrap 3 側(cè)欄滑動(dòng)導(dǎo)航菜單【演示/源碼下載】
• 一款漂亮的CSS3藍(lán)色垂直導(dǎo)航菜單
• 二級(jí)菜單水平方向排列的CSS3響應(yīng)式水平導(dǎo)航菜單
• 含二級(jí)下拉菜單的CSS3響應(yīng)式水平導(dǎo)航菜單
• CSS3 PC/移動(dòng)響應(yīng)式網(wǎng)頁水平導(dǎo)航菜單
• 常見的簡單大方的純CSS3水平下拉導(dǎo)航菜單
• CSS+JS實(shí)現(xiàn)可伸縮可折疊的左邊側(cè)欄項(xiàng)目導(dǎo)航菜單
• 純CSS實(shí)現(xiàn)二級(jí)導(dǎo)航菜單(具有伸縮過渡效果)
• 漂亮的左側(cè)二級(jí)導(dǎo)航菜單(伸縮式)【演示/源碼下載】

• 3款有下橫線平滑過渡效果的導(dǎo)航欄菜單
• 非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計(jì)
• 簡單實(shí)用的響應(yīng)式導(dǎo)航菜單設(shè)計(jì)
• CSS3實(shí)現(xiàn)的可縮進(jìn)的側(cè)欄導(dǎo)航菜單
• 漂亮的純CSS3水平導(dǎo)航菜單（有過渡動(dòng)畫效果）
• 可以展開和閉合子菜單的CSS3垂直導(dǎo)航菜單
• 又一個(gè)隨內(nèi)容滾動(dòng)而變化的側(cè)邊/左側(cè)目錄導(dǎo)航
• 側(cè)邊/左側(cè)目錄導(dǎo)航隨內(nèi)容滾動(dòng)而變化
• 純CSS：非常漂亮的左側(cè)導(dǎo)航/內(nèi)容目錄導(dǎo)航
• 簡單卻實(shí)用的CSS水平和垂直導(dǎo)航欄【演示/源碼】

標(biāo)簽: css3  二級(jí)導(dǎo)航菜單  導(dǎo)航欄  導(dǎo)航菜單  下拉菜單  二級(jí)菜單  菜單