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

帶有 jQuery 的時尚導航菜單

簡介

您可能知道,新訪問者與網站互動的前 20 秒決定了他們是留下還是離開。這意味著您必須遵循常見的設計實踐並將所有內容放在用戶期望的位置。這個過程的一個關鍵部分是開發一個易於使用的導航菜單。

在本教程中,我們將藉助 jQuery 庫製作一個時尚的 CSS + XHTML 導航菜單。

所以下載教程文件 以上,繼續閱讀..

第 1 步 - XHTML

XHTML 代碼簡單,搜索引擎友好。

index.html

<div id="menu-container">
<ul id="navigationMenu">
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>
</ul>
</div>

整個導航菜單基本上是一個無序列表。您可以通過添加更多的 LI 元素並設置它們各自的文本和目標 URL 來引入新的菜單項。

這裡要注意的重要一點是如何將菜單項標記為默認選中(或活動) - 只需為其分配 selectedMenu 類(第 5 行)。例如,在這裡我們突出顯示“我們的客戶”頁面。靜態站點可以手動設置,也可以用PHP動態做ti。

第 2 步 - jQuery

從上圖中可以看出,我們將克隆 XHTML 中定義的一組鏈接(深色的),並為它們分配 hoverMenu CSS 類,將它們浮動在默認值之上。

這種策略有很多優點 - 首先它保持 XHTML 更乾淨,因為您不必手動將這些鏈接添加到頁面,其次它保證無論訪問者的 javascript 支持如何,您都將擁有乾淨且有效的導航 - 對可用性都有好處和搜索引擎優化。

現在讓我們看看我們的 script.js 中發生了什麼 .

script.js

$(document).ready(function(){
// executed after the page has finished loading

    $('#navigationMenu li .normalMenu').each(function(){    // for each menu item

        // create a duplicate hyperlink and position it above the current one
        $(this).before($(this).clone().removeClass().addClass('hoverMenu'));

    });

    $('#navigationMenu li').hover(function(){   // using the hover method..

        // we assign an action on mouse over
        $(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);
        // the animate method provides countless possibilities

    },

    function(){
        // and an action on mouse out
        $(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);

    });

});

太好了,但是我們剛剛做了什麼?首先我們使用 $('document').ready 方法來確保代碼在頁面加載完成後執行。

然後我們遍歷所有鏈接並克隆它們,分配一個新的 CSS 類 - hoverMenu .

之後我們使用了 hover() 方法來輕鬆地為 mouseover 和 mouseout 事件添加事件處理程序。

後來我們使用了 animate 方法——jQuery 庫中一個非常強大的工具。在這種情況下,我們為它提供了一個新的 marginTop 值和效果的持續時間。 jQuery 會處理所有的動畫。

注意 stop() 的使用 方法 - 它停止所有當前活動的動畫,從而防止不同的動畫效果相互疊加,從而保證流暢的用戶體驗。

第 3 步 - CSS

讓我們看看我們的 CSS 樣式表。

demo.css

/* Page styles */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{   /* resetting some elements for better browser compatibility */
    margin:0px;
    padding:0px;
}

body{   /* styling the body */
    margin-top:20px;
    font-family:Arial, Helvetica, sans-serif;
    color:#51555C;
    height:100%;
    font-size:12px;
}

/* Navigation menu styles */

ul{ /* the unordered list */
    height:25px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}

ul li{
    border:1px solid #444444;
    display:inline-block;   /* changing the display property */
    float:left; /* floating the list items to the left */
    height:25px;
    list-style-type:none;   /* disabling the list icon */
    overflow:hidden;    /* hiding the overflowing content */
}

ul li a, ul li a:hover,
ul li a:visited{
    text-decoration:none;   /* removing the underline text-decoration */
}

/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
    outline:none;
    padding:5px 10px;
    display:block;
}

/* styles that are assigned individually */

.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
    margin-top:-25px;
    background:url(img/grey_bg.gif) repeat-x #eeeeee;
    color:#444444;
}

.selectedMenu,.selectedMenu:visited {
    margin:0;
}

.normalMenu, .normalMenu:visited{
    color:white;
    background:url(img/dark_bg.gif) repeat-x #444444;
}

如您所見,我們有三個主要類來定義導航菜單的外觀。 正常菜單 - 對於導航鏈接的正常狀態,hoverMenu - 懸停時向下滑動的較輕鏈接,selectedMenu 活動(選定)狀態。

有了這個,我們時尚的導航菜單就完成了!

結論

在本教程中,我向您展示瞭如何創建時尚且用戶友好的導航菜單。您可以在您的網站中自由使用它,並以您認為合適的任何方式對其進行修改。


Tutorial JavaScript 教程
  1. 為什麼 JavaScript 的 parseInt 的基數默認為 8?

  2. 我在哪裡可以練習前端開發?

  3. Phaser 3 和 Node.js 入門

  4. Javascript 等效於 PHP 的 list()

  5. 如何基於Vue JS中的數組動態添加/刪除插槽字段

  6. 複製 Javascript 對象屬性

  7. 在 Netlify 上創建演示無服務器函數的簡單直接方法 - 使用 CORS

  1. 客戶端 javascript 與服務器端 Java 的速度有多快?

  2. 如何在不調用設置狀態的情況下強制反應組件重新渲染?

  3. 挑戰 #15 - 計算具有絕對差 K 的對數

  4. 介紹 ESLint

  5. TypeORM 與 NEST JS 基礎教程

  6. 如何安裝反應?

  7. 使用 Chakra UI、React Hook Form 和 Yup 進行 React 表單驗證。

  1. 通過構建一個簡單的 CRUD 應用程序來學習 Vue.js 的基礎知識:教程

  2. 當我將鼠標懸停在 Google Map v3 中的特定區域時,如何更改鼠標光標?

  3. 使用 Flask 和 React 構建 Twitter 克隆 |第三部分

  4. 在 Jquery 中添加新字段