技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

非常受歡迎好看的CSS3水平導航菜單(含二級菜單)

作者:admin    時間:2023-5-11 23:15:31    瀏覽:

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

效果圖

 非常受歡迎常見的CSS3水平導航菜單(含二級菜單)

demodownload

示例介紹

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

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

HTML代碼

下面是示例導航的HTML代碼結構。

<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">
      <!-- 二級菜單 -->
      <dd> <a href="javascript:;">二級菜單</a> </dd>
      <dd> <a href="javascript:;">二級菜單</a> </dd>
      <dd> <a href="javascript:;">二級菜單</a> </dd>
      <dd> <a href="javascript:;">二級菜單</a> </dd>
      <dd> <a href="javascript:;">二級菜單</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:;">個人中心</a> </li>
  <li class="layui-nav-item layui-nav-item-a"> <a class="" target="_parent" href="javascript:;">登錄 / 注冊</a> </li>
</ul>

ul是導航盒子，其class屬性值為layui-nav。

li為菜單列舉項目，其class屬性值為layui-nav-item。

當某主菜單有二級菜單時，該li的class屬性值為“layui-nav-item layui-this”。二級菜單的容器標簽為dl，其class屬性值為layui-nav-child，二級菜單列舉項是dd標簽。

CSS

該示例包含一個CSS文件：layui.css。

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

雖然只有一個CSS文件，不過其代碼相當豐富，導航所有樣式設計代碼都在這一個文件里。

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

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

下面我們看看導航的主要樣式代碼。

.layui-nav 設置導航欄位置、背景顏色、字體顏色、邊框等樣式。

.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 設置導航欄位置、背景顏色、字體顏色、邊框等樣式

.layui-nav-item 設置菜單列舉項屬性的樣式：位置、顯示方式、行高等，

.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-item 設置菜單列舉項屬性的樣式 

.layui-nav-more 是設置三角形樣式。

.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);
}

 類 layui-nav-more 設置三角形樣式

JavaScript

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

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

JavaScript代碼如下：

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

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

 modules目錄下兩個文件不能少：element.js和jquery.js

總結

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

相關文章

x