登录
当前位置： 首页 > 知识库问答 >
问题：

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

陆仲渊
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

    我正在尝试隐藏ActionBar中的子菜单和SearchView。我在用ActionBarsherlock。 我想通过点击按钮隐藏子菜单和SearchView

  • CSS隐藏特定菜单项的下拉菜单

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

  • 在wordpress上隐藏菜单

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

  • JavaFX上下文菜单不会自动隐藏

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

  • 当用户点击关闭菜单时，有没有更好的方法隐藏菜单？

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

  • 菜单n单击显示并隐藏div

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

相关问答

当用户点击关闭菜单时，有没有更好的方法隐藏菜单？菜单n单击显示并隐藏div隐藏操作栏中的菜单选项在Android应用程序中显示弹出子菜单时隐藏顶层菜单如何在ActionBar中隐藏菜单项？

相关文章

layui树形菜单动态遍历的例子带悬停的Bootstrap下拉菜单Android 带有弹出收缩动画的扇形菜单实例带Bootstrap的可滚动菜单-菜单在不应该扩展其容器的情况下静态下拉菜单到动态下拉菜单Coldfusion

相关阅读

Bootstrap 下拉菜单Bootstrap4 下拉菜单Eclipse 导航菜单Eclipse 搜索菜单AWT 菜单组件

相关工具

滚动菜单动态下拉菜单四格菜单旋转菜单左右菜单Demo

相关文档

Git 菜单鸟哥的 Linux 私房菜：基础学习篇 第四版Markdown 简单的世界JFinal 极速开发框架收藏 v4.9.01猴子都能懂的 GIT 入门
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.