Сделать меню Semantic UI свернутым и отзывчивым - PullRequest
Новая
       18

Сделать меню Semantic UI свернутым и отзывчивым

0 голосов
/ 06 марта 2019

Я посмотрел везде на документах, и ничего. Я ищу аналогичную функцию свертывания навигационной панели, которая используется в начальной загрузке с гамбургером (я могу нажать), чтобы расположить его в стороне и пункты меню внутри него. Пожалуйста помоги. Семантический интерфейс выглядит хорошо, но может быть неудобно использовать

Ответы [ 2 ]

0 голосов
/ 10 марта 2019

Это довольно хорошая (и простая) реализация (кредит: https://codepen.io/designosis/pen/LbMgya)

HTML 

<div class="ui grid">

    <div class="computer only row">
        <div class="column">
            <div class="ui menu">
                <a class="item">Menu Item A</a>
                <a class="item">Menu Item B</a>
                <a class="item">Menu Item C</a>
                <a class="item">Menu Item D</a>
            </div>
        </div>
    </div>

     <div class="tablet mobile only row">
        <div class="column">
            <div class="ui menu">
                <a id="mobile_item" class="item"><i class="bars icon"></i></a>
            </div>
        </div>
    </div>

</div>

<div class="ui pushable segment">
        <div class="ui sidebar vertical menu">
            <a class="item">Menu Item A</a>
            <a class="item">Menu Item B</a>
            <a class="item">Menu Item C</a>
            <a class="item">Menu Item D</a>
        </div>
        <div class="pusher">
                <div id="content" class="ui segment">
                        Content here
                </div>
         </div>
</div>

CSS 

#content {
  min-height: 100px;
}
.ui.grid{
  padding: 0 !important;
}
.pushable.segment{
  margin: 0 !important;
}

JavaScript 

$('.ui.sidebar').sidebar({
  context: $('.ui.pushable.segment'),
  transition: 'overlay'
}).sidebar('attach events', '#mobile_item');
0 голосов
/ 06 марта 2019

, если вы считаете семантику наиболее правильной, вы используете список тегов как панель навигации и скрываете его или нет с помощью javascript.На самом деле семантика HTML очень плохой, очень сложный код, чтобы сделать что-то простое

...