使用transform

Question

在下面的小提琴我有一个右侧导航，它有一个子菜单，当用户在搜索栏中输入文字时，子菜单应该出现。 ATM。我必须将搜索框放在导航栏（.link-list）之外，因为包含子菜单的元素出现在它上面因此无法输入。在最终的解决方案中，搜索字段应该在{{ 1}}。

如果您将鼠标悬停在子菜单上，我会希望它不可见，直到用户在搜索字段中输入任何内容为止。如果清除搜索字段或点击了.link-list的链接，则应该关闭。

我需要做些什么来实现这一点，尝试.close-sub，代码顺序，固定和绝对位置但没有成功。

JSFIDDLE

HTML：

z-index

CSS：

<input type="search" id="srch"></input>
<div class='link-list'>
<h1>Navbar</h1>
<div class="lnk">
    <a href="#">monkey</a>
    <br />
    <a href="#">bizniz</a>
    <br />
    <a href="#">monkey</a>
    <br />
    <a href="#">bizniz</a>
</div>
<div class='sub'>
  <ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit
      <ul>
        <li>Phasellus iaculis neque</li>
        <li>Purus sodales ultricies</li>
        <li>Vestibulum laoreet porttitor sem</li>
        <li>Ac tristique libero volutpat at</li>
      </ul>
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
  </ul>
</div>
</div>

Answer 1

你想要this之类的东西吗？

$('.js-search').on(
    'propertychange change keyup input paste',
    function() {
        var $naviSub = $('.js-navi-sub');
        var isShown = $naviSub.data('is-shown');

        if (isShown !== Boolean($(this).val())) {
            $naviSub.data('is-shown', !isShown)
                    .toggleClass('navi__sub_shown');
        }
    }
);

$('.js-close').on('click', function() {
    var $naviSub = $('.js-navi-sub');

    $naviSub.data('is-shown', false)
            .removeClass('navi__sub_shown');
});

.navi {
    position: fixed;
    right: 0;
    bottom: 0;
    top: 0;
    width: 16em;
    -webkit-perspective: 180em;
    perspective: 180em;
    background: pink;
}

    .navi__main {
        position: relative;
        z-index: 2;
    }

    .navi__header {
        background: salmon;
    }

    .navi__sub {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: dimgrey;
        top: 0;
        right: 16em;
        bottom: 0;
        padding: 5px;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        -webkit-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
        -webkit-transition: 0.6s ease-in-out;
        transition: 0.6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

        .navi__sub_shown {
            -webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }

    .navi__close {
        position: absolute;
        top: 0;
        left: 5px;
        padding: 5px;
        cursor: pointer;
        color: gray;
    }

        .navi__close:hover {
            color: red;
        }

    .navi__list {
        overflow-y: auto;
    }

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

<div class="navi">
    <div class="navi__main">
        <h1 class="navi__header">Navbar</h1>
        <input type="search" id="srch" class="js-search"/>
        <div class="lnk">
            <a href="#">monkey</a>
            <br/>
            <a href="#">bizniz</a>
            <br/>
            <a href="#">monkey</a>
            <br/>
            <a href="#">bizniz</a>
        </div>
    </div>
    <div class="navi__sub js-navi-sub">
        <span class="navi__close js-close">×</span>
        <ul class="navi__list">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit
                <ul>
                    <li>Phasellus iaculis neque</li>
                    <li>Purus sodales ultricies</li>
                    <li>Vestibulum laoreet porttitor sem</li>
                    <li>Ac tristique libero volutpat at</li>
                </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
        </ul>
    </div>
</div>