Боковая панель семантического интерфейса с фиксированным верхним меню

Question

Семантический пользовательский интерфейс предупреждает на странице боковой панели, что "у содержимого с фиксированной позицией могут быть проблемы при изменении его позиции при появлении боковой панели". Затем он предоставляет два возможных решения проблемы.

Удивительно, но на той же самой странице и на всем сайте веб-сайт Semantic-UI использует фиксированное верхнее меню, которое очень хорошо настраивается при срабатывании левой боковой панели.

Я хочу просто создать фиксированное верхнее меню, подобное тому, которое использует сайт Semantic-UI, которое корректно корректируется при открытии боковой панели. Однако это очень сложно, так как ни одно из предложенных решений не работает. Я проверил разметку, css и javascript, но не могу понять, как он пошел от кода, который предоставляет Semantic-UI к рабочему фиксированному верхнему меню, которое корректно корректируется при открытии боковой панели.

Есть мысли или направление? Используя Semantic-UI, как создать фиксированное верхнее меню, которое корректно корректируется при открытии боковой панели?

Answer 1

Из документов:

Использование фиксированного содержимого Любое содержимое с фиксированной позицией, которое должно перемещаться вместе с содержимым страницы, когда ваша боковая панель видима, должно получить фиксированное имя класса и существовать в качестве элемента "брат" на вашей боковой панели.

Фиксированный контент, который не включен рядом с вашим пушером, теряет свое положение, когда отображается боковая панель.

<div class="ui left vertical inverted labeled icon sidebar menu">
</div>
<div class="ui fixed inverted main menu">
</div>

Answer 2

<!-- 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 & js.

Answer 3

Используйте "эксклюзивную" настройку для отображения нескольких боковых панелей, которые хорошо играют друг с другом.

$ ('Вашего-разделяемый боковая панель класс. ') Боковая панель (' настройка', 'эксклюзивный', ложь).sidebar('шоу').