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

CSS3 簡約導航菜單

您現在可能已經聽說過,CSS3 動畫是一個強大的工具,它使您能夠創建運行的動畫,而無需對頁面應用額外的腳本。更棒的是,在下一代瀏覽器中,我們將擁有更強大的工具,包括 3D 轉換(已經存在於 Safari 中)。

但它對我們有什麼不同今天 ?目前,只有三種瀏覽器可以讓您對 CSS 屬性進行動畫處理——Chrome、Safari 和 Opera,它們加起來只佔瀏覽器市場的一小部分。 Firefox 有望很快加入俱樂部,隨著 IE9 即將發布,開始利用這種技術突然變得有意義。

所以今天我們要做一些實用的東西 - 一個簡單的 CSS3 動畫導航菜單,它在舊版瀏覽器中可以優雅地降級,並且可以與下一代瀏覽器一起使用。

XHTML

菜單組織為無序列表。這是最適合菜單的結構,因為它提供了一種簡單的方式來設置菜單鏈接的樣式並且在語義上是正確的。

demo.html

<ul id="navigationMenu">
    <li>
        <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>

    <li>
        <a class="about" href="#">
            <span>About</span>
        </a>
    </li>

    <li>
         <a class="services" href="#">
            <span>Services</span>
         </a>
    </li>

    <li>
        <a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>

    <li>
        <a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>

在每個 li 裡面我們都有一個 hyperlink 帶有 span 在裡面。默認情況下,這些跨度是隱藏的,僅當您將鼠標懸停在鏈接上時才會顯示。每個鏈接都有一個唯一的類名 ,用於為其提供獨特的背景和內部跨度的樣式,稍後您將看到。

CSS

一旦我們有了基本的結構,我們現在就可以開始創建花哨的 CSS3 效果和样式了。這甚至適用於不支持 CSS3 過渡動畫的瀏覽器 (除了 Chrome 之外的所有瀏覽器, 野生動物園歌劇, 在撰寫本文時)儘管閃光較少。該菜單甚至可以在 IE6 之前的瀏覽器中完美使用。

styles.css - 第 1 部分

*{
    /* A universal CSS reset */
    margin:0;
    padding:0;
}

body{
    font-size:14px;
    color:#666;
    background:#111 no-repeat;

    /* CSS3 Radial Gradients */
    background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
    background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

    font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

對於正文背景的樣式,我首先提供了一個背景顏色,作為備用,然後添加了兩個 CSS3 徑向漸變(分別用於 Firefox 和 Chrome/Safari)作為背景圖像。如果訪問者的瀏覽器不支持漸變,它將忽略規則並使用純背景色。

您可以在樣式中看到,大多數規則都以無序列表的 id 開頭 - #navigationMenu .如果您將菜單合併到您的網站中,這是為了防止與您的其他頁面樣式發生衝突。

styles.css - 第 2 部分

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    /* The background sprite: */
    background:url('img/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

CSS3 過渡 屬性是一個非常強大的屬性。它使您能夠在偽屬性生效時對元素上發生的更改進行動畫處理。例如這裡,當用戶將鼠標移到導航鏈接上時,:hover 偽屬性生效,顯示原本隱藏的 span。

如果沒有定義轉換屬性,這種變化是瞬時的。但是通過過渡,我們可以對其進行動畫處理。這裡我們告訴瀏覽器,動畫的持續時間是 250 毫秒。您可以選擇指定要設置動畫的特定屬性列表,而不是所有屬性。

目前只在 webkit 中支持轉場 基於瀏覽器(Safari Chrome ),但下一個版本的 Firefox 也有望支持它們,因此我們通過指定 -moz-transition 來保證腳本的未來 .

styles.css - 第 3 部分

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover {   background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

在樣式的最後一部分,我們為導航鏈接指定了 5 種不同的設計。鏈接的所有背景圖像都包含在單個精靈文件中。它們有一個正常和一個懸停狀態,一個在另一個之下。發生懸停時,背景會發生偏移以顯示相應版本的背景圖像。

PSD 文件包含在可下載的存檔中,因此您可以隨意自定義圖像。

這樣我們簡約的 CSS3 導航菜單就完成了!

結論

遲早,我們將在瀏覽器中快速訪問強大的硬件加速圖形。當這一天到來時,一個全新的世界將向 Web 開發者開放,我們將更接近於構建富互聯網應用程序,其行為與原生應用程序完全一樣。

到那時,我們必須充分利用現有的資源,並慢慢開始將 CSS3 技術應用到我們的工作中。

你怎麼看?您將如何改進此導航菜單?


Tutorial JavaScript 教程
  1. 生成 SSH 密鑰並將其添加到 ssh-agent

  2. javascript中的嵌套對象,最佳實踐

  3. 如何在 React SwiperJs 中自定義上一個/下一個按鈕

  4. 你不知道的 JavaScript 中 JSON 的 5 個秘密特性🤯

  5. 無法將字符串推入數組

  6. Javascript 實例化模式:簡介

  7. 在 React 中使用 useContext

  1. 👨‍💻 從訓練營的角度做出反應 |第 2 部分 - 👊 開始一個項目

  2. Reactjs 中的 Polyfill

  3. 使用 CSS Houdini 編寫更少的代碼

  4. 是否可以沖洗控制台(使其立即打印)?

  5. 我的 JavaScript 應用程序如何在 Reddit 上排名第一(以及您的應用程序如何也能)

  6. 如何將 Algolia InstantSearch 添加到 Next.js 應用程序

  7. 將您的對象存儲在您的選項選擇(下拉列表)中。

  1. 如何創建基於 Web 的終端

  2. 管理 React 應用程序狀態 - 不使用 Redux!

  3. 使用 React 和 Django 創建應用程序

  4. 快樂的推文