您想在您的 WordPress 博客上創建一個響應式菜單嗎?

如今,移動用戶數量超過台式機用戶。 添加響應式移動菜單可使用戶更輕鬆地瀏覽您的網站。

在本教程中,我們將向您展示如何輕鬆地在WordPress上創建響應菜單。

但是之前,如果您從未安裝過WordPress發現 在WordPress上安裝多少個插件. et 如何找到,安裝和你的博客激活WordPress主題 

然後回到為什麼我們在這裡。

在這裡,向您展示針對初學者的帶有插件的方法和針對高級用戶的編碼方法,這將是一個深入探討的問題。

第一種方法:使用WordPress插件創建移動菜單

這種方法比較容易,建議初學者使用,因為它不需要任何特殊的編碼技能。

在這種方法中,我們將創建一個菜單(帶有一個漢堡圖標)在移動屏幕上滑動。

創建響應式菜單


您需要做的第一件事是安裝並激活 WordPress響應式菜單插件 。 有關詳細信息, 查看有關如何安裝WordPress插件的指南 .

激活插件後,插件將在菜單上添加一個名為“ 響應菜單 ”。 點擊它會帶你進入設置頁面 WordPress插件.

WordPress響應式儀表板菜單插件

您必須首先輸入移動菜單應顯示的尺寸。 默認值為800px,適用於大多數網站。

之後,您必須選擇要在移動設備上使用的菜單。

屏幕上的最後一個選項允許您為菜單提供CSS類。 這將允許插件在小屏幕上隱藏您的無響應菜單。

不要忘記點擊« 更新選項 保存設置。

我們也建議您發現我們的 10 WordPress插件可在您的博客上創建菜單

現在,您可以訪問您的網站並調整瀏覽器屏幕的大小,以查看響應式菜單的作用。

網站在行動菜單響應到移動

插件« 響應菜單 »提供許多其他選項,使您可以修改響應菜單的行為和外觀。 您可以在插件的設置頁面上瀏覽這些選項,並根據需要進行調整。

2方法:如何手動添加移動菜單

在移動屏幕上顯示菜單的最常用方法之一是使用槓桿。

此方法要求您將自定義代碼添加到WordPress文件中。

在我們之前的教程之一中,我們向您展示 如何創建一個WordPress插件.

首先,您需要打開一個文本編輯器(如記事本)並粘貼此代碼。

(功能(){風險NAV =的document.getElementById(“與網站導航'),按鈕,菜單;如果(NAV){返回} ;!按鈕= nav.getElementsByTagName(”按鈕“)[0] =導航菜單。的getElementsByTagName('UL')[0]如果{返回;}(按鈕!)//隱藏按鈕如果菜單丟失或空if(|| menu.childNodes.length菜單!)= {button.style.display。 “無”;返回;} button.onclick =函數(){如果(-1 === menu.className.indexOf(NAV-菜單')){menu.className = NAV-菜單';}如果( - !== 1 button.className.indexOf('被切換')){button.className button.className.replace =('被切換',''); menu.className menu.className.replace =('切換-on','');} else {button.className + ='toggled-on'; menu.className + ='toggled-on';}};})(jQuery);

現在,您必須使用“ navigation.js 在你的桌子上。

接下來,您需要打開FTP客戶端,以將該文件下載到WordPress網站上的“ / wp-content / themes / your-theme / js /”位置。

替換錶達式“ 您的主題 » 帶有您的文件夾的名稱 WordPress主題 當前的。 如果你的主題目錄沒有 js 文件夾,那麼你需要創建一個。

上傳JavaScript文件後,下一步是確保您的WordPress網站將加載JavaScript文件。 您需要將以下代碼添加到“ 的functions.php “ 你的 WordPress主題.

發現其他東西 你怎麼用functions.php文件?

 wp_enqueue_script('bpc_togglemenu'get_template_directory_uri()'/js/navigation.js',陣列('的jquery'),20160909',真);

現在我們需要在我們的中添加導航選單 WordPress主題。 通常導航選單會新增在“ header.php文件 您的WordPress主題。

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

我們假設您的 WordPress 主題定義的菜單位置稱為“ 主 ”。 否則,請使用您的 WordPress 主題定義的位置。

最後一步是添加一些CSS,以便我們的菜單在移動設備上查看時使用正確的CSS類進行切換。

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

現在,您可以訪問您的網站並調整瀏覽器屏幕的大小,以查看響應式菜單是否切換。

搖菜單WordPress的教​​程

還發現一些高級WordPress插件  

您可以使用其他 WordPress插件 賦予現代外觀並優化您的博客或網站的處理。

我們在這里為您提供了一些高級WordPress插件,它們將幫助您實現這一目標。

1。 UberMenu

UberMenu 是一個 WordPress插件 致力於創建高度可定制、響應迅速且用戶可訪問的 megamenu。 它在安裝後即可運行,無需任何特定配置。

Ubermenu wordpress巨型菜單插件

它是一個易於使用的插件,但功能強大,足以創建高度可定制的創意超級菜單佈局。

另請參閱 9個WordPress插件可在博客上創建價格網格

您會發現:3個菜單模板,完全響應式佈局,與移動設備(iPhone,iPad,Android)的兼容性,觸摸支持等...

下載 | DEMO | 虛擬主機

2。 LMM

Liquida Mega Menu 也稱為 LMM 是 WordPress插件 專為使用者和開發人員設計。 它具有簡單直覺的介面,整合到 WP 儀表板中,可讓您建立和自訂無限數量的大型選單,而無需任何程式設計技能。

基於引導的Lmm Wordpress響應式大型菜單

它具有許多功能,無論是針對普通用戶還是高級用戶。 作為功能,它提供了其他功能:自動和手動集成, 支持多站點, 照顧孩子的主題、完全可定制的菜單樣式、可定制的菜單位置、粘性菜單等……

下載 | DEMO | 虛擬主機

3。 8Degree Fly菜單

8Degree Fly Menu是一個高級WordPress插件,可讓您在網站上添加畫布菜單,以使其看起來突出並輕鬆地顯示您的信息。 它使用默認的WordPress菜單功能創建菜單。

適用於Wordpress的8°彈出菜單響應式畫布菜單插件

您將能夠在默認菜單項中添加其他元素,例如圖標,菜單標語,偽分組標題和詳細說明。

還要讀: 10個WordPress插件可優化側邊欄和粘性標頭

它還提供了一個所見即所得的編輯器,以幫助您以一種用戶友好的方式掌握詳細的描述,也可以使用短代碼。

下載 | DEMO | 虛擬主機

其他推薦資源

我們還邀請您參考以下資源,以進一步掌握和控製網站和博客。

結論

所以 ! 這就是本教程的內容,我希望它能讓您為移動用戶創建一個菜單。 隨意地 與社交網絡上的朋友分享提示.

但是,您也可以諮詢我們的 RESSOURCES,如果您需要更多的元素來執行創建Internet網站的項目,請參考我們關於 WordPress博客創建。

但是,與此同時,請告訴我們您的 評論 和專用部分中的建議。

...

別起來Pinterest上