☰

Transparent Navigation Bar

Transform supported site's navigation bar into an acrylic nav bar.

如何安裝

您需要先安裝使用者腳本管理器擴展，如 Tampermonkey、Greasemonkey 或 Violentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey 或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Userscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展，比如 Tampermonkey，才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

（我已經安裝了使用者腳本管理器，讓我安裝！）

如何安裝

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

（我已經安裝了使用者樣式管理器，讓我安裝！）

作者
ShingZhanho
今日安裝
0
安裝總數
186
評價
1 0 0
版本
0.1.0.3
建立日期
2021-04-22
更新日期
2021-04-25
尺寸
4.1 KB
授權條款
未知
腳本執行於
所有網站

transparent-nav.js

What is this?

A tampermonkey user script which generates webpages' navigation bar to acrylic-material.

How to use?

  1. To use user scripts, you will need a browser extension that executes GreasyFork scripts. These are the common extensions for different browsers:
  2. Once you installed the extension, you can click here to install this user script. Make sure you enable the script so that the script can run on different websites.
  3. Encounters problems? Don't hesitate to ask on the discussion page!

Showcase

Checkout the examples:

Effect preview 1 Effect preview 2

Compatibility

The transparent effects rely on the backdrop-filter property of css. Thus, your browser need to support that property. Please note that Firefox does not support backdrop-filter by default, you may need to enable that option manually.

Supported Websites

Here are the supported websites of this script:

Website Name URL Remarks
Cambridge Dictionary dictionary.cambridge.org
Google Classroom classroom.google.com
Google Search www.google.*/search This applies to all area's Google search, i.e. www.google.co.uk, www.google.com.hk etc.
UK Royal Family Website www.royal.uk
W3Schools www.w3schools.com
YouTube www.youtube.com