2. 程式人生 > >CSS3實現二級選單

CSS3實現二級選單

阿新 • • 發佈：2019-02-11

今天看了一個demo，原demo雖說是CSS3實現，但其中也使用了js，再一個裡面的程式碼有些地方，我覺得還可以優化 ，所以自己就嘗試著用css3實現一下


我想說: 不論寫一個多麼炫酷的demo，z-index的值都最好不要超過2

下面是原始碼：

html部分

<div class="sidebar">
        <h1><i class="fa fa-bars push"></i>Animated <span class="color">Menu</span></h1>
        <ul>
            <li><a href="#"><i class="fa fa-dashboard push"></i>Dashboard<i class="fa fa-angle-right"></i></a><span class="hover"></span>
            </li>
            <li><a href="#"><i class="fa fa-user push"></i>Users<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                <ul class="sub-menu">
                    <li><a href="#">Add User<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                    <li><a href="#">Manage Users<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-cog push"></i>Settings<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                <ul class="sub-menu">
                    <li><a href="#">Dashboard Settings<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                    <li><a href="#">Profile Settings<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                    <li><a href="#">Manage Menu<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                    <li><a href="#">User Profiles<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-picture-o push"></i>appearance<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                <ul class="sub-menu">
                    <li><a href="#">Change Theme<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                    </li>
                    <li><a href="#">Theme Options<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-file push"></i>Information<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                <ul class="sub-menu">
                    <li><a href="#">Latest News<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                    </li>
                    <li><a href="#">Recent Articles<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-plane push"></i>Contact<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
        </ul>
    </div>


css部分

* {
            padding: 0;
            margin: 0;
            font-family: "microsoft yahei"
        }
        a {
            color: #000;
            text-decoration: none;
        }
        ul {
            list-style: none
        }
        i {
            margin-right: 15px;
        }
        html,body {
            background-color: #808080;
            height: 100%;
        }
        .sidebar {
            background: url(img/menu_pattern_1.png);
            width: 200px;
            height: 100%;
            border-right: 10px solid #d00355;
            color: #fff;
            padding-left: 40px;
        }
        .sidebar h1 {
            font-size: 16px;
            height: 80px;
            line-height: 80px;
        }
        .sidebar h1 .color {
            color: #d00355;
        }
        .sidebar ul li {
            padding: 8px;
        }
        .sidebar ul li a {
            color: #6B6363;
            position: relative;
            z-index: 1;
        }
        .sidebar ul li a .fa-angle-right {
            position: absolute;
            left: 160px;
            top: 4px;
        }
        .sidebar ul li .hover {
            display: block;
            position: absolute;
            width: 0;
            height: 37px;
            margin-top: -30px;
            margin-left: -8px;
            z-index: 0;
            background-color: #d00355;
            opacity: 0;
            transition: all .5s .1s;
        }
        .sidebar ul li .sub-menu {
            display: block;
            background: url(img/menu_pattern_1.png);
            position: absolute;
            margin-left: 192px;
            margin-top: -31px;
            width: 200px;
            opacity: 0;
        }
        .sidebar > ul > li:hover ul {
            opacity: 1;
        }
        .sidebar ul li:hover .hover {
            width: 200px;
            opacity: 1;
        }
        .sidebar > ul > li:hover a{
            color: #fff;
        }
1、在li標籤中有兩個元素，a標籤和span標籤，對於span標籤，我使用了絕對定位，當然這個絕對定位和平常使用的絕對定位元素是不一樣的，因為在li標籤上沒有相對定位這個屬性，這個小技巧是來源於一個部落格。而a標籤中的class為fa-angle-right使用了絕對定位，與span標籤是一種想法，a標籤上我也不想給它加上相對定位這個包袱。可是，問題出現了，無論我怎樣調整a標籤和span標籤的z-index，span標籤都會把a標籤給蓋住，去網上搜了一下解決辦法，於是給a加上了絕對定位這個屬性，於是可以達到我想要的效果了，所以我就把fa-angle-right的屬性改為了平常使用的絕對定位。。。真是不甘心呀。。

2、對於class為sub-menu的ul中的span，當我將滑鼠滑過li標籤時，li標籤會出現span的寬度由0到200的效果，但是class為sub-menu的ul中的span卻不會出現類似的效果，在測試時，如果將sub-menu的display屬性設定為block，那麼滑過相應的li時，sub-menu中的span會出現想要的效果，當時很是著急，想來想去，問題可能出現在display這個屬性上，雖然找不到具體的原因是什麼，只能找對應的解決辦法，有其他的屬性，可以讓一個元素從無變有嗎？有opcity屬性，於是將display的變化，改為了opcity的變化，想要的效果就出現了，用display，出現不了想要的效果，得原因是什麼？需要去查查。。。

