Tutorial

Fullscreen search panel

Create a fullscreen search panel

This guide will teach you how to create a fullscreen search panel and trigger it by using a menu item.

1 - Use the following code to create a navigation. You may notice that there is a contact form inside the body of the navigation. We are using an icon item with Font Awesome.

Copy

<nav id="navigation" class="navigation navigation-justified">
    <div class="navigation-header">
        <div class="navigation-brand-text align-to-left">
            <a href="#">NAVIGATION</a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">
            <div class="navigation-brand-text">
                <a href="#">NAVIGATION</a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Services</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Blog</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Contact</a>
            </li>
            <li class="navigation-item navigation-icon-item search-panel-trigger">
                <a class="navigation-link" href="#">
                <i class="fas fa-search"></i>
                <span>Search</span>
                </a>
            </li>
        </ul>
        <div class="navigation-search-panel">
            <span class="navigation-search-panel-close-button">&#10005;</span>
            <form>
                <input type="search" name="search" placeholder="Type and hit enter">
            </form>
        </div>
    </div>
</nav>

Note that the last menu item is icon item. It has an extra class named "search-panel-trigger". This class will be used to identify which item will be used to trigger the search panel.

2 - Use the CSS code below to give some styles to the search panel:

Copy

.navigation-search-panel {
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 0;
    top: 0;
    left: -100%;
    background: #fff;
    z-index: 999999;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.navigation-search-panel.is-visible {
    opacity: 1;
    left: 0;
}

.navigation-search-panel form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.navigation-search-panel input {
    width: 80%;
    padding: 15px;
    font-size: 20px;
    border: none;
    background: rgba(0, 0, 0, 0.03);
    text-align: center;
}

.navigation-search-panel-close-button {
    position: absolute;
    font-size: 25px;
    cursor: pointer;
    top: 20px;
    right: 20px;
}

3 - Use the Javascript code below to open and close the search panel:

Copy

document.getElementsByClassName("search-panel-trigger")[0].addEventListener("click", function (e) {
    e.preventDefault();
    document.getElementsByClassName("navigation-search-panel")[0].classList.add("is-visible");
});

document.getElementsByClassName("navigation-search-panel-close-button")[0].addEventListener("click", function (e) {
    document.getElementsByClassName("navigation-search-panel")[0].classList.remove("is-visible");
});

The code attaches a "click" event handler to the element with the class "search-panel-trigger" to show the search panel. You can put this class on a link or button to achieve the same behavior.
The second block of code is used to close the search panel after a click on "✕"

The result:

See the list of tutorials for other ways to modify the navigation bar and add features.