JavaScript >> Javascript 文檔 >  >> Tags >> CSS

使用這個簡潔的 z-index 技巧創建一個滑出式頁腳

在這個簡短的教程中,我們將使用一些 CSS 創建一個有趣的滑出頁腳。從上面的下載按鈕中獲取 zip,在您喜歡的代碼編輯器中打開它並繼續閱讀!

理念

我們所追求的效果是給人一種頁面抬起以顯示頁腳的印象,固定在適當的位置。要實現這一點:

  • 除頁腳外,整個頁面內容必須位於單個包裝元素中(<div id="main"> 在我們的例子中)。該元素的 z-index 值為 1;
  • 頁腳必須設置為負 z-index 值。它將提供背景顏色,並為頁腳的固定部分(鏈接和彩色標題)騰出空間;
  • 必須有一個元素設置為相對於窗口底部的固定位置,並且它的 z-index 必須低於 #main 元素,但高於頁腳。

您可以在下圖中了解更多關於這個想法的信息:

現在讓我們看一些代碼!

HTML

您可以在下面看到頁面的標記。這基本上是一個普通的 HTML5 文檔,在 <head> 其中我包含了來自 Google Webfonts 的字體,以及用於舊版 IE 瀏覽器的 HTML5 shim。

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"/>
        <title>Tutorial: A CSS3 slide-out footer</title>

        <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700" rel="stylesheet" />

        <!-- The main CSS file -->
        <link href="assets/css/style.css" rel="stylesheet" />

        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="main">

            <h1>A CSS3 slide-out footer.</h1>

        </div>

        <!-- The footer will go here -->

    </body>
</html>

#main 元素環繞頁面的內容。正如您將在下一節中看到的,我們將為它分配一個正的 z-index 值,以便它呈現在頁腳上方。這是頁腳本身的標記:

<footer>

    <ul>
        <li>
            <p class="home">Home</p>
            <a class="logo" href="#">Company Name <i>&copy; 2013</i></a>
        </li>
        <li>
            <p class="services">Services</p>

            <ul>
                <li><a href="#">3D modeling</a></li>
                <li><a href="#">Web development</a></li>
                <li><a href="#">Mobile development</a></li>
                <li><a href="#">Web &amp; Print Design</a></li>
            </ul>
        </li>
        <li>
            <p class="reachus">Reach us</p>

            <ul>
                <li><a href="#">Email</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Facebook</a></li>
                <li>555-123456789</li>
            </ul>
        </li>
        <li>
            <p class="clients">Clients</p>

            <ul>
                <li><a href="#">Login Area</a></li>
                <li><a href="#">Support Center</a></li>
                <li><a href="#">FAQ</a></li>
            </ul>
        </li>
    </ul>

</footer>

在頁腳標籤內,我們有一個無序列表,其中包含四組鏈接(使用 <li> 定義 元素)。每個組都有一個段落,該段落被轉換為該組的彩色標題,以及另一個 <ul> 其中包含鏈接。最外層<ul> 將設置為 position:fixed ,這將使它相對於瀏覽器窗口的底部是靜態的。

CSS

正如您可能猜到的那樣,這是事情變得有趣的地方。在教程的開頭,我提到我們將使用負 z-index 來使頁腳固定在屏幕底部。有一篇非常好的文章詳細解釋了 z-indexes,我強烈建議您在繼續深入之前閱讀該文章。別著急,我等著。

我們要做的第一件事是在 body 元素上創建一個堆疊上下文(任何同時包含頁腳和#main div 的元素都可以使用)。如果您不這樣做,根據我的經驗,負 z-indexes 在移動 Safari 和較舊的 IE 中不起作用。要創建堆疊上下文,我們只需要給它一個 z-index 和一個位置:

assets/css/styles.css

body{
    font:15px/1.3 'PT Sans', sans-serif;
    color: #5e5b64;

    /* Create a page-wide stacking context 
    (so that negative margins work as you expect) */

    position:relative;
    z-index:0;
}

現在頁面上所有其他具有 z-index 值的元素將根據 body 進行堆疊。接下來我們應該為 #main 分配一個 z-index 元素,使其覆蓋頁腳(否則它將始終可見,固定在窗口底部)。

#main{
    position:relative;
    z-index:1;

    background-color: #fff;

    background-image:-webkit-radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);
    background-image:-moz-radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);
    background-image:radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);

    padding: 120px 0 600px;
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

z-index 值為 1 足以使該元素高於頁面上未設置顯式 z-indexes 的所有其他元素。在大多數瀏覽器中,這足以實現我們所追求的行為,但不幸的是,移動 Safari 存在重繪問題,這需要在頁腳設置負 z-indexes。我們必須做的另一件事是在#main 元素上設置背景,否則我們會通過它看到頁腳。

這是頁腳:

