Question

Semantic-UI预告sidebar page＆＃34;当侧边栏出现时，固定位置内容可能会出现更改其位置的问题。＆＃34;然后，它为问题提供了两种可能的解决方案。

令人惊讶的是，在同一页面和整个网站上，Semantic-UI的网站使用固定的顶级菜单，在左侧边栏被触发时可以很好地调整。

我想简单地创建一个固定的顶级菜单，就像一个Semantic-UI的网站使用，在侧边栏打开时可以正确调整。然而，这被证明是令人沮丧的困难，因为两个提议的解决方案都不起作用。我已经检查了标记，css和javascript，但无法弄清楚他是如何从Semantic-UI提供的代码转到工作的固定顶级菜单，该菜单在侧边栏打开时可以正常调整。

有任何想法或方向吗？使用Semantic-UI如何创建一个固定的顶级菜单，在侧边栏打开时可以正确调整？

Answer 1

来自文档：

使用固定内容任何应移动的固定位置内容   当侧边栏可见时，页面内容应该收到课程   名称已修复并作为兄弟元素存在于侧栏。

未包含在您的推杆附近的固定内容将丢失   当显示侧栏时它的位置。

{
    "MetaData": {},
    "SRData": {
        "ITEM_1": "None",
        "ITEM_10": "None",
        "ITEM_2": "None",
        "ITEM_3": "None",
        "ITEM_4": "None",
        "ITEM_5": "None",
        "ITEM_6": "None",
        "ITEM_7": "None",
        "ITEM_8": "None",
        "ITEM_9": "None",
        "ListOfLa311BulkyItem": {
            "BulkyItem": [
                {
                    "BulkyItemCount": "None",
                    "BulkyItemType": "Basketball Set",
                    "DriverFirstName": "SA",
                    "DriverLastName": "placeholder",
                    "Name": "061020150957233612"
                },
                {
                    "BulkyItemCount": 2,
                    "BulkyItemType": "Basketball Set",
                    "DriverFirstName": "SA",
                    "DriverLastName": "West",
                    "Type": "Bulky Item"
                },
                {
                    "BulkyItemCount": 2,
                    "BulkyItemType": "Basketball Set",
                    "DriverFirstName": "SA",
                    "DriverLastName": "West",
                    "Type": "Bulky Item"
                },
                {
                    "BulkyItemCount": 2,
                    "BulkyItemType": "Basketball Set",
                    "DriverFirstName": "SA",
                    "DriverLastName": "West",
                    "Type": "Bulky Item"
                },
                {
                    "BulkyItemCount": 2,
                    "BulkyItemType": "Basketball Set",
                    "DriverFirstName": "SA",
                    "DriverLastName": "West",
                    "Type": "Bulky Item"
                },
                {
                    "BulkyItemCount": 2,
                    "BulkyItemType": "Basketball Set",
                    "DriverFirstName": "SA",
                    "DriverLastName": "West",
                    "Type": "Bulky Item"
                },
                {
                    "BulkyItemCount": 2,
                    "BulkyItemType": "Basketball Set",
                    "DriverFirstName": "SA",
                    "DriverLastName": "West",
                    "Type": "Bulky Item"
                },
                {
                    "BulkyItemCount": 2,
                    "BulkyItemType": "Basketball Set",
                    "DriverFirstName": "SA",
                    "DriverLastName": "West",
                    "Type": "Bulky Item"
                },
                {
                    "BulkyItemCount": 2,
                    "BulkyItemType": "Basketball Set",
                    "DriverFirstName": "SA",
                    "DriverLastName": "West",
                    "Type": "Bulky Item"
                },
                {
                    "BulkyItemCount": 2,
                    "BulkyItemType": "Basketball Set",
                    "DriverFirstName": "SA",
                    "DriverLastName": "West",
                    "Type": "Bulky Item"
                }
            ]
        },
        "ListOfLa311IllegalDumpingPickup": {},
        "ListOfLa311ManualPickup": {},
        "ListOfLa311MetalHouseholdAppliancesPickup": {},
        "ListOfLa311MoveInMoveOut": {},
        "ListOfLa311ServiceNotComplete": {},
        "QTY_10": "None",
        "QTY_6": "None",
        "QTY_7": "None",
        "QTY_8": "None",
        "QTY_9": "None",
        "QYT_1": "None",
        "QYT_2": "None",
        "QYT_3": "None",
        "QYT_4": "None",
        "QYT_5": "None",
        "RESOLUTION_CODE": "A",
        "ResolutionCode": "None",
        "SRNumber": "1-22137551",
        "UpdatedByUserLogin": "MYLA-SAN2",
        "last_edited_user": "SA"
    }
}

Answer 2

使用'exclusive'设置显示多个可以很好地相互配合的侧边栏。

$（ '您的共享 - 侧栏级。 '）侧栏（' 设置'， '独家'，假）.sidebar（ '显示'）;

Answer 3

<!-- Left Sidebar -->
<div class="ui visible inverted left vertical sidebar menu">
    <a class="item">Home    </a>
    <a class="item">Page 1</a>
    <a class="item">Page 2</a>
</div>

<!-- Top Fixed Menu -->
<div class="ui top fixed menu">
    <a class="item menu-trigger">Menu</a>
    <a class="item">Page 1</a>
    <a class="item">Page 2</a>
</div>

<div class="pusher">
    <!-- Page Content Here-->
    <div class="ui basic segment">
        <h3 class="ui header">Hello there</h3>  
    </div>
</div>

不要忘记将上面的代码放在“body”标签内，并包括css＆amp; js文件。

带有固定顶级菜单的Semantic-UI侧边栏

3 个答案: