Andale – Creative HTML5 Portfolio Template

  • 45 Articles
  • Current Version: 1.0
HomeDocumentationsMobile Navigation

Last Modified: August 14, 2019

Mobile navigation is a bar that appears on mobile devices and tablets, it includes a logo, a button to open the menu, as well as a menu. To add a mobile menu, insert this code on your page:

<nav class="navigation-mobile">
        <div class="inner-wrapper">
            <!-- Logotype -->
            <div class="logotype-wrapper">
                <a href="index.html">
                    <img src="assets/img/general/logo.png" alt="Logotype" class="logo">
                </a>
            </div>
            <div class="navigation-side">
                <div class="search-form-toggle toggle-button">
                    <i class="fa fa-search"></i>
                </div>
                <div class="menu-toggle-wrapper">
                    <div class="menu-toggle toggle-button">
                        <i class="fa fa-bars"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="search-form-wrapper">
            <div class="search-form">
                <div class="form-wrapper">
                    <form role="search">
                        <input type="search" class="search-field"
                               placeholder="Enter some keywords..."
                               title="Enter some keywords...">
                        <button type="submit" class="search-submit">
                            <i class="icofont-search"></i>
                        </button>
                    </form>
                    <div class="search-form-close">
                        <i class="icofont-close-circled"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="menu-list-wrapper" data-back-link="go back">
            <div class="menu-toggle-close">
                <i class="icofont-close-circled"></i>
            </div>
            <ul class="menu-list">
                <li class="menu-item menu-item-has-children">
                    <a>
                                Pages
                    </a>
                    <ul class="sub-menu">
                        <li class="menu-item">
                            <a href="about.html">
                                About
                                <span class="menu-item-label" style="background-color: #F30E48;">
                                            Hot
                                        </span>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="services.html">
                                Services
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="team.html">
                                Team
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="contact.html">
                                Contact
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="pricing.html">
                                Pricing
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="faq.html">
                                FAQ
                            </a>
                        </li>


                        <li class="menu-item">
                            <a href="404.html">
                                404 Error Page
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

You can also configure the animation, animation speed and other parameters using the desired class in javascript, for this, go to main.js and change the following values:

 let navigation = this.navigation,
                menuItemBack = navigation.find('.menu-item-back'),
                animItems = (items) => {
                    TweenMax.staggerTo(items, 0.4, {
                        transform: 'translateX(0)',
                        opacity: 1,
                        pointerEvents: 'auto',
                        ease: Power3.ease
                    }, 0.08);
                },
                hideItems = (items) => {
                    TweenMax.staggerTo(items, 0.4, {
                        transform: 'translateX(-50px)',
                        opacity: 0,
                        pointerEvents: 'none',
                        ease: Power3.ease,
                    }, 0.08);
                },
                animPanel = TweenMax.to(this.menuPanel, 0.8, {
                    scale: 1,
                    opacity: 1,
                    pointerEvents: 'auto',
                    ease: Expo.easeInOut,
                }).reverse();
0
0