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?