Состояние аккордеона боковой панели и состояние значка

Я создал вертикальную боковую панель меню аккордеона. с каждым аккордеоном так:

значок -- имя -- значок стрелка

<!-- for collapse state add 'very thin' to the sidebar class -->
<div class="ui vertical sidebar menu left overlay visible">
  <a class="item logo">title</a>
  <div class="ui vertical fluid inverted accordion menu">
    <div class="item">
      <a class="title">
        <i class="big home icon left"></i>
        <i class="dropdown icon"></i>
        Size
      </a>
      <div class="content">
        Content
      </div>
    </div>
  </div>
</div>

Я хочу создать боковую панель типа администратора, при наведении мыши она расширяется, чтобы показать аккордеон, в обычном состоянии она показывает только значки.

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

введите здесь описание изображения введите здесь описание изображения


angular html jquery css semantic-ui
person SGhaleb    schedule 12.05.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Добавьте Div вокруг метки и дайте ему уникальное имя класса. Например:

<div class="label">Size</div>

В вашей таблице стилей ссылайтесь на родительские/дочерние элементы соответственно. Что-то вроде этого:

    .ui.vertical.sidebar.menu.left.overlay.visible .label{
        display: block;
    }

    .ui.vertical.sidebar.menu.left.overlay.hidden .label{
        display: none;
    }
person Simon    schedule 12.05.2017
comment
Я попробовал этот метод, но он повлиял на расположение аккордеона. Вместо этого я добавил элемент span в середине значков и добавил туда текст. это работает до сих пор. Спасибо за ваш ответ в любом случае - person SGhaleb; 12.05.2017
comment
вместо display: block вы можете изменить его на встроенный. это наверное тоже сработает - person Simon; 12.05.2017