当前位置: 首页 > 知识库问答 >
问题:

带有隐藏子菜单的浮动菜单

陆仲渊
2023-03-14

所以我想做的是让我的主菜单浮动,但同时是可调整大小的(窗口宽度),我也有一个隐藏的子菜单,我希望它遵循主菜单的规则。

此外,主菜单并不是从页面的顶部开始,但当你向下滚动时,我希望它能贴在顶部边缘并在那里Rest。

jsFiddle在这里

CSS

#menutop {
    color: #FFF;
    display: block;
    padding-top: 5px;
    text-transform: none;
    text-align: center;
    font-size: 20px;
    word-spacing: 1em;
    font-weight: normal;
    height: 65px;
    font-family: 'airship_27regular', sans-serif;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 9000;
}

.dropdownwrap {
    height: 150px;
    background-color: rgb(245, 245, 245);
    display: none;
    padding: 20px;
    width: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
}

#dropdown {
    text-transform: none;
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.05em;
    color: rgb(102, 102, 102);
    position: relative;
    z-index: 99999;
    text-decoration: none;
}

#dropdown:hover {
    text-decoration: none;
    color: #FFFFFF;
}

#CenterMenu {
    display: block;
    height: 100px;
    width: 700px;
    margin-top: 20px;
    margin-bottom: 0px;
    position: relative;
    z-index: 999999;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.insideMenu {
    display: block;
    float: right;
    height: 88px;
    width: 130px;
    margin-top: 12px;
}

.insideMenu h1 {
    font-family: 'airship_27regular', sans-serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: lighter;
    word-spacing: 12px;
    letter-spacing: 0.1em;
    color: rgb(0, 0, 0);
    text-align: left;
}

.insideMenu p {
    font-size: 10px;
    line-height: 18px;
    font-weight: 400;
    word-spacing: 1.5px;
    letter-spacing: 0.1em;
    color: rgb(0, 102, 102);
    text-align: left;
}

JAVASCRIPT(jQuery的什么版本?)

$(document).ready(function (e) {

    $('#dropdown').on('click', function () {

        $('.dropdownwrap').slideToggle();

    });

});

function MM_preloadImages() { //v3.0
    var d = document;
    if (d.images) {
        if (!d.MM_p) d.MM_p = new Array();
        var i, j = d.MM_p.length, a = MM_preloadImages.arguments;
        for (i = 0; i < a.length; i++)
            if (a[i].indexOf("#") != 0) {
                d.MM_p[j] = new Image;
                d.MM_p[j++].src = a[i];
            }
    }
}

function MM_swapImgRestore() { //v3.0
    var i, x, a = document.MM_sr;
    for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
}

function MM_findObj(n, d) { //v4.01
    var p, i, x;
    if (!d) d = document;
    if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
        d = parent.frames[n.substring(p + 1)].document;
        n = n.substring(0, p);
    }
    if (!(x = d[n]) && d.all) x = d.all[n];
    for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
    for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document);
    if (!x && d.getElementById) x = d.getElementById(n);
    return x;
}

function MM_swapImage() { //v3.0
    var i, j = 0, x, a = MM_swapImage.arguments;
    document.MM_sr = new Array;
    for (i = 0; i < (a.length - 2); i += 3)
        if ((x = MM_findObj(a[i])) != null) {
            document.MM_sr[j++] = x;
            if (!x.oSrc) x.oSrc = x.src;
            x.src = a[i + 2];
        }
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

HTML(固定HTML格式,删除额外标记,添加缺失标记)

<div id="menutop">
    <p>
        <a href="index.html"> ABOUT</a>
        <a href="#" id="dropdown" name="dropdown" title="Click This Button"> WORK</a>
        <a href="contact.html"> CONTACT</a>
    </p>
</div>
<div class="dropdownwrap">
    <div id="CenterMenu">
        <div class="insideMenu">
            <h1>BRANDING</h1>
            <p>
                <a href="JessWork.html">X20</a>
                <br />
                <a href="">FAUNE DU QC.</a>
                <br />
                <a href="">TIANGLE</a>
                <br />
                <a href="">NAT GEO</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>MULTIMEDIA</h1>
            <p>
                <a href="">SMOKED MEAT</a>
                <br />
                <a href="">CITYSCAPES</a>
                <br />
                <a href="">M. MASON</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>ILLUSTRATION</h1>
            <p>
                <a href="">TUNAS & <br />TRUMPETS</a>
                <br />
                <a href="">PUNCTUATION PAMPHLETS</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>PACKAGING</h1>
            <p>
                <a href="">SPICE OF LIFE</a>
                <br />
                <a href="">PERSONAL<br />PRESS KIT</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>PUBLICATION</h1>
            <p>
                <a href="">JOHN CAGE</a>
                <br />
                <a href="">LEAD</a>
                <br />
                <a href="">SOCIAL ISSUE</a>
                <br />
                <a href="">CALL FESTIVAL</a>
            </p>
        </div>
    </div>
</div>

共有1个答案

钱承允
2023-03-14

看看这个:

http://jsfidle.net/j62ft/4/

基本上,当你向下滚动页面时,它会检测视口的顶部何时碰到菜单的顶部,然后向菜单中添加一个fixed类。这具有将菜单对接到屏幕顶部的效果。不过,这样做意味着将子菜单移到主菜单中,这样在你向下滚动页面后,它仍然会打开。

JS

$(document).ready(function (e) {

    new mainMenu().load();

});

function mainMenu() {

    var thisObj = this,
        menu = $("#menutop"),
        win = $(window),
        pos =  menu.offset().top;

    thisObj.load = function() {

        // Bind slideToggle

        $('#dropdown').on('click', function () {

            $('.dropdownwrap').slideToggle();

        });

        // Set Fixed

        win.on("scroll", function() {    

            if( win.scrollTop() > pos) {
                menu.addClass("fixed");
            } else {
                menu.removeClass("fixed");
            }            
        });        
    }    
}

HTML

<div id="menutop">
    <p>
        <a href="index.html"> ABOUT</a>
        <a href="#" id="dropdown" name="dropdown" title="Click This Button"> WORK</a>
        <a href="contact.html"> CONTACT</a>
    </p>

<div class="dropdownwrap">
    <div id="CenterMenu">
        <div class="insideMenu">
            <h1>BRANDING</h1>
            <p>
                <a href="JessWork.html">X20</a>
                <br />
                <a href="">FAUNE DU QC.</a>
                <br />
                <a href="">TIANGLE</a>
                <br />
                <a href="">NAT GEO</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>MULTIMEDIA</h1>
            <p>
                <a href="">SMOKED MEAT</a>
                <br />
                <a href="">CITYSCAPES</a>
                <br />
                <a href="">M. MASON</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>ILLUSTRATION</h1>
            <p>
                <a href="">TUNAS & <br />TRUMPETS</a>
                <br />
                <a href="">PUNCTUATION PAMPHLETS</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>PACKAGING</h1>
            <p>
                <a href="">SPICE OF LIFE</a>
                <br />
                <a href="">PERSONAL<br />PRESS KIT</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>PUBLICATION</h1>
            <p>
                <a href="">JOHN CAGE</a>
                <br />
                <a href="">LEAD</a>
                <br />
                <a href="">SOCIAL ISSUE</a>
                <br />
                <a href="">CALL FESTIVAL</a>
            </p>
        </div>
    </div>
</div>

</div>

CSS

body {
    margin: 0;
}

#menutop {
    color: #FFF;
    text-transform: none;
    text-align: center;
    font-size: 20px;
    word-spacing: 1em;
    font-weight: normal;
    font-family: 'airship_27regular', sans-serif;
    letter-spacing: 0.05em;
    z-index: 9000;
    background: #ccc;
}
#menutop p {
    margin: 0;
    padding: 20px;
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
}


