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

製作 CSS3 動畫菜單

在這個簡短的教程中,我們將使用 CSS3 效果和過渡的力量來構建一個無 JavaScript 的動畫導航菜單,您可以使用它為您的網站或模板添加精美的外觀。我們將使用一些簡潔的功能,例如 :target 偽選擇器和 :after 元素。

HTML

第一步是定義網站的 HTML 主幹。我們廣泛使用 HTML5 標記,因此我們需要在文檔的頭部包含 IE 的 HTML5 啟用腳本。由於它包含在條件註釋中,因此只會在 IE 瀏覽器中請求,不會影響其他瀏覽器的性能:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!-- Including the Lobster font from Google's Font Directory -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />

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

    <body>

        <header>
            <h1>CSS3 Animated Navigation Menu</h1>
            <h2>&laquo; Read and download on Tutorialzine</h2>
        </header>

        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="#home" class="homeIcon">Home</a></li>
                <li id="news"><a href="#news">News</a></li>
                <li id="about"><a href="#about">About us</a></li>
                <li id="services"><a href="#services">Services</a></li>
                <li id="contact"><a href="#contact">Contact us</a></li>
            </ul>
        </nav>

        <footer>Looks best in Firefox 4, usable everywhere.</footer>

    </body>
</html>

您會注意到我們包含了來自 Google API 的樣式表。它包含一個代碼>@font-face 聲明並包含 Lobster 字體從 Google 的 Web Font 目錄中添加到我們的頁面中,該目錄已發展到包含 100 多種精彩的開源字體,由 Google 慷慨託管。

在文檔的正文中,我們有 header , navfooter HTML5 標籤,將頁面分為三個具有語義價值的部分。我們將專注於導航標籤內的 UL 元素。這是我們的導航菜單。

無序列表有一個 fancyNav 應用到它的類,我們將使用它來限制我們稍後將要編寫的 CSS 樣式的效果。這將使代碼更具可移植性並限制任何可能的副作用。需要指出的另一件事是,每個 LI 元素都有一個唯一的 ID,鏈接到它們內部的錨元素。這將使我們能夠使用 :target 偽類來設置當前選擇的菜單項的樣式。

所以讓我們繼續討論 CSS 樣式。

CSS

您可能會驚訝於我們正在構建的導航菜單不使用任何圖像(除了主頁圖標 - 一個透明的 png)。一切都是通過 CSS3 漸變、框陰影和多種背景完成的。

至於瀏覽器支持,該菜單適用於最新版本的 Firefox、Chrome、Safari 和 Opera,而從 7 開始的每個 IE 版本仍然可以使用。但是,它在 Firefox 4 中看起來確實最好,因為它支持通過 transition 屬性為 :before 和 :after 偽元素設置動畫(預計其他瀏覽器也會效仿)。

我們的 CSS 樣式在 assets/styles.css 中定義 .我建議您從上面的按鈕下載菜單代碼,然後在文本編輯器中打開該文件。我們將主要關注導航菜單,因此我將跳過文件中無聊的部分。

讓我們開始設計導航菜單!我們首先編寫無序列表的規則 - 以 fancyNav 為目標 類,以及 li 項:

.fancyNav{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;

    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;

    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.fancyNav li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */

    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

    border-right: 1px solid rgba(9, 9, 9, 0.125);

    /* Adding a 1px inset highlight for a more polished efect: */

    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

    position:relative;

    float: left;
    list-style: none;
}

注意 CSS3 漸變語法的巨大列表。所有最新版本的 Firefox、Chrome 和 Safari 都支持漸變。使用 Opera 和 IE 10(目前處於平台預覽模式),也加入了它們的最新版本。最初有兩種相互競爭的語法,一方面由 Mozilla (Firefox) 支持,另一方面由 Webkit(Chrome 和 Safari)支持,但 Firefox 的漸變語法已被同意作為行業標準。

下一步是使用 :after 用於創建暗陰影的偽元素,當您將鼠標懸停在菜單項上時顯示:

.fancyNav li:after{

    /* This creates a pseudo element inslide each LI */ 

    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;

    /* Gradients! */

    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */

    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

    /* This will create a smooth transition for the opacity property */

    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}

:after 聲明創建了一個真正的樣式元素。它有一個平滑的水平漸變,當懸停在菜單項上時會變暗。由於默認情況下它是不可見的(不透明度設置為 0),我們使用 CSS3 過渡在零和完全不透明度之間設置動畫,在懸停時觸發。不幸的是,目前只有 Firefox 支持動畫偽元素,但預計其他瀏覽器很快就會引入此功能。

接下來我們將使用 :first-child:last-child 用於定位第一個和最後一個菜單項的偽選擇器。

/* Treating the first LI and li:after elements separately */

.fancyNav li:first-child{
    border-radius: 4px 0 0 4px;
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

    border-radius:4px 0 0 4px;
}

.fancyNav li:last-child{
    border-radius: 0 4px 4px 0;
}

/* Treating the last LI and li:after elements separately */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

    border-radius:0 4px 4px 0;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
    /* This property triggers the CSS3 transition */
    opacity:1;
}

對第一個和最後一個項目應用不同的樣式是必要的,因為我們不想顯示跨越菜單的醜陋邊框。我們還會對這些元素的相應角進行圓角處理。

在此之後,我們需要對菜單進行修復。就是當我們再次將鼠標懸停在菜單上時隱藏當前選中的元素:

.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
    opacity:1 !important;
}

最後剩下的就是為 LI 中的錨元素設置樣式。

/* Styling the anchor elements */

.fancyNav li a{
    color: #5d5d5d;
    display: inline-block;
    font: 20px/1 Lobster,Arial,sans-serif;
    padding: 12px 35px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}

.fancyNav a.homeIcon{
    background:url('../img/home.png') no-repeat center center;
    display: block;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    text-indent: -9999px;
    width: 16px;
}

這樣我們的動畫 CSS3 菜單就完成了!

總結

讓您的導航菜單完全使用 CSS 構建可以讓您有很大的控制權。您可以通過交換顏色值或字體來自定義設計的每個部分。代碼中的大部分內容來自必須為每個瀏覽器提供單獨的聲明,這將很快成為過去。

你喜歡這個教程嗎?請務必在下面的評論部分分享您的想法。


Tutorial JavaScript 教程
  1. JavaScript:Class.method 與 Class.prototype.method

  2. 警惕查詢:使用 React 測試庫定位條件元素

  3. 通過 htaccess 更改 IE 的兼容性視圖設置

  4. 如何使用 Deno 和 Deno Deploy 渲染 React SSR

  5. JavaScript中不區分大小寫的字符串替換?

  6. 🖐 每個開發人員必須了解的關於軟件架構的 5 件事

  7. 實現平滑滾動

  1. 使用 StencilJS 創建一個 Web 組件以跟踪您的輸入草稿

  2. 使用這些核心 VSCode 擴展和設置讓編碼成為一種樂趣

  3. 為什麼 instanceof 對某些文字返回 false ?

  4. 一個不情願的離子反應粉絲的自白

  5. 如何使用 JavaScript 按類名獲取元素,然後將逗號拆分為新行?

  6. 從自定義錯誤類型到自定義錯誤子類型

  7. 我如何決定應該學習哪種語言

  1. JavaScript 疲勞疲勞

  2. 創建一個 React 日曆組件:第 4 部分

  3. 使用 DEV.to API 和 Node.js

  4. Jet:將開發人員放在首位的編程語言。