PS：css未做字首的處理，所有的測試在最新版本的谷歌瀏覽器下進行

補充：

修改一下二級選單中的字型大小，

text-transform 屬性控制文字的大小寫，值none/capitalize/uppercase/lowercase/inherit

相關推薦

CSS3實現二級選單

今天看了一個demo，原demo雖說是CSS3實現，但其中也使用了js，再一個裡面的程式碼有些地方，我覺得還可以優化 ，所以自己就嘗試著用css3實現一下 我想說: 不論寫一個多麼炫酷的demo，z-index的值都最好不要超過2 下面是原始碼： html部分 <

簡單實現二級選單

這裡寫自定義目錄標題 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style&

vue實現二級選單的顯示或隱藏

場景：二級選單用html寫死的，而不是以通過data和v-for動態生成的 今天在實現的過程中，出現了問題。實現思路如下： data中設定menuIsShow為一個數組，陣列的元素為boolean值，表示一級選單是否顯示或隱藏。 在html中對應的二級選單元素上

css中用hover實現二級選單

css中用hover實現二級選單 在我們日常生活中，通常會看到下拉選單會有一些二級選單，下面就為大家講解一下如何生成二級選單。 第一步首先進行一個頁面的主要佈局，我這裡主要用的是ul+li進行巢狀佈局，內容如下： 第二部就要給它進行一個格式的編寫，讓它實現效果： 以上就是一個簡單的

Android 使用BRVAH 實現二級選單。類似QQ分組

首先配置什麼的。點選這裡 程式碼： 兩個類，一個是一級的類，一個是二級的類 直接貼上 package com.mogujie.tt.ui.model; import com.chad.library.adapter.base.entity.Abs

vue 實現購物清單實現二級選單

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>實現二級選單Vue</title> <script src="vue.min.js">

js+css+ul實現二級選單

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyLeftNav.ascx.cs" Inherits="MIT.UserContral.MyLeftNav" %> <style ty

jQuery UI的簡單使用，輕鬆實現二級選單

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實驗10-3 jQuery UI</title> <link rel="stylesh

CSS實現自定義導航欄帶二級選單

程式碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &

select選單實現二級聯動

<tr> <th>執行人<b>*</b></th> <td> <select name="

動感實現伸縮顯示二級選單

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動感實現伸縮顯示二級選單</title> <link

3種方法實現導航選單欄中的二級下拉選單

我們在淘寶、搜狐等大型網站上都可以看到使用的一些二級下拉選單，比如下面這張圖片。我們有至少三種方式來實現，附上程式碼供大家參考。   1.僅使用html和css <!DOCTYPE html><html lang="en"><head><meta

用js+html5實現二級聯動省份下拉選單

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二級聯動省份下拉框</title> </head> &

bootstrap導航條的二級選單下實現三級選單

bootstrap在導航條中的二級選單下實現三級選單 modify by 20180506 add music update 20180919: 推廣下自己的公眾號，打算以後系列文章會維護在微信公眾號上，有興趣的朋友可以關注喲，多數系列文章可能會圍繞pytho

jquery和css3實現滑動導航選單

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="ht

CSS3實現3D旋轉選單導航

一、效果圖 二、程式碼 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>製作3D旋轉導航<

二級選單----css3特效，無jQuery

css部分：*{    margin: 0;    padding: 0;    list-style: none;}.container{    width: 100vw;    height: 100vh;    background: #222222;    displ

利用Jquery實現二級下拉選單

     最近在學習前端的內容：看到別人做的二級選單挺好看的。下載別人的Demo看起來比較麻煩，所以就嘗試了自己做一個簡單二級下拉選單： 效果圖如下： 下拉選單實現後的效果圖： 沒有做什麼美化，只是從功能上實現下拉選單 HTML程式碼： <!DOCTYPE ht

Web前端開發實戰6：CSS實現導航選單結合二級下拉式選單的簡單變換

       前面幾篇博文都在講導航選單和二級下拉式選單，其實有很多方法都可以實現的，具體的情況還要視情況而定。 在後面學習到jQuery框架之後，會有更豐富的動畫效果，由於在學習Ajax和jQuery的初步階段，對於很多的複雜的導 航菜單和二級下拉式選單沒法做，但是學習了

二級選單的實現

導航欄佈局藉助於<ul> <li> 標籤 選單的顯示與隱藏藉助於：hover偽類 html程式碼如下   <div id="nav">  <ul>  <li><a href="#">首頁</a&g