Question

我想要一个侧边栏，修复顶部菜单和推动器。但是我做错了，请看https://jsfiddle.net/mpugach/wg4kc6pp/

<body>
    <div id="sidebar" class="inverted left inline vertical orange menu ui sidebar">
        <a class="item">Item 1</a>
        <a class="item">Item 2</a>
        <a class="item">Item 3</a>
    </div>

    <div class="ui inverted huge orange borderless fixed fluid menu">
        <button class="ui button header item" id="toggler">
            Toggle
        </button>
    </div>

    <div class="ui grid pusher">
        <div class="row">
            <div class="column"> <!-- end of layout -->

                <div class="ui grid">
                    <div class="row">
                        <div class="column">
                            <h1 class="ui huge header">
                              Welcome header
                            </h1>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column">
                          some other text 1
                        </div>
                    </div>

                    <div class="row">
                        <div class="column">
                          some other text 2
                        </div>
                    </div>

                    <div class="row">
                        <div class="column">
                          some other text 3
                        </div>
                    </div>

                    <div class="row">
                        <div class="column">
                          some other text 4
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>

是否可以将推送内容隐藏在顶级菜单下？没有额外的CSS我的意思是，只是Semantic-UI标记

Answer 1

其中一个解决方案是将菜单放入推动器。您还应从菜单中删除修复并将border-radius设置为0.以下是示例：https://jsfiddle.net/tpg714eh/1/

<body>
    <div id="sidebar" class="inverted left inline vertical orange menu ui sidebar">
        <a class="item">Item 1</a>
        <a class="item">Item 2</a>
        <a class="item">Item 3</a>
    </div>

    <div class="ui pusher">

    <div class="ui inverted huge borderless orange menu" style="border-radius:0px;">
        <button class="ui button header item" id="toggler">
            Toggle
        </button>
    </div>

      <div class="ui grid">
        <div class="row">
            <div class="column"> <!-- end of layout -->

                <div class="ui grid">
                    <div class="row">
                        <div class="column">
                            <h1 class="ui huge header">
                              Welcome header
                            </h1>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column">
                          some other text 1
                        </div>
                    </div>

                    <div class="row">
                        <div class="column">
                          some other text 2
                        </div>
                    </div>

                    <div class="row">
                        <div class="column">
                          some other text 3
                        </div>
                    </div>

                    <div class="row">
                        <div class="column">
                          some other text 4
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   </div>
</body>

Answer 2

这是另一个有效的解决方案https://jsfiddle.net/tpg714eh/18/

结构是相同的，但是，还有额外的css重写了语义UI。

.ui.grid {
  margin-top:0em!important;
}

.ui.pusher {
  margin-top: 2.85714em!important;
}

推送器和固定菜单中的语义UI网格

2 个答案: