Bulma - принудительная вертикальная навигация на рабочем столе - PullRequest
Новая
       56

Bulma - принудительная вертикальная навигация на рабочем столе

0 голосов
/ 20 февраля 2020

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

/** mobile **/
@media (max-width: 768px) {

      .menu {
       display: none;
      }
}

/** desktop **/
@media (min-width: 1024px) and (max-width: 1215px) {

    .navbar {
     display: none;
    }
}

, но это все равно оставляет мне два отдельных компонента и списки ссылок, значки и т. Д. c. Есть ли способ заставить булму навбар все время оставаться в вертикальном положении? Таким образом, я могу использовать только один компонент вместо двух ...

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

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

Поэтому я переопределил компонент из Bulma (который является боковым меню):

  • Я использую версию SASS Bulma
  • Я добавил папку extensions в сборку Bulma
  • Я добавил в нее свой improved_sidebar.sass файл

Вот мой код, который может быть вам полезен: 

// ––––––––––––––––––––––––––––––––––––––––––––––––––
// Aside improvements
// ––––––––––––––––––––––––––––––––––––––––––––––––––
$aside-width: 250px
$aside-right-padding: 30px
$aside-delta: $aside-width - $aside-right-padding
aside
    display: block
    box-sizing: border-box
    position: fixed
    top: 0
    left: 0
    max-width: $aside-width
    height: 100%
    padding:
        top: 10px
        bottom: 10px
        left: 10px
        right: $aside-right-padding
    overflow-y: auto

    // Initially hidden in mobile mode. Needs to be flagged as "is-active" to be shown
    // It will appear OVER the page content
    +touch
        left: -$aside-delta

        &.is-active
            left: 0
            z-index: 900



// ––––––––––––––––––––––––––––––––––––––––––––––––––
// Clickable burger in mobile mode
// ––––––––––––––––––––––––––––––––––––––––––––––––––
$burger-dimensions: 25px
#aside-burger
    display: none

    +touch
        position: absolute
        display: block
        top: calc(50% - calc(#{$burger-dimensions} / 2))
        right: calc(calc(#{$aside-right-padding} - #{$burger-dimensions}) / 2)
        width: $burger-dimensions
        height: $burger-dimensions
        color: white

    i
        position: relative
        z-index: 1000
        font-size: 40px !important
        cursor: pointer

        &:hover
            color: $info

        &:active
            color: $danger


// Rotate the icon when the sidebar is toggled
aside.is-active
    i
        transform: rotate(180deg)


// ––––––––––––––––––––––––––––––––––––––––––––––––––
// Utilities
// ––––––––––––––––––––––––––––––––––––––––––––––––––
// The sidebar is natively visible only in desktop
// Therefore we move tagged items to the right, of the same amount
.adjust-with-sidebar
    +touch
        margin-left: $aside-right-padding

    +desktop
        margin-left: $aside-width

А вот мой шаблон HTML для (я использую jinja2 и vuejs для шаблонов): 

{% load static %}

<aside class="menu" :class="{'is-active': activeSidebar}">
    <div id="aside-burger" @click="activeSidebar = !activeSidebar">
        <span class="icon" >
            <i class="fas fa-caret-right"></i>
        </span>
    </div>
    <figure class="image has-text-centered">
        <a href="{% url 'home' %}">
            <img id="menu-logo" src="/media/core/logo.png" alt="Logo">
        </a>
    </figure>
    <p class="menu-label">Exemples</p>
    <ul class="menu-list">
        <li><a id="example" href="{% url 'example' %}">API Exemple</a></li>
    </ul>
    <p class="menu-label">Mon Compte</p>
    <ul class="menu-list">
        <li><a id="account-info" href="{% url 'user_account' %}">Mes informations</a></li>
        <li><a id="logout" @click.prevent="submitLogoutForm">Déconnexion</a></li>
    </ul>
</aside>
0 голосов
/ 21 февраля 2020

Я думаю, вы могли бы заставить навигационную панель быть вертикальной вместо использования строки меню, потому что строки меню в Bulma вертикальные и фактически не растягиваются и не сжимаются с бургерами (на навигационных панелях используются бургеры). Итак, зацените этот пост W3Schools , где они говорят о принудительном принудительном использовании навигационной панели по вертикали с помощью CSS. Кроме того, навигационные панели Bulma помещаются на весь экран, когда вы открываете их с помощью бургера navbar. Это характеристика c Булмы, так что я не уверен, что вы хотите именно так - вам, возможно, придется настроить немного CSS здесь и там.

...