Advertisement

#15 Main Navigation (Mobile Menu)

In this article we will set up our mobile navigation menu. In addition to adding the markup and styling our approach will require the first use of javascript within our main navigation component to animate the mobile menu in and out based on user interaction.

Parts

The Markup

  • WebUi
    • Pages
      • Shared
        • _MainNav.cshtml

Since we have already done the hard work in a previous article we can add the markup for our mobile navigation very easily (a).

_MainNav.cshtml

...
@{
    ...
    var Logout = Html.Raw(Li($"..."));
}
<header>
    <nav ...>
        ...
    </nav>
    <div class="mobile-menu" id="mobile-menu">
        <ul>
            @Articles
            @Applications
            @Videos
            <li>
                <hr class="separator" />
            </li>
            @if (isAuthenticated)
            {
                @Account
                @Logout
            }
            else
            {
                @Register
                @Login
            }
        </ul>
    </div>
</header>
(a) The markup that we will use for our mobile navigation.
Advertisement

The Styling

  • WebUi
    • Source
      • components
        • main-nav
          • main-nav.component.scss

With the markup in place we can turn to adding some styling (b).

main-nav.component.scss

...
@mixin logoutBtn {
    button {
        background: none;
        border: none;
        color: $navigation-anchor-color;
        height: 100%;
        @include padding(null em(10px) null em(10px));
        cursor: pointer;
        font-weight: 400;

        &:hover {
            background: none;
            color: $action-color;
        }
    }
}

header {
    ...
    .link-icon {
        margin-right: 0.25em;
    }
    .authentication {
        ...
        form {
            ...
            @include logoutBtn;
        }
    }
    ...
    .mobile-menu {
        background-color: $navigation-background-color;
        position: absolute;
        z-index: 0;
        width: 100%;
        transform: translateY(-101%);

        @include media-gt($mobile-break-width) {
            display: none;
        }

        ul {
            flex-direction: column;
            border-color: $navigation-border-color;
            border-style: solid;
            @include border-width(0 0 1px 0);
        }

        a {
            justify-content: center;
        }

        a, form {
            @include padding(em(15px) null);
        }

        .separator {
            width: 100%;
            color: $navigation-border-color;
            @include margin(0.5em 0);
        }

        @include logoutBtn;

        .link {
            text-align: center;
        }
    }
}
(b) The styling that we will use for our mobile menu.

Interactions

  • WebUi
    • Source
      • components
        • main-nav
          • main-nav.component.ts

Of course our menu would be basically useless at is right now since by default it starts out above the viewable area of our page. We will use javascript to animate the menu in and out in response to user interaction with our mobile menu button (c).

main-nav.component.ts


const animationOptions = {
    direction: "normal",
    duration: 250,
    easing: "ease-in-out",
    fill: "forwards"
};

function animateOut(element: HTMLElement) {
    (element as any).animate(
        {
            transform: ["translateY(0)", "translateY(-101%)"]
        },
        animationOptions);
    return false;
}

function animateIn(element: HTMLElement) {
    (element as any).animate(
        {
            transform: ["translateY(-101%)", "translateY(0)"]
        },
        animationOptions);
    return true;
}

let isMobileMenuOpen = false;
const mobileMenu = document.getElementById("mobile-menu");
document.getElementById("mobile-toggle").addEventListener("click", (e) => {
    e.preventDefault();
    const animate = isMobileMenuOpen
        ? animateOut
        : animateIn;

    isMobileMenuOpen = animate(mobileMenu);
});

export default function() { return true; }
(c) Simple javascript code that will allow us to animate the mobile menu in and our in response to user interaction.

Adding the javascript code to our page

  • WebUi
    • Source
      • main.page.ts

With the code written for user interaction with our mobile menu the only thing left to do is to add the code to our main bundle by importing it into our main typescript file (d).

main.page.ts

...
import("./components/main-nav/main-nav.component");
(d) Adding an import statement to our main typescript file will cause our main navigation javascript code to be included in our page.
Exciton Interactive LLC
Advertisement