Animované top menu: fixná a prispôsobivá navigačná lišta

menu-bar

V poslednej dobe sa na webových stránkach začalo objavovať dynamické a animované menu, ktoré zmení veľkosť pri posúvaní obsahu nadol – minimalizácia hlavnej navigácie, aby zostalo viac miesta pre samotný obsah. V tomto príklade si ukážeme, ako si môžete vytvoriť animované menu s HTML5, CSS3 a len s pár riadkami jQuery.

Vytvoríme si navigačnú lištu s menu a s logom na plnú šírku web stránky, ktorá zmení svoju veľkosť pri odscrollovaní / posunutí stránky smerom dolu.

Vytvorenie základnej štruktúry v HTML

<!DOCTYPE HTML><html> 
<head> 
    <meta charset=UTF-8" /> 
    <title>Animované top menu: fixná a prispôsobivá navigačná lišta</title> 
</head> 
<body> 

</body> 
</html>

Do základnej HTML šablóny následne pridáme kód pre navigačnú lištu a v nej umiestnené menu a logo. Do HEAD ešte vložíme odkaz na externý kód jQuery.

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset=UTF-8" /> 
    <title>Animované top menu: fixná a prispôsobivá navigačná lišta</title> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<header class="large"> 
    <nav> 
        <img class="logo" src="http://www.ayris.sk/wp-content/icon/ayris.png"/> 
        <ul> 
            <li><a class="active" href="#">Home</a></li> 
            <li><a href="#">Články</a></li> 
            <li><a href="#">Blog</a></li> 
        </ul> 
    </nav> 
</header> 
<section class="stretch"> 
    <p>&#8595; Odscrollujte nižšie a menu sa zmenší &#8595;</p> 
    <p> obsah stránky </p>
    <p class="bottom">&#8593;  Koniec odstavca &#8593; <br /><br /></p> 
</section> 
</body> 
</html>

V našom BODY sme použili štandardný HTML5 element HEADER, ktorý bude ohraničovať celú šírku navigačnej lišty a bude „zodpovedný“ za zmeny veľkosti medzi „veľkou a malou verziou“ menu. Element HEADER sme pomenovali triedou s názvom „large“. Element NAV vytvára kontajner pre ponuku s naším jednoduchým menu a logom.

Pretože nemáme žiadny obsah, pridali sme element SECTION s triedou „stretch“, ktorý nám obsah stránky nahradí.

Vytvorenie CSS pre navigačnú lištu, menu a stránku

CSS štýl vložím priamo do hlavičky HTML súboru – takže môžeme začať základným layoutom: do stránky si importujeme Google font (písmo) Ubuntu a nastavíme štýl pre menu a logo.

/* Reset */
html, body, ul, li, img {
    margin: 0;
    padding: 0;            
}
/* Importing Ubuntu Font */ 
@import url(http://fonts.googleapis.com/css?family=Ubuntu); 

/* Basic layout */ 
body { 
    background-color: #fefefe; 
} 
ul { 
    list-style-type: none; 
    float: right; 
} 
li { 
    display: inline; 
    float: left; 
} 
img.logo { 
    float: left; 
}

A pokračujeme štýlom pre SECTION a NAV:

nav{ 
    width: 1140px; 
    margin: 0 auto; 
} 
section.stretch{ 
    float: left; 
    height: 1500px; 
    width: 100%; 
} 
section.stretch p{ 
        font-family: Ubuntu, sans-serif; 
        font-size: 30px; 
        color: #969696; 
        text-align: center; 
        position: relative; 
        margin-top: 250px; 
    } 
    section.stretch p.bottom{ 
        top: 100%; 
    }

Element NAV nám zabezpečí, aby bolo logo + menu široké 1140px a umiestnené v strede navigačnej lišty HEADER. Triede .stretch sme definovali výšku 1500px, aby nám zastúpila obsah stránky. Zostáva už len definovať navigačnú lištu HEADER:

header{ 
    background: #eeeeee; 
    border-bottom: 1px solid #cccccc; 
    float: left; 
    width: 100%; 
    position: fixed; 
    z-index: 10; 
} 
    header a{ 
        color: #969696; 
        text-decoration: none; 
        font-family: Ubuntu, sans-serif; 
        text-transform: uppercase; 
    } 
    header a.active, header a:hover{ 
        color: #3d3d3d; 
    } 
    header li{ 
        margin-right: 30px; 
    } 
    /* Sizes for the bigger menu */ 
    header.large{ 
        height: 90px; 
        padding-top: 5px; 
    } 
    header.large img{ 
        width: 400px; 
        height: 74px; 
    } 
    header.large li{ 
        margin-top: 45px; 
    }

HEADER bude slúžiť ako kontajner pre naše menu: tu definujeme farbu pozadia, výšku a šírku navigačnej lišty, atď. Šírka HEADER sa prispôsobí obrazovke (100%) a zostane zafixovaná voči ostatným prvkom na stránke. Nezabudli sme nastaviť z-index, pomocou ktorého dostaneme HEADER na vrchnú vrstvu, aby prekrývala všetky ostatné elementy web stránky.

Okrem nastavenia štýlu pre HEADER sme definovali aj štýl header.large –  počiatočný stav hlavičky, ktorá sa zobrazí po načítaní stránky.

Dynamická veľkosť menu

Teraz máme naše menu hotové a naštýlované, ale potrebujeme mu ešte zadať parametre, aby sa zobrazovalo aj v zmenšenej forme. Musíme preto vytvoriť novú triedu pre HEADER v CSS s názvom „small“, ktorá bude zodpovedná za zmenu veľkosti.

    /* Sizes for the smaller menu */ 
    header.small{ 
        height: 55px; 
        -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3); 
        -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3); 
        box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3); 
    } 
    header.small img{ 
        width: 270px; 
        height: 50px; 
    } 
    header.small li{ 
        margin-top: 17px; 
    }