footer{
    height: 245px;
    color:#ccc;
    font-size:12px;

    position:relative;
    z-index:-2;

    background-color:#31353a;

    background-image:-webkit-linear-gradient(top, #31353a, #2f3337);
    background-image:-moz-linear-gradient(top, #31353a, #2f3337);
    background-image:linear-gradient(top, #31353a, #2f3337);
}

我已將 z-index 值設置為 -2。這將它推到#main div 後面。注意,我們必須給這個元素一個高度,因為它裡面的 UL 元素有一個固定的位置,不會將它的父元素擴展到它的大小。

接下來是裡面的UL元素,固定在瀏覽器窗口:

/* Set a width to the outermost UL, center it and fix it to the window */

footer > ul{
    width:960px;
    position:fixed;
    left:50%;
    bottom:0;
    margin-left:-480px;
    padding-bottom: 60px;
    z-index:-1;
}

它設置為 -1 的 z-index,這導致它顯示在 #main 元素下方,但在頁腳上方,這正是我們想要的。 z-index技巧到此結束,但還有一些樣式值得一提:

/* The four columns of links */

footer > ul > li{
    width:25%;
    float:left;
}

footer ul{
    list-style: none;
}

/* The links */

footer > ul > li ul li{
    margin-left:43px;
    text-transform: uppercase;
    font-weight:bold;
    line-height:1.8;
}

footer > ul > li ul li a{
    text-decoration: none !important;
    color:#7d8691 !important;
}

footer > ul > li ul li a:hover{
    color:#ddd !important;
}

設置這些樣式時我們必須格外小心,因為頁腳包含可能會混淆的嵌套 UL。為了限製樣式的效果,我使用 CSS 子選擇器 > .

接下來是公司標誌。圖片從 sprite 顯示為 :before 元素。

/* The company logo */

footer a.logo{
    color: #e4e4e4 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    text-transform: uppercase;
    margin-left: 16px;
    display: inline-block;
    margin-top: 7px;
}

footer a.logo i{
    font-style: normal;
    position: absolute;
    width: 60px;
    display: block;
    left: 48px;
    top: 18px;
    font-size: 12px;
    color: #999;
}

footer a.logo:before{
    content: '';
    display: inline-block;
    background: url('../img/sprite.png') no-repeat -19px -70px;
    width: 48px;
    height: 37px;
    vertical-align: text-top;
}

在此之後,我們可以設置段落元素的樣式,這些元素必須為四個部分中的每一個部分轉換為顏色鮮豔的標題。

footer p{
    width: 90%;
    margin-right: 10%;
    padding: 9px 0;
    line-height: 18px;
    background-color: #058cc7;
    font-weight: bold;
    font-size: 14px;
    color:#fff;
    text-transform: uppercase;
    text-shadow: 0 1px rgba(0,0,0,0.1);
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    margin-bottom: 20px;
    opacity:0.9;
    cursor:default;

    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

footer > ul > li:hover p{
    opacity:1;
}

footer p:before{
    content: '';
    display: inline-block;
    background: url('../img/sprite.png') no-repeat;
    width: 16px;
    height: 18px;
    margin: 0 12px 0 15px;
    vertical-align: text-bottom;
}

我在這裡使用的另一個技巧是,我將元素的不透明度設置為 0.9,並且我定義了一個過渡,當不透明度發生變化時,它將平滑地為不透明度設置動畫。懸停時,不透明度設置為 1,觸發動畫。

最後,這裡是一些不同的顏色主題,是在一些 CSS 漸變的幫助下創建的:

footer p.home{
    background-color: #0096d6;

    background-image:-webkit-linear-gradient(top, #0096d6, #008ac6);
    background-image:-moz-linear-gradient(top, #0096d6, #008ac6);
    background-image:linear-gradient(top, #0096d6, #008ac6);
}

footer p.home:before{
    background-position: 0 -110px;
}

footer p.services{
    background-color: #00b274;

    background-image:-webkit-linear-gradient(top, #00b274, #00a46b);
    background-image:-moz-linear-gradient(top, #00b274, #00a46b);
    background-image:linear-gradient(top, #00b274, #00a46b);
}

footer p.services:before{
    background-position: 0 -129px;
}

footer p.reachus{
    background-color: #d75ba2;

    background-image:-webkit-linear-gradient(top, #d75ba2, #c75496);
    background-image:-moz-linear-gradient(top, #d75ba2, #c75496);
    background-image:linear-gradient(top, #d75ba2, #c75496);
}

footer p.reachus:before{
    background-position: 0 -89px;
}

footer p.clients{
    background-color: #e9ac40;

    background-image:-webkit-linear-gradient(top, #e9ac40, #d89f3b);
    background-image:-moz-linear-gradient(top, #e9ac40, #d89f3b);
    background-image:linear-gradient(top, #e9ac40, #d89f3b);
}

footer p.clients:before{
    background-position: 0 -69px;
}

這使得標題漂亮而多彩,沒有任何圖像。

我們完成了!

我希望你喜歡這個簡單的技術。它甚至可以在移動設備上運行,儘管您可能想要編寫一兩個媒體查詢,以便更好地適應外形。


Tutorial JavaScript 教程
  1. 如何在 Javascript 中設置用戶定義的時間並添加 2 小時?

  2. 創建了我的第一個 JavaScript 庫

  3. 使用 esBuild 編譯 Apollo 聯邦圖🚀

  4. 使用 Next.js、Prisma 和 Postgres 構建 React 後端

  5. JavaScript 中的正確尾調用 (PTC)

  6. 在 1 行代碼中自動滾動聊天應用程序 + React 鉤子

  7. 如何在純 CSS 中構建具有並發水平和垂直粘性標題的表格

  1. JavaScript 預算應用更新

  2. 1 行代碼:如何創建範圍數組

  3. 用於輕鬆識別 StyledComponent 和 ReactComponent 的命名約定

  4. 使用 JavaScript 函數查找 3 Dart 平均值

  5. React + TypeScript =❤️

  6. JavaScript 中的導航器對象 | API

  7. 如何在 Storybook 中使用 Next.js 圖像組件

  1. 🚀 GitHub 上面向 Web 開發人員的 10 個熱門項目 - 2020 年 10 月 2 日

  2. 使用 Deno 構建一個 Restful API(第 1 部分)

  3. 使用 JavaScript 製作進度條

  4. Jsoning - 一個簡單的基於 JSON 的鍵值對持久輕量級數據庫。✨