logo标签列表

使Semantic UI菜单可折叠且响应式

csssemantic-ui
4

我在文档中搜索了很久，但没有找到。我正在寻找一个类似于bootstrap使用汉堡包（可以点击）折叠导航栏的功能，将菜单项放在里面。请帮忙。 Semantic UI看起来不错，但使用起来可能会很麻烦。

3个回答
4

这是一个相当不错的（且简单易懂的）实现（来源：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');
3

我使用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);

我将为您翻译关于it技术的文章：

我希望使用传统的导航栏，将链接放在左侧，将注销按钮放在右侧。尽管iPad的像素宽度（如Chrome开发工具中所示）为768px，但由于某种原因，我的断点是790px（如果有人能告诉我为什么这样就非常感激）。这就是为什么“笔记本电脑项目”的最小宽度为790，而“移动/平板电脑项目”的最大宽度为789。

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

如果您不使用React，则可以为移动用户实现侧边栏。

0
如果你在注重语义方面的话，最正确的做法是使用标签列表作为导航栏，通过JavaScript来隐藏或不隐藏它。 实际上HTML语义化较差，需要非常复杂的代码来实现简单的功能。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接