.dropdownwrap {
    height: 150px;
    background-color: rgb(245, 245, 245);
    display: none;
    padding: 20px;
    width: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
}

#dropdown {
    text-transform: none;
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.05em;
    color: rgb(102, 102, 102);
    position: relative;
    z-index: 99999;
    text-decoration: none;
}

#dropdown:hover {
    text-decoration: none;
    color: #FFFFFF;
}

#CenterMenu {
    display: block;
    height: 100px;
    width: 700px;
    margin-top: 20px;
    margin-bottom: 0px;
    position: relative;
    z-index: 999999;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.insideMenu {
    display: block;
    float: right;
    height: 88px;
    width: 130px;
    margin-top: 12px;
}

.insideMenu h1 {
    font-family: 'airship_27regular', sans-serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: lighter;
    word-spacing: 12px;
    letter-spacing: 0.1em;
    color: rgb(0, 0, 0);
    text-align: left;
}

.insideMenu p {
    font-size: 10px;
    line-height: 18px;
    font-weight: 400;
    word-spacing: 1.5px;
    letter-spacing: 0.1em;
    color: rgb(0, 102, 102);
    text-align: left;
}
 类似资料:
  • 我正在尝试隐藏ActionBar中的子菜单和SearchView。我在用ActionBarsherlock。 我想通过点击按钮隐藏子菜单和SearchView

  • 我在Confluence上运行的HTML/CSS主题上实现了以下菜单。 默认情况下,我正在运行的主题提供了激活所有菜单项的下拉菜单的选项。但是,我希望只为其中一个菜单项显示下拉菜单。 该主题没有提供切换特定菜单项下拉列表的选项,这就是为什么我不得不求助于自定义CSS。 与发行说明菜单项对应的HTML如下-- 此外,添加以下自定义CSS将删除所有菜单项的下拉菜单。 我希望CSS有条件地不显示RELE

  • 我需要在主页上隐藏我的菜单,让它在向下滚动时出现。我正在使用Wordpress和Elementor。我能够通过安装“自定义CSS&JS”插件来实现这一点,它允许我添加任何我需要的JS代码。 我使用elementor自定义CSS在菜单部分添加了以下代码: null null 然后我用我安装的插件将这个Java脚本添加到我的网站上, null null 这做了工作,但现在菜单是隐藏在所有网页上的网站和

  • 我有一个JavaFX ContextMenu分配给鼠标右键单击一个scrollpane。它会打开,但当您在scrollpane外部单击时,它不会关闭。我可以在scrollpane中添加另一个鼠标事件来隐藏它,但是这只能解决一个问题。主要的问题是,当我单击scrollpane的任何组件时,上下文菜单仍然是打开的。 示例:通过鼠标右键单击打开弹出窗口,然后单击按钮。弹出菜单仍然打开。 文档中说有一个s

  • 我使用下面的代码在单击锚时显示/隐藏导航菜单。 我遇到的问题是,第一次加载页面时,我必须单击锚两次才能显示菜单。之后,我可以通过单击切换菜单。我也可以在文档的任意位置单击菜单来隐藏它。 有没有人看到下面的代码有问题,或者知道当用户单击菜单时隐藏菜单的更好方法?

  • 我创建了一个包含三个项目的菜单:menu1、menu2、Menu3。 我希望能够单击菜单内的每个按钮,并显示相关的容器。 这已经管用了。 我似乎无法使相关的在再次单击按钮时隐藏起来。 我的代码: null null