[es] - Kako sakriti navigacioni meni

S A J A
Beograd

Član broj: 226539
Poruke: 1907
*.static.sbb.rs.

+421 Profil

^{17.11.2012. u 11:23 - pre 139 meseci}

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".

Odgovor na temu

Dejan Carić
Oslo, Norway

Član broj: 230976
Poruke: 232
*.dynamic.sbb.rs.

Sajt: www.dcaric.com

+26 Profil

Re: Kako sakriti navigacioni meni

^{17.11.2012. u 16:18 - pre 139 meseci}

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?

gramatika srpskog jezika
testovi iz srpskog jezika
jezičke nedoumice

Odgovor na temu