Kako sakriti navigacioni meni
Zaključano
Zakačeno
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".
Hvala na odgovoru, pogledacu pomenuti sajt.
Potpis
estiar
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:
CSS:
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:
Ukoliko želiš da promeniš brzinu kojom se prikazuje/sakriva meni, dovoljno je da promeniš ovu vrednost:
Prosto, zar ne?
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>
<!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;
}
#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;
var hideHeight = navHeight - 20;
Ukoliko želiš da promeniš brzinu kojom se prikazuje/sakriva meni, dovoljno je da promeniš ovu vrednost:
Code:
var speed = 1500;
var speed = 1500;
Prosto, zar ne?
Dejane hvala ti na odgovoru. Funkcionise odlicno.
Potpis
estiar