Question

我已经有一个有效的响应式顶部导航。我需要帮助，使我的辅助菜单能够快速响应并滑入和滑出，如http://www.codeit.co/code/91j所示。我无法实现这一点，任何帮助都会很棒。我的HTML如下所示。提前谢谢。

<body>
<div id="navmob">
    <div class="navmob-inner">
        <form>
            <input type="text" class="searchbox" placeholder="Search">
        </form>
        <ul class="mob-main-nav">
            <li><a href="company.html">Company</a></li>
            <li><a href="features.html">About</a></li>
            <li><a href="try-now.html">Pricing</a></li>
            <li><a href="contact-us.html">Contact</a></li>
        </ul>
    </div>
</div>

<div id="wrapper">
    <div class="overlay-mobile"></div>

    <div id="header-wrap" class="header">
        <div class="header-inner">
            <div class="logo-col"></div>
            <ul id="mainMenu" class="main-nav">
                <li><a href="#">Company</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="head-right-col">
                <div id="mobile-menu-btn" class="mobile-menu">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="text">Menu</span>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="slide-menu">
            <h1>Menu</h1>
            <nav class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Register</a></li>
                <li><a href="#">Sign In</a></li>
            </nav>
        </div>

        <div class="section-inner">
            <h1>Faq</h1>
            <div class="accordion">
                <div class="accordion-section">
                    <a class="faq-accordion-section-title" href="#faq-accordion-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ute? <span class="arrow-btn"><i class="fa fa-angle-down" aria-hidden="true"></i><i class="fa fa-angle-up" aria-hidden="true"></i></span></a>
                    <div id="faq-accordion-1" class="accordion-section-content">
                        <p>sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia<br /> consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem<br /> ipsum quia consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore<br /> magnam aliquam quaerat voluptatem.</p>
                    </div>
                </div>
            </div>
        </div>
        <aside><iframe width="325" height="250" src="https://www.youtube.com/embed/hvdW86xcnco" frameborder="0" allowfullscreen></iframe></iframe></aside>
    </div>

    <div class="footer">
        <div class="copyright"></div>
    </div>
</div>

第二个菜单响应滑入和滑出

0 个答案: