V našem seriálu o responzivním webdesignu se dnes podíváme na to, jak vytvořit zcela funkční menu pro mobilní zařízení – tedy takové, jaké najdete i na tomto webu. Menu se bude chovat plně responzivně. Po kliknutí na ikonku vyjede z levé strany a posune obsah webu doprava. Tohoto pěkného efektu dosáhneme použitím CSS animací a JavaScriptu. Pusťme se do toho.

Pro pochopení kódu je tedy nutné znát jazyk HTML, CSS a JavaScript. Začneme tím, že si vytvoříme kostru menu v jazyce HTML.

<nav id="site-navigation" class="primary-navigation menu" role="navigation">
    <div id="menu-control" class="d-tab-none">
        <a href="javascript:void(0);">
            <span class="menu-control-top-line"></span>
            <span class="menu-control-middle-line"></span>
            <span class="menu-control-bottom-line"></span>
        </a>
    </div>
    <div class="primary-menu-container">
        <ul id="primary-menu" class="menu-wrapper">
            <li class="menu-item"><a href="#">O nás</a></li>
            <li class="menu-item"><a href="#">Služby</a></li>
            <li class="menu-item"><a href="#">Portfolio</a></li>
            <li class="menu-item"><a href="#">Šablony</a></li>
            <li class="menu-item"><a href="#">Blog</a></li>
            <li class="menu-item"><a href="#">Kontakt</a></li>
        </ul>
    </div>
</nav>

Blok s id „menu-control“ slouží k ovládání mobilního menu. Přidáme do layoutu stránky obalující div pro celou stránku s id „page“ a do něj zanoříme div s třídou „dark-cover“, která bude překrývat obsah při aktivaci mobilního menu. Menu ještě obalíme blokem header.

<div id="page" class="site">
    <div class="dark-cover"></div>
    <header>
        <nav id="site-navigation" class="primary-navigation menu" role="navigation"> 
            ...
        </nav> 
     </header>
</div>

Doplníme základní styly pro menu. Začít můžeme hamburgerovým tlačítkem pro přepínání menu. Využíváme SCSS syntaxi preprocesoru SASS.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#menu-control{
   a{
        position: absolute;
        right: 0.75rem;
        width: 44px;
        height: 32px;

        span{
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #fff;
        } 
        &:hover span{
            background-color: #ff0;
        }
    }
        
    .menu-control-top-line{
        top: 0;
    }        
    .menu-control-middle-line{
        top: 15px;
    } 
    .menu-control-bottom-line{
        bottom: 0;
    }
}

Pokračujme doplněním stylů pro responzivně se chovající menu. Použijeme k tomu media query s breakponty, u kterých stanovíme hranici 800px pro přepínání mezi mobilním a desktopovým menu.

ul.menu-wrapper{
    padding: 1rem 0;
    list-style-type: none;
        
    a{
        color: #fff;
        text-align: center;
        width: 100%;
        display: block;
        margin: 1.25rem 0;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 1.5rem;
        padding: 0 2rem;

        &:hover{
            text-decoration: underline;
            text-decoration-color: #ff0;
        }
    }
}    
@media (min-width: 480px){
    ul.menu-wrapper{
        padding: 2rem 0 1rem;
            
        a{
            text-align: right;
            padding: 0 3rem 0 2rem;
            font-size: 1.25rem;
        } 
    }    
}
@media (min-width: 800px){
    ul.menu-wrapper{
        padding: 0;
        display: flex;
        justify-content: center;

        a{ 
            font-size: 1rem;
            margin: 0 0.75em;
            padding: 1em 0;
            text-align: left;
            width: auto;

            &:hover{
                color: #ff0;
                text-decoration: none;
            }  
        }    
    }

    .d-tab-none{
        display: none;
    }
    header{
        min-height: 0;
    }
}
@media (min-width: 1024px){       
    ul.menu-wrapper a{
       font-size: 1.25rem;
    }
}
@media (min-width: 1280px){
    ul.menu-wrapper a{
        font-size: 1.5rem;
    } 
}

Velikost textu menu se postupně zvětšuje, jak se rozšiřuje šířka okna prohlížeče. Nyní už můžeme přidat kód pro mobilní menu.

.primary-menu-container{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100%;
    transition: right 1s;
    z-index: 110;
    background: #00f;
    
    @media (min-width: 480px){
        width: 280px;
    } 

    @media (min-width: 800px){
        position: static;
        width: 100%;
    }
    
    &.mobile{
        right: 0;
        overflow-x: auto;
            
        @media (min-width: 480px){
            right: calc(100% - 280px);
        } 
    }  
    
    // close button
    ul.menu-wrapper{
        .close-button{
            width: 2rem;
            display: block;
            margin: 0 auto;
            padding: 0;
            font-size: 5rem;
            font-weight: 200;
            transform: rotate(45deg);
            cursor: pointer;
            color: #fff;

            &:hover{
                color: #ff0;
                text-decoration: none;
            }
            
            @media (min-width: 480px){
                position: absolute;
                left: 1rem;
                top: -0.5rem;
            }
        }
    }    
}

V horní části kódu se definují styly pro zatím schované mobilní menu, které se aktivuje klikem na hamburgerové tlačítko. To přidává elementu „.primary-menu-container“ třídu „mobile“. Tučně vyznačený kus kódu se postará o animaci vyjetí menu zleva. Níže v kódu jsou styly pro zavírací tlačítko, které v kostře HTML nemáme, ale v pokračování tohoto seriálu si ho vytvoříme za pomoci JavaScriptu. Ze stylů už zbývá jen přidat styly pro zbytek stránky, aby se posunula doprava a překryla poloprůhledným elementem „dark-cover“.

header{
    background-color: #00f;
    min-height: 4rem;
}
#page{
    background-color: #fff;
    margin-left: 0;
    transition: margin 1s;
    width: 100%;
    
    .dark-cover{
        display: none;
    }
    
    &.mobile{
        margin-left: 280px;
            
        .dark-cover{
            display: block;
            background: rgba(#000000, .25);
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 100;
            position: fixed;
        }
    }
}

Styly máme hotové, zbývá ještě přidat JavaScript pro ovládání menu, což je obsahem druhé části tohoto mini seriálu – Tvorba mobilního menu (2/2).