Kako sakriti navigacioni meni

[ S A J A @ 17.11.2012. 11:23 ] @

Takve stvari se uglavnom ne programiraju "od nule" već se kupuju kao gotove kontrole. Ima više tih proizvođača kontrola, ja sam koristio Telerik pa pogledaj kod njih. Imaš interesantna rešenja vezana za menije, gridove, editore, dugmiće, tabove, comoboe itd... Inače sajt nalik tome što si napisao, takođe se ne isplati pisati od nule jer ima dosta već gotovih CMS rešenja na tu temu, jedino ako je potrebna neka velika originalnost onda se sve pravi "od nule".

[ Dejan Carić @ 17.11.2012. 16:18 ] @

Mislim da te Saja loži :) Takve stvari se gotovo uvek pišu od nule, jer dizajn 2 sajta gotovo nikad nije isti, a show/hide efekat se veoma lako iskodira.

HTML:

Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Navigacija</title>
    <link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<div id="navContainer">
    <nav>
        <ul>
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://www.srpskijezik.rs">Srpski jezik</a></li>
        </ul>
    </nav>
    <div id="toggleMenu">
        <a href="#">Hide</a>
    </div>
</div>
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script>
        $(document).ready(function() {
            var navHeight = $('#navContainer').height();
            var hideHeight = navHeight - 20;
            var toggleLink = $('#toggleMenu a');
            var speed = 1500;

            toggleLink.toggle(
                function() {
                    $('#navContainer').animate({
                            top: '-=' + hideHeight + 'px'
                        }, speed, function() {
                            toggleLink.text('Show');
                        });
                },
                function() {
                    $('#navContainer').animate({
                            top: '+=' + hideHeight + 'px'
                        }, speed, function() {
                            toggleLink.text('Hide');
                        });
                });
        });
    </script>
</body>
</html>

CSS:

Code:
#navContainer {
position: fixed;
top: 0px;
}

I to je sve što ti treba.
Potrebno je samo u HTML-u da promeniš putanje do .css i .js fajlova i da stilizuješ navigaciju kako ti volja.
Ako promeniš veličinu toggle menija, potrebno je i da promeniš ovu vrednost:

Code:
var hideHeight = navHeight - 20;

Ukoliko želiš da promeniš brzinu kojom se prikazuje/sakriva meni, dovoljno je da promeniš ovu vrednost:

Code:
var speed = 1500;

Prosto, zar ne?