Keď už máme všetky potrebné štýly definované  – pre správnu funkčnosť sa musíme pokúsiť dynamicky zmenit triedu pri scrollovaní hore a dolu, t.j. je potrebné zmeniť v HTML <header class=“large“> na <header class=“small“>.

Zmena CSS triedy s jQuery

Pri všetkých našich definíciach štýlu je potrebné pridať trochu JavaScriptu, aby sme zabezpečili prechod medzi triedami „large“ a „small“. Vzhľadom na to, že triedy chcem vymeniť na základe scrollovania užívateľa – použijeme funkciu v jQuery .scrollTop(). Táto funkcia nám získa alebo nastaví pozíciu scrollovania v pixeloch. Pozícia scrollovania je počet pixelov, ktoré už boli posunuté z pohľadu prehliadača. V tomto prípade stačí len vedieť, aké množstvo pixelov užívateľ odscrolloval (posunul), takže môžeme spustiť náš kód na výmenu tried:

<script type="text/javascript"> 
    $(document).on("scroll",function(){ 
        if($(document).scrollTop()>100){ 
            $("header").removeClass("large").addClass("small"); 
            } 
        else{ 
            $("header").removeClass("small").addClass("large"); 
            } 
        }); 
</script>

Tento JavaScript je potrebný na zistenie, kedy užívateľ scrolluje web stránku. Akonáhle užívateľ posunie stránku o viac ako 100 pixelov, odstráni sa  trieda „large“ a pridá sa nová trieda „small“. Týmto spôsobom sa menu zmení tak, ako sme ho vopred definovali v CSS.

CSS Transitions – animované menu

Ak chceme prepínať medzi triedami v našom menu plynulejšie – použijeme CSS Transitions. Stačí nám použiť tento kus kódu v našom CSS:

header, a, img, li{ 
    transition: all 1s; 
    -moz-transition: all 1s; /* Firefox 4 */ 
    -webkit-transition: all 1s; /* Safari and Chrome */ 
    -o-transition: all 1s; /* Opera */ 
}

A sme na konci. Môžete si pozrieť kompletný kód alebo DEMO ukážku.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Animované top menu: fixná a prispôsobivá navigačná lišta</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        /* Reset */
        html, body, ul, li, img {
            margin: 0;
            padding: 0;            
        }
        /* Importing Ubuntu Font */
        @import url(http://fonts.googleapis.com/css?family=Ubuntu);
        
        header, a, img, li{
            transition: all 1s;
            -moz-transition: all 1s; /* Firefox 4 */
            -webkit-transition: all 1s; /* Safari and Chrome */
            -o-transition: all 1s; /* Opera */
        }

        /* Basic layout */
        body{
            background-color: #fefefe;
        }
        ul{
            list-style-type: none;
            float: right;
        }
        li{
            display: inline;
            float: left;
        }
        img.logo{
            float: left;
        }

        nav{
            width: 1140px;
            margin: 0 auto;
        }

        section.stretch{
            float: left;
            height: 1500px;
            width: 100%;
        }
            section.stretch p{
                font-family: Ubuntu, sans-serif;
                font-size: 30px;
                color: #969696;
                text-align: center;
                position: relative;
                margin-top: 250px;
            }

            section.stretch p.bottom{
                top: 100%;
            }

        header{
            background: #eeeeee;
            border-bottom: 1px solid #cccccc;
            float: left;
            width: 100%;
            position: fixed;
            z-index: 10;
        }
            header a{
                color: #969696;
                text-decoration: none;
                font-family: Ubuntu, sans-serif;
                text-transform: uppercase;
            }
            header a.active, header a:hover{
                color: #3d3d3d;
            }
            header li{
                margin-right: 30px;
            }
            /* Sizes for the bigger menu */
            header.large{
                height: 90px;
                padding-top: 5px;
            }
            header.large img{
                width: 400px;
                height: 74px;
            }
            header.large li{
                margin-top: 45px;
    
            }

            /* Sizes for the smaller menu */
            header.small{ 
                height: 55px; 
                -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3);
                -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3);
                box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3);
            }
            header.small img{ 
                width: 270px; 
                height: 50px; 
            }
            header.small li{ 
                margin-top: 17px; 
            }
    </style>
    <script type="text/javascript">
        $(document).on("scroll",function(){
            if($(document).scrollTop()>100){ 
                $("header").removeClass("large").addClass("small");
                }
            else{
                $("header").removeClass("small").addClass("large");
                }
            });
    </script>
</head>
<body>
<header class="large">
        <nav>
            <img class="logo" src="http://www.ayris.sk/wp-content/icon/ayris.png"/>
            <ul>
                <li><a class="active" href="#">Home</a></li>
                <li><a href="#">Články</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </nav>
</header>
<section class="stretch">
    <p>&#8595; Odscrolujte nižšie a menu sa zmenší &#8595;</p>
    <p> obsah stránky </p>
    <p class="bottom">&#8593;  Koniec odstavca &#8593; <br /><br /></p>
</section>
</body>
</html>