Question

这是我的导航栏菜单代码

$(function () {
	$(".dropdown").dropdown();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css" rel="stylesheet"/>
<div class="ui container">
    <div class="ui secondary extra-large menu">
        <a class="item no-background brand" href="/">Brand</a>
        <a class="item no-background" href="/">Home</a>
        <a class="item no-background" href="/">Products</a>
        <a class="item no-background" href="/">Testimonials</a>
        <div class="ui no-background dropdown pointing item">
            Services
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Mobile</div>
                <div class="item">Tablet</div>
                <div class="item">Computer</div>
            </div>
        </div>
        <div class="ui dropdown pointing item">
            Other
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Hosting</div>
                <div class="item">Webmail</div>
                <div class="item">DNS</div>
            </div>
        </div>
        <div class="right item">
            <button class="ui button">Create Account</button>
        </div>
        <div class="right item">
            <button class="ui primary button">Login</button>
        </div>
    </div>

</div>

我希望我的菜单项不显示在移动设备的下一行，但它给了我很长的水平滚动。如果可能的话，我希望他们根据屏幕尺寸进行调整。

Answer 1

您可以使用可堆叠菜单。 Howerver，在文档中提到：

可堆叠菜单仅用于简单的菜单内容。堆叠菜单不会复制垂直的所有其他样式菜单，如调整下拉位置。

$(function () {
	$(".dropdown").dropdown();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css" rel="stylesheet"/>
<div class="ui container">
    <div class="ui secondary extra-large stackable menu">
        <a class="item no-background brand" href="/">Brand</a>
        <a class="item no-background" href="/">Home</a>
        <a class="item no-background" href="/">Products</a>
        <a class="item no-background" href="/">Testimonials</a>
        <div class="ui no-background dropdown pointing item">
            Services
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Mobile</div>
                <div class="item">Tablet</div>
                <div class="item">Computer</div>
            </div>
        </div>
        <div class="ui dropdown pointing item">
            Other
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Hosting</div>
                <div class="item">Webmail</div>
                <div class="item">DNS</div>
            </div>
        </div>
        <div class="right item">
            <button class="ui button">Create Account</button>
        </div>
        <div class="right item">
            <button class="ui primary button">Login</button>
        </div>
    </div>

</div>

语义UI - 菜单项到下一行而不是长水平滚动

1 个答案: