浮动侧边栏语义 Ui

Question

这是我的模板

编辑：简化了 code.So 当代码保持原样时，侧边栏不是 shown.But 当我删除 "sidebar" 显示垂直菜单时。

<template name="pageTemplate">
{{#if currentUser}}
    <div class="ui vertical menu inverted blue floating sidebar active">
        <div class="menu">
            <a class="item">
                <i class="home icon"></i>
                Home
            </a>
            <a class="item">
                <i class="disk outline icon"></i>
                Devices
            </a>
            <a class="item">
                <i class="area chart  icon"></i>
                Statistics
            </a>
        </div>
    </div>

{{/if}}
{{>yield}}
<div class="ui inverted footer red segment">
    Sixdee Technologies 2015 &copy;. All Rights Reserved
</div>

我是 Meteor 和语义的新手 UI。

我正在努力获得一个浮动侧边栏，它将使用 "Menu" 按钮触发。如果我删除 class 侧边栏，我无法将侧边栏设置为 displayed.However 我可以看到垂直菜单正在 displayed.So 我认为 class 侧边栏有问题。

但即使在这种情况下，当我在 Google Chrome 中打开开发人员模式并将鼠标悬停在边栏代码上时，页面的某些部分是 highlighted.Which 意味着它正在获取已创建，但未显示。

请帮助我 out.I 我遗漏了一些东西。这些是我安装的包。

semantic:ui                      2.2.1  Official Semantic UI    Integration for Meteor
semantic:ui-css                  2.1.2  Semantic UI - CSS Release of Semantic UI
semantic:ui-sidebar              2.1.7  Semantic UI - Sidebar: Single component release

如果需要，我也可以分享我的 css。

谢谢。

Answer 1

嗨，Sanjith，我是 Avelx，

我无法将 Github 示例转为运行，因为我没有安装 MeteorJS。但是，我相信在将您的示例与您正在使用的实时版本进行比较后，侧边栏没有使用正确的 classes。不要忘记我的讲座是针对旧版本的 Semantic 的。请改用这些 classes...

class=" ui 简单的侧边栏倒竖直菜单左翻可见 "

看看是否有效，别忘了像这样使用官方网页上的开发者工具...

google chrome developer tools

这里是网站本身的一些文档，其中包含 class 定义以供进一步说明。

浮动侧边栏语义 Ui

floating sidebar Semantic Ui

html

javascript

css

meteor

semantic-ui