根据视图更改菜单

Question

感谢您的光临！

我想呼吁你的智慧来解决一个不应该那么难的问题:(

我正在开发一个带有大折叠菜单（如站点地图）的网站，该菜单非常直观但在移动视图中毫无用处，因此我创建了另一个菜单以在移动设备和小屏幕设备上显示。

总结代码如下：

<nav class="navbar navbar-light bg-light ">
            <div class="container-fluid ">
                <a class="navbar-brand" href="index.php" id="btnLogo">
                    <img src="../images/logo.png" width="130" height="80" class="d-inline-block align-top" alt="logo">
                </a>
                    <button class="navbar-toggler navbar-toggler-right float-right" 
                        type="button" 
                        data-toggle="collapse" 
                        data-target="#desktopMenu" 
                        aria-controls="desktopMenu"  
                        aria-expanded="false">
                        <span>MENU</span>
                        <span class="navbar-toggler-icon"></span>
                    </button>

            <!-- Menu for Desktops -->
            <div id="desktopMenu" class="collapse navbar-collapse">...</div>

            <!-- Menu for small screens -->
            <div id="mobileMenu" class="collapse navbar-collapse">...</div>

问题是：有什么方法可以根据视口宽度即时更改 "data-target" 和 "aria-controls" 以在 "desktopMenu" 和 "mobileMenu" 之间更改？

我不知道这种方法是不是correct/better。如果我错了，请不要犹豫，建议另一种方法。

非常感谢！

Answer 1

对于您的情况，有两种方法可以根据视口调整您的页面。一种方法是使用 @media-queries 和 show/hide 一个或另一个具有 display 属性的元素。

这将允许您根据屏幕尺寸调整代码。

@media only screen and (min-width: 1024px) and (max-width: 1024px) {
// in your case: hide an element, show the other 
#desktopMenu { display:none;} // or display block etc
}

您可以根据需要设置width或height。

这里是more about media queries

您还可以这样获取当前视口值：

// Size of browser viewport.
var width = window.innerWidth;
var height = window.innerHeight;

然后据此调整您的代码：

if (height >= yourValue) { // or however you want to check the height
document.getElementById('button').setAttribute('data-target', '#desktopMenu'); // or however you want to add/change attributes
}

希望对您有所帮助

根据视图更改菜单

Change menu depending of the view

html

javascript

css

responsive-design

bootstrap-4