MediaWiki:Common.css: Difference between revisions

From HandWiki Stage
Jump to navigation Jump to search
Created page with "mw.loader.using('mediawiki.util', function () { $(function () { if ($('#handwiki-topnav').length) { return; } var sidebarLinks = []; $('#mw-panel a').each(function () { var text = $(this).text().trim(); var href = $(this).attr('href'); if (text && href) { sidebarLinks.push({ text: text, href: href }); }..."
 
No edit summary
Line 1: Line 1:
mw.loader.using('mediawiki.util', function () {
/* HandWiki Stage top roll-down navigation */
    $(function () {
#handwiki-topnav {
        if ($('#handwiki-topnav').length) {
    display: flex;
            return;
    gap: 12px;
        }
    align-items: flex-start;
    margin: 0 0 12px 0;
    padding: 8px 10px;
    border-bottom: 1px solid #c8ccd1;
    background: #fff8cc;
    font-size: 14px;
}


        var sidebarLinks = [];
.handwiki-dropdown {
    position: relative;
    display: inline-block;
}


        $('#mw-panel a').each(function () {
.handwiki-dropdown-button {
            var text = $(this).text().trim();
    border: 1px solid #a2a9b1;
            var href = $(this).attr('href');
    background: #ffffff;
    padding: 6px 12px;
    cursor: pointer;
    min-width: 170px;
    text-align: left;
    font-weight: bold;
}


            if (text && href) {
.handwiki-dropdown-content {
                sidebarLinks.push({
    display: none;
                    text: text,
    position: absolute;
                    href: href
    z-index: 9999;
                });
    min-width: 220px;
            }
    background: #ffffff;
        });
    border: 1px solid #a2a9b1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    padding: 8px 0;
}


        var sidebarMenu = $('<div class="handwiki-dropdown"></div>');
.handwiki-dropdown:hover .handwiki-dropdown-content {
        sidebarMenu.append('<div class="handwiki-dropdown-button">Sidebar ▾</div>');
    display: block;
}


        var sidebarContent = $('<div class="handwiki-dropdown-content"></div>');
.handwiki-dropdown-content a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}


        sidebarLinks.forEach(function (link) {
.handwiki-dropdown-content a:hover {
            sidebarContent.append(
    background: #eaecf0;
                $('<a></a>').attr('href', link.href).text(link.text)
}
            );
        });
 
        sidebarMenu.append(sidebarContent);
 
        var secondMenu = $('<div class="handwiki-dropdown"></div>');
        secondMenu.append('<div class="handwiki-dropdown-button">Second menu ▾</div>');
 
        var secondContent = $('<div class="handwiki-dropdown-content"></div>');
        secondContent.append('<a href="/index.php/Book:Quantum_Collection">Quantum Collection</a>');
        secondContent.append('<a href="/index.php/Book:Quantum_Collection/Matter_(by_scale)">Matter by scale</a>');
        secondContent.append('<a href="/index.php/Book:Quantum_Collection/Methods_and_tools">Methods and tools</a>');
        secondContent.append('<a href="/index.php/Special:RecentChanges">Recent changes</a>');
        secondContent.append('<a href="/index.php/Special:SpecialPages">Special pages</a>');
 
        secondMenu.append(secondContent);
 
        var topnav = $('<div id="handwiki-topnav"></div>');
        topnav.append(sidebarMenu);
        topnav.append(secondMenu);
 
        $('#content, .mw-body').first().before(topnav);
    });
});

Revision as of 16:49, 9 May 2026

/* HandWiki Stage top roll-down navigation */
#handwiki-topnav {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 12px 0;
    padding: 8px 10px;
    border-bottom: 1px solid #c8ccd1;
    background: #fff8cc;
    font-size: 14px;
}

.handwiki-dropdown {
    position: relative;
    display: inline-block;
}

.handwiki-dropdown-button {
    border: 1px solid #a2a9b1;
    background: #ffffff;
    padding: 6px 12px;
    cursor: pointer;
    min-width: 170px;
    text-align: left;
    font-weight: bold;
}

.handwiki-dropdown-content {
    display: none;
    position: absolute;
    z-index: 9999;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #a2a9b1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    padding: 8px 0;
}

.handwiki-dropdown:hover .handwiki-dropdown-content {
    display: block;
}

.handwiki-dropdown-content a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

.handwiki-dropdown-content a:hover {
    background: #eaecf0;
}