https://cznwiki.com/index.php?action=history&feed=atom&title=MediaWiki%3AGadget-Navbar.js
MediaWiki:Gadget-Navbar.js - Revision history
2026-04-17T13:16:55Z
Revision history for this page on the wiki
MediaWiki 1.45.3
https://cznwiki.com/index.php?title=MediaWiki:Gadget-Navbar.js&diff=6&oldid=prev
律Rhyme: Style Edit
2026-04-17T07:55:43Z
<p>Style Edit</p>
<a href="https://cznwiki.com/index.php?title=MediaWiki:Gadget-Navbar.js&diff=6&oldid=3">Show changes</a>
律Rhyme
https://cznwiki.com/index.php?title=MediaWiki:Gadget-Navbar.js&diff=3&oldid=prev
律Rhyme: Created page with "(function () { var style = /* ================= Top Navbar Base Styles ================= */ '.czn-navbar{position:fixed;top:0;left:0;width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:9999;' + 'background: rgba(255, 255, 255, 0.75);' + // White background with transparency 'backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);' + // Frosted glass effect 'borde..."
2026-04-17T07:31:09Z
<p>Created page with "(function () { var style = <span class="autocomment">================= Top Navbar Base Styles =================: </span> '.czn-navbar{position:fixed;top:0;left:0;width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:9999;' + 'background: rgba(255, 255, 255, 0.75);' + // White background with transparency 'backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);' + // Frosted glass effect 'borde..."</p>
<p><b>New page</b></p><div>(function () {<br />
var style =<br />
/* ================= Top Navbar Base Styles ================= */<br />
'.czn-navbar{position:fixed;top:0;left:0;width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:9999;' +<br />
'background: rgba(255, 255, 255, 0.75);' + // White background with transparency<br />
'backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);' + // Frosted glass effect<br />
'border-bottom: 1px solid rgba(255, 255, 255, 0.3);' +<br />
'box-shadow: 0 4px 15px rgba(0,0,0,0.05);}' +<br />
<br />
/* Flexbox Layout (Left, Center, Right) */<br />
'.czn-nav-left,.czn-nav-right{flex:1;display:flex;align-items:center}' +<br />
'.czn-nav-left{justify-content:flex-start}' +<br />
'.czn-nav-center{display:flex;justify-content:center}' +<br />
'.czn-nav-right{justify-content:flex-end;gap:20px}' +<br />
<br />
/* ================= Left Logo Section ================= */<br />
'.czn-logo-group{display:flex;align-items:center}' +<br />
'.czn-logo{height:45px;width:auto;object-fit:contain;display:block}' +<br />
<br />
/* ================= Right Search Box ================= */<br />
'.czn-search-box{position:relative}' +<br />
'.czn-search-box input{background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);color:#333;padding:8px 15px;border-radius:20px;width:200px;outline:none;transition:all 0.3s;font-size:14px}' +<br />
'.czn-search-box input::placeholder{color:rgba(0,0,0,0.4)}' +<br />
'.czn-search-box input:focus{border-color:#ff540c;background:rgba(255,255,255,0.8)}' +<br />
'.czn-search-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:#ff540c;color:#fff;border:none;padding:5px 12px;border-radius:16px;cursor:pointer;font-size:12px;font-weight:bold;transition:all 0.3s}' +<br />
'.czn-search-btn:hover{background:#ff6a2a}' +<br />
<br />
/* ================= Navigation Menu Styles ================= */<br />
'.czn-nav-menu{display:flex;list-style:none;gap:35px;margin:0;padding:0;height:100%;align-items:center}' +<br />
'.czn-nav-menu li{position:relative;list-style:none}' +<br />
'.czn-nav-menu>li>a{text-decoration:none!important;display:flex;align-items:center;padding:10px 0;transition:all 0.3s}' +<br />
<br />
/* Top-level Menu Font (English Only) */<br />
'.czn-en{font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}' +<br />
'.czn-nav-menu>li>a .czn-en{color:#333;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;transition:color 0.3s}' +<br />
<br />
/* Hover and Active State Highlighting */<br />
'.czn-nav-menu>li:hover>a .czn-en,.czn-nav-menu>li.czn-active>a .czn-en{color:#ff540c}' +<br />
<br />
/* ================= Dropdown Menu Styles (Frosted Glass Effect) ================= */<br />
'.czn-dropdown-2,.czn-dropdown-3{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);' +<br />
'background: rgba(255, 255, 255, 0.9);' + <br />
'backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);' +<br />
'border: 1px solid rgba(255, 255, 255, 0.5);' +<br />
'border-radius: 8px; min-width: 170px; padding: 8px 0; opacity: 0; visibility: hidden; transition: all 0.3s ease; ' +<br />
'box-shadow: 0 10px 25px rgba(0,0,0,0.1); list-style: none; margin: 0;}' +<br />
<br />
'.czn-dropdown-3{top:0;left:100%;transform:translateX(10px) translateY(0)}' +<br />
<br />
'.czn-nav-menu li:hover>.czn-dropdown-2{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}' +<br />
'.czn-dropdown-2 li:hover>.czn-dropdown-3{opacity:1;visibility:visible;transform:translateX(0) translateY(0)}' +<br />
<br />
/* Dropdown Item Styles */<br />
'.czn-dropdown-2 li a,.czn-dropdown-3 li a{padding:10px 20px;text-align:left;display:block;text-decoration:none!important;transition:all 0.2s}' +<br />
'.czn-dropdown-2 .czn-en,.czn-dropdown-3 .czn-en{color:#555;font-size:13px;font-weight:600;display:block}' +<br />
'.czn-dropdown-2 li:hover{background:rgba(255,84,12,0.08)}' +<br />
'.czn-dropdown-2 li:hover>a .czn-en,.czn-dropdown-3 li:hover>a .czn-en{color:#ff540c}' +<br />
<br />
/* ================= Responsive Layout (Mobile) ================= */<br />
'.czn-menu-toggle{display:none;color:#333;font-size:28px;cursor:pointer;background:none;border:none;line-height:1}' +<br />
'@media(max-width:900px){' +<br />
'.czn-navbar{padding:0 20px}' +<br />
'.czn-logo-group{margin-left:10px}' +<br />
'.czn-search-box{display:none}' +<br />
'.czn-menu-toggle{display:block}' +<br />
'.czn-nav-menu{position:fixed;top:0;left:-100%;width:260px;height:100vh;background:rgba(255,255,255,0.98);flex-direction:column;gap:0;padding-top:80px;transition:left 0.4s;overflow-y:auto;z-index:10000;box-shadow: 5px 0 15px rgba(0,0,0,0.1);}' +<br />
'.czn-nav-menu.czn-active{left:0}' +<br />
'.czn-nav-menu li{width:100%}' +<br />
'.czn-nav-menu>li>a{padding:15px 25px;border-bottom:1px solid rgba(0,0,0,0.05);justify-content:flex-start}' +<br />
'.czn-dropdown-2,.czn-dropdown-3{position:static;transform:none!important;opacity:1;visibility:visible;box-shadow:none;background:transparent;padding:0;width:100%}' +<br />
'.czn-dropdown-2 li a{padding-left:40px}' +<br />
'.czn-dropdown-3 li a{padding-left:60px}' +<br />
'.czn-dropdown-3{display:none}' +<br />
'.czn-dropdown-3.czn-open{display:block}' +<br />
'}';<br />
<br />
var wikiBase = 'https://cznwiki.com/';<br />
<br />
// Helper function to build wiki URLs<br />
function wikiUrl(title) {<br />
return wikiBase + title;<br />
}<br />
<br />
var navHtml =<br />
'<nav class="czn-navbar">' +<br />
/* Left: Mobile Toggle + Single Logo */<br />
'<div class="czn-nav-left">' +<br />
'<button class="czn-menu-toggle" id="czn-mobile-menu-btn">☰</button>' +<br />
'<div class="czn-logo-group">' +<br />
'<a href="' + wikiUrl('Main_Page') + '">' +<br />
'<img src="https://cznwiki.com/images/c/c9/Logo.png" alt="LOGO" class="czn-logo">' +<br />
'</a>' +<br />
'</div>' +<br />
'</div>' +<br />
<br />
/* Center: Navigation Menu (English Only) */<br />
'<div class="czn-nav-center">' +<br />
'<ul class="czn-nav-menu" id="czn-nav-menu">' +<br />
<br />
/* HOME Section */<br />
'<li>' +<br />
'<a href="' + wikiUrl('Main_Page') + '"><span class="czn-en">HOME</span></a>' +<br />
'<ul class="czn-dropdown-2">' +<br />
'<li><a href="' + wikiUrl('Main_Page') + '"><span class="czn-en">BACK</span></a></li>' +<br />
'<li><a href="https://cznwiki.com/index.php?title=%E9%A6%96%E9%A1%B5&action=purge"><span class="czn-en">REFRESH</span></a></li>' +<br />
'</ul>' +<br />
'</li>' +<br />
<br />
/* WIKI Section */<br />
'<li>' +<br />
'<a href="#"><span class="czn-en">WIKI</span></a>' +<br />
'<ul class="czn-dropdown-2">' +<br />
'<li><a href="' + wikiUrl('Combatant') + '"><span class="czn-en">Combatant</span></a></li>' +<br />
'<li><a href="' + wikiUrl('Partner') + '"><span class="czn-en">Partner</span></a></li>' +<br />
'<li><a href="' + wikiUrl('Card') + '"><span class="czn-en">Card</span></a></li>' +<br />
'<li><a href="' + wikiUrl('Relic') + '"><span class="czn-en">Relic</span></a></li>' +<br />
'<li><a href="' + wikiUrl('Encounter') + '"><span class="czn-en">Encounter</span></a></li>' +<br />
'</ul>' +<br />
'</li>' +<br />
<br />
/* DATA Section */<br />
'<li>' +<br />
'<a href="#"><span class="czn-en">DATA</span></a>' +<br />
'<ul class="czn-dropdown-2">' +<br />
'<li><a href="' + wikiUrl('Item') + '"><span class="czn-en">Item</span></a></li>' +<br />
'<li class="czn-has-level-3">' +<br />
'<a href="#" class="czn-l3-toggle"><span class="czn-en">Art</span></a>' +<br />
'<ul class="czn-dropdown-3">' +<br />
'<li><a href="' + wikiUrl('Official_Media') + '"><span class="czn-en">Official Media</span></a></li>' +<br />
'<li><a href="' + wikiUrl('Fanart') + '"><span class="czn-en">Fanart</span></a></li>' +<br />
'</ul>' +<br />
'</li>' +<br />
'</ul>' +<br />
'</li>' +<br />
<br />
/* TOOLS Section */<br />
'<li>' +<br />
'<a href="' + wikiUrl('Deck_Builder') + '"><span class="czn-en">TOOLS</span></a>' +<br />
'<ul class="czn-dropdown-2">' +<br />
'<li><a href="' + wikiUrl('Deck_Builder') + '"><span class="czn-en">Deck Builder</span></a></li>' +<br />
'</ul>' +<br />
'</li>' +<br />
<br />
'</ul>' +<br />
'</div>' +<br />
<br />
/* Right: Search Box */<br />
'<div class="czn-nav-right">' +<br />
'<div class="czn-search-box">' +<br />
'<form action="https://cznwiki.com/index.php" method="get">' +<br />
'<input type="hidden" name="title" value="Special:Search">' +<br />
'<input type="text" name="search" placeholder="Search Wiki...">' +<br />
'<button type="submit" class="czn-search-btn">GO</button>' +<br />
'</form>' +<br />
'</div>' +<br />
'</div>' +<br />
'</nav>';<br />
<br />
function q(s) { return document.querySelector(s); }<br />
<br />
// Initialization Function<br />
var initNav = function () {<br />
if (q('.czn-navbar')) return;<br />
<br />
/* Inject Styles into Head */<br />
var styleTag = document.createElement('style');<br />
styleTag.type = 'text/css';<br />
styleTag.appendChild(document.createTextNode(style));<br />
document.head.appendChild(styleTag);<br />
<br />
/* Inject Navbar HTML into Body */<br />
document.body.insertAdjacentHTML('afterbegin', navHtml);<br />
<br />
/* Mobile Sidebar Toggle Logic */<br />
var mobileBtn = document.getElementById('czn-mobile-menu-btn');<br />
var navMenu = document.getElementById('czn-nav-menu');<br />
<br />
if (mobileBtn && navMenu) {<br />
mobileBtn.addEventListener('click', function () {<br />
var isActive = navMenu.classList.toggle('czn-active');<br />
mobileBtn.innerHTML = isActive ? '✕' : '☰';<br />
});<br />
<br />
// Close menu when clicking outside<br />
document.addEventListener('click', function(e) {<br />
if (navMenu.classList.contains('czn-active') && !navMenu.contains(e.target) && !mobileBtn.contains(e.target)) {<br />
navMenu.classList.remove('czn-active');<br />
mobileBtn.innerHTML = '☰';<br />
}<br />
});<br />
}<br />
<br />
/* Mobile Sub-menu (Level 3) Expand Logic */<br />
var level3Toggles = document.querySelectorAll('.czn-l3-toggle');<br />
level3Toggles.forEach(function (toggle) {<br />
toggle.addEventListener('click', function (e) {<br />
if (window.innerWidth <= 900) {<br />
e.preventDefault();<br />
var subMenu = this.nextElementSibling;<br />
if (subMenu) subMenu.classList.toggle('czn-open');<br />
}<br />
});<br />
});<br />
};<br />
<br />
// Run Initialization when ready<br />
if (document.readyState === 'complete' || document.readyState === 'interactive') {<br />
initNav();<br />
} else {<br />
document.addEventListener('DOMContentLoaded', initNav);<br />
}<br />
})();</div>
律Rhyme