使语义 UI 菜单折叠和响应答案

【问题标题】：Make Semantic UI menu collapse and responsive使语义 UI 菜单折叠和响应
【发布时间】：2019-10-12 02:36:30
【问题描述】：

我在文档上到处找，什么也没有。我正在寻找一个类似的导航栏折叠功能，该功能用于引导程序中的汉堡包（我可以点击）到其中的侧面和菜单项。请帮忙。语义 UI 看起来不错，但使用起来可能很痛苦

【问题讨论】：

【解决方案1】：

这是一个非常好的（也很简单）的实现（信用：https://codepen.io/designosis/pen/LbMgya）

HTML

<div class="ui grid">

    <div class="computer only row">
        <div class="column">
            <div class="ui menu">
                <a class="item">Menu Item A</a>
                <a class="item">Menu Item B</a>
                <a class="item">Menu Item C</a>
                <a class="item">Menu Item D</a>
            </div>
        </div>
    </div>

     <div class="tablet mobile only row">
        <div class="column">
            <div class="ui menu">
                <a id="mobile_item" class="item"><i class="bars icon"></i></a>
            </div>
        </div>
    </div>

</div>

<div class="ui pushable segment">
        <div class="ui sidebar vertical menu">
            <a class="item">Menu Item A</a>
            <a class="item">Menu Item B</a>
            <a class="item">Menu Item C</a>
            <a class="item">Menu Item D</a>
        </div>
        <div class="pusher">
                <div id="content" class="ui segment">
                        Content here
                </div>
         </div>
</div>

CSS

#content {
  min-height: 100px;
}
.ui.grid{
  padding: 0 !important;
}
.pushable.segment{
  margin: 0 !important;
}

JavaScript

$('.ui.sidebar').sidebar({
  context: $('.ui.pushable.segment'),
  transition: 'overlay'
}).sidebar('attach events', '#mobile_item');

【讨论】：

【解决方案2】：

这是我使用 Semantic-UI-React 中可用的响应组件制作的可折叠 NavMenu 组件：

import React, { useState } from 'react';
import { Menu, Responsive, Dropdown, DropdownMenu } from 'semantic-ui-react';
import { withRouter } from 'react-router-dom';
import LogoutModal from './LogoutModal';

function NavMenu(props) {
    const [activeItem, setActiveItem] = useState('Laptop Item')
    const [showModal, setShowModal] = useState(false)


    return (
        <div>
            <Menu pointing secondary>
                <Responsive as={Menu.Item} minWidth={790}
                    name='Laptop Item'
                    active={activeItem === 'Laptop Item'}
                    onClick={() => setActiveItem('Test Item')}
                />
                <Responsive as={Menu.Item} minWidth={790}
                    name='Laptop Item 2'
                    active={activeItem === 'Laptop Item 2'}
                    onClick={() => setActiveItem('Test Item 2')}
                />
                <Responsive as={Menu.Item} minWidth={790}
                    name='Laptop Item 3'
                    active={activeItem === 'Laptop Item 3'}
                    onClick={() => setActiveItem('Test Item 3')}
                />
                <Menu.Menu position = 'right'>
                    <Responsive as ={Menu.Item} minWidth={790}
                        name = "Sign Out"
                        onClick={() => setShowModal(true)}
                    />
                </Menu.Menu>
                <Responsive as ={Menu.Menu} maxWidth={789}  position='right'>
                    <Dropdown
                        item
                        icon ='bars'
                        >
                        <Dropdown.Menu>
                            <Dropdown.Item text='Mobile/Tablet Item 1'/>
                            <Dropdown.Item text='Mobile/Tablet Item 2'/>
                            <Dropdown.Item text='Mobile/Tablet Item 3'/>
                            <Dropdown.Item text='Sign Out'/>
                        </Dropdown.Menu>
                    </Dropdown>
                </Responsive>
            </Menu>
        </div>
    )
}

export default withRouter(NavMenu);

我想要一个传统的导航栏，左侧是链接，右侧是注销按钮。虽然 iPad 的像素宽度（如 Chrome 开发工具中所示）是 768 像素，但出于某种原因，我的断点是 790 像素（如果有人能告诉我为什么会这样，不胜感激）。这就是为什么“笔记本电脑物品”的最小宽度为 790，而“手机/平板电脑物品”的最大宽度为 789。

我没有在 Semantic-UI 文档中找到响应式组件。它在 Semantic-UI-React 的“插件”下列出。

如果您不使用 React，另一种方法是为移动用户实现侧边栏。

【讨论】：

【解决方案3】：

如果您计入语义，最正确的是您使用标签列表作为导航栏并使用 javascript 隐藏或不隐藏它。真的html语义很差，很复杂的代码做一些简单的事情

【讨论】：