Question

我正在学习语义 - 所以我决定创建一个响应式应用程序，以便更好地理解语义ui的16网格架构。我在列中添加了vertical menu（三列宽）。在870px的宽度上，垂直菜单通过在同一行上设置十三个宽列来打破布局。

我注意到语义ui为我正在使用的垂直菜单提供了各种大小，但是没有示例显示如何创建响应式菜单，所以我使用JavaScript来监听浏览器宽度的变化将菜单隐藏在870像素或更低。

当我以870px手动刷新浏览器时，菜单会隐藏，但是当我将浏览器调整为870px时，菜单不会隐藏（除非我刷新页面）。当将浏览器的大小调整为870px或更低时，我希望隐藏菜单。另外，是否可以将菜单调整为semantic-ui提供的各种大小，以便我不需要以这种方式使用JavaScript？

用于隐藏菜单的JS代码：

 //menu width
    function winPos() {
        var menu = document.querySelector('#test');
        var win = window.matchMedia('(max-width: 870px)');

        if (win.matches) {
            menu.classList.add('hide');
            console.log('goodbye')
        } else{
            menu.classList.remove('hide');
        }
    }
    winPos()

HTML代码段

<div class="three wide column">

            <div id="test" class="ui medium vertical menu">
                <a class="active item">
                    <div class="ui teal label">1</div>
                    Inbox
                </a>
                <a class="item">
                    <div class="ui label">51</div>
                    Spam
                </a>
                <a class="item">
                    <div class="ui label">1</div>
                    Updates
                </a>
                <div class="ui search">
                    <div class="ui icon input">
                        <input class="prompt" type="text" placeholder="friend search...">
                        <i class="search icon"></i>
                    </div>
                    <div class="results">
                    </div>
                </div>
            </div>
        </div>
        <!-- three -->

        <div class="thirteen wide column">
            <div class="ui special cards"> ...

CSS：

.hide{
display: none!important;
}

使Semantic-UI垂直菜单响应

0 个答案: