[WordPress] 外掛分享: SV Sticky Menu

首頁外掛目錄 › SV Sticky Menu
WordPress 外掛 SV Sticky Menu 的封面圖片
10+
安裝啟用
尚無評分
3111 天前
最後更新
問題解決
WordPress 4.0+ v1.0.5 上架:2017-06-21

內容簡介

這是一個小而功能強大的外掛,可以將橫向頂部菜單在滾動時固定在頂部。外掛支援動態響應式內容,可以動態停止和恢復功能。在轉換時可以隱藏其他物件,例如固定菜單可能會呈現不同的外觀。

固定物件的標識基於 CSS 選擇器。

功能

在固定菜單時可以排除特定物件。這樣可以在不同狀態下創建不同的菜單顯示方式。
在固定菜單中,您可以添加帶有鏈接的標誌圖像。
創建了一系列動畫來實現從一個狀態轉換到另一個狀態,您可以在設置中選擇這些動畫。
在設置中,您可以更改固定菜單的背景顏色,進一步區分其兩種狀態。在設置中,您還可以指定固定菜單的陰影是否存在以及陰影的顏色。這將使網站看起來更具有立體感。

設置列表

CSS 選擇器類或 ID - 主要字段設置 CSS 標準中的類名標識符。在默認情況下,主題“Twenty Ten”或“Twenty Fourteen”中使用“.navbar”。
用於隱藏對象的 CSS 選擇器 - 設置用於隱藏菜單吸附時所需的物件的 CSS 標準中的類(es)的標識符。
設置背景顏色 - 啟用背景顏色的複選框。
固定對象的背景顏色 - 如果啟用,則可以選擇背景顏色的控件。
選項卡 - 固定菜單的不透明度。
最小媒體寬度 - 設置響應主題中停用黏貼菜單的媒體寬度字段。
選擇過渡效果 - 從列表中選擇過渡類型的欄位。現在外掛支援五種過渡方式:滑動、淡入淡出、縮放、旋轉、斜切和自定義。對於自定義過渡,外掛包括文件plugins/sv-sticky-menu/css/style.css。該文件包含一些預設過渡效果,但您也可以添加自己的過渡效果。
開始位置 - 用於滑動過渡的欄位,指示開始滑動的位置,默認值為-55像素。
過渡時間 - 設置過渡時間的欄位,默認值為0.4秒。
對象的 Z 軸索引 - 在某些情況下,菜單可能被隱藏在其他物件下面,這意味著菜單的 Z 軸索引太低。默認情況下,此字段的值為99。
顯示陰影 - 啟用菜單陰影的複選框。
影子顏色 - 如果已啟用,則可選擇影子顏色的控件。
影子透明度 - 輸入影子不透明度的控件。
顯示標誌 - 啟用黏貼菜單中的標誌的複選框。
標誌圖像 - 從媒體庫中選擇標誌圖像的控件。
標誌高度 - 設置標誌圖像高度的控件。
標誌 URL - 設置標誌 URL 的控件。

已測試的主題

該外掛已在以下幾種主題上進行過測試:
* Twenty Ten 2.3
* Twenty Fourteen 2.0
* Storefront 2.2.3
* Bluestreet 1.2.2
* Rara Academic 1.0.8
* Bakes And Cakes 1.1.1
* Wallstreet 1.7.7.4

已測試的瀏覽器

PC Chrome
PC Firefox
PC Opera
PC IE11

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.0.5) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「SV Sticky Menu」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

Small but functional plugin for transforming horizontal top menu to fixed on top when scrolling. Plugin supports dynamic responsive content, dynamicly stop and restore functionality. Can hide other objects when converting, i.e. the sticked menu can look different.
Identification of sticked object based on CSS selector.
Features

The ability to exclude objects when the menu is sticked. This makes it possible to create a different display of menus in different states.
In the sticked menu, you can add a logo image with a link.
To transform from one state to another have been created a series of animations that you can select in the settings.
In the settings, you can change the background color for a sticked menu, which will further distinguish its two states. Also in the settings you can specify the presence and color of a shadow for a sticked menu. This will give the site a more three-dimensional look.

Settings list

CSS Selector class or id – Main field for set the identifier of class name in CSS standard. By default in themes ‘Twenty Ten’ or ‘Twenty Fourteen’ used ‘.navbar’.
CSS Selector for hiding objects – Field for set the identifier(s) of class(es) in CSS standard for objects that need hide while menu is sticky.
Set background color – Checkbox for activating the background color.
Background color of sticky object – The control for selecting the background color if it is activated.
Opacity – Opacity of the sticked menu.
Minimum media width – Field for set media width for deactivating sticking menu in responsive themes.
Select transition – Field for selecting transition type from the list. Now plugin support five transition: Slide, Fade, Scale, Rotate, Skew and Custom. For Custom transition plugin includes file plugins/sv-sticky-menu/css/style.css. As examples this file has some preset transitions but you can include yours own.
Start position – Field used for Slide transition and indicated start sliding position. By default starting position is -55 pixels.
Transition time – Field to set the time of transition. By default 0.4 second.
Z-index of object – In several cases menu can hide benease other objects. Thet’s mean that z-index menu is to low. By default this field has value 99.
Show shadow – Checkbox for activating the menu shadow.
Shadow color – The control for selecting the shadow color if it is activated.
Shadow opacity – The control for input of the shadow opacity.
Show logo – Checkbox for activating the logo in the sticked menu.
Logo image – The control for selecting the logo image from media library.
Logo height – The control for set the logo image height.
Logo URL – The control for set the logo URL.

Themes where plugin was tested
The plugin has been tested with several themes:
* Twenty Ten 2.3
* Twenty Fourteen 2.0
* Storefront 2.2.3
* Bluestreet 1.2.2
* Rara Academic 1.0.8
* Bakes And Cakes 1.1.1
* Wallstreet 1.7.7.4
Tested on

PC Chrome
PC Firefox
PC Opera
PC IE11

延伸相關外掛

文章
Filter
Mastodon