Скрыть / показать панель при нажатии внутри контейнера сложной формы

Question

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

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

Вот изображения:

Вот HTML-код, который у меня есть:

            <nav class="l-apps l-container">
            <ul>
                <li>
                    <img src="assets/img/icons/google.png">  
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/word.png">                     
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/file.png">
                    <a href="#">Lorem Ipsum</a>                         
                </li>
                <li>
                    <img src="assets/img/icons/network.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/powerpoint.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/diamond.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/other.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/pencil.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/excel.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/triangle.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
            </ul>
        </nav>

Answer 1

Ну, я понял это на тот случай, если кому-нибудь еще понадобится сделать это:

По сути тот же html, но с добавлением некоторых контейнеров для div в форме css3 с переключателем триггера:

            <nav class="l-apps l-container">
            <ul>
                <li>
                    <img src="assets/img/icons/google.png">  
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/word.png">                     
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/file.png">
                    <a href="#">Lorem Ipsum</a>                         
                </li>
                <li>
                    <img src="assets/img/icons/network.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/powerpoint.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/diamond.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/other.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/pencil.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/excel.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/triangle.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
            </ul>
            <div class="shape-container">    
                <div class="base">
                    <a href="#"><i class="icon-toogle fa fa-angle-double-up"></i></a>
                </div>
            </div>        
        </nav>

Тогда это scss для формы:

    .base {
    background: $blue;
    display: inline-block;
    height: 105px;
    margin-top: 50px;
    position: relative;
    width: 150px;
    .icon-toogle {
        position:absolute;
        color: $white;
        font-size:1.8em;
        bottom:-.35em;
        left:0;
        right:0;
        margin:auto;
        text-align:center;
    }
    &:before {
        border-top: 20px solid $blue;
        border-left: 75px solid transparent;
        border-right: 75px solid transparent;            
        content: "";
        height: 0;
        left: 0;
        position: absolute;
        bottom: -20px;
        width: 0;
    }
}

Теперь у меня есть другая проблема, у всей фигуры есть фоновое изображение шаблона (контейнер значков и форма css внизу), я не могу получитьпоместить фоновое изображение в форму, возможно, потому что я использую границы, чтобы сделать форму CSS.Есть ли способ наложить фоновое изображение на фигуру?

Answer 2

моя идея

$('div').on('click', function(){
  var _class = $(this).hasClass('a-top') ? 'b-top' : 'a-top';
  $(this).attr('class',_class);
});

.a-top {
  background: #f00;
  height: 50px;
  top:0px;
  transition: all .3s ease-out;
}

.b-top {
  background: #f00;
  height: 100px;
  transition: all .3s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="a-top">
  menu click me.
</div>