So habs ich mal gmacht, mit Jquery:
Ka ob ich alles wichtige hab:
Code:
<script>
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > $(".nav").offset({ scroll: false }).top){
$(".navi").css("position", "fixed");
$(".navi").css("top", "0");
$("#navtext").css("display", "block");
}
if ($(window).scrollTop() <= $(".nav").offset({ scroll: false }).top){
$(".navi").css("position", "relative");
$(".navi").css("top", $(".nav").offset);
$("#navtext").css("display", "none");
}
});
});
</script>
Code:
<div class="nav"></div>
<nav class="navi">
<ul>
<li><a href="?p=kontakt"> Kontakt </a></li>
<li><a href="?p=aboutme"> Über mich </a></li>
<li><a href="?p=referenzen"> Referenzen </a></li>
<li><a href="?p=leistungen"> Leistungen </a></li>
<li><a href="?p=index"> Home </a></li>
</ul><div id="navtext">Webentwicklung **** - Professionelle Website zum günstigen Preis!</div>
</nav>
Zum Teil wichtig:
Code:
.navi {
margin-top: -20px;
position: relative;
width: 100%;
height: 60px;
background:-moz-linear-gradient(bottom, #382D2D,#534A4B);
background:-webkit-gradient(linear,left top,left);
color: white;
font-size: 14pt;
text-align: center;
}
nav li {
float:right;
vertical-align: middle;
list-style-type:none;
}
#navtext {
float: left;
color: #AAB6C4;
display: none;
}
nav a {
text-decoration: none;
display:block;
min-width: 120px;
height: 55px;
vertical-align: middle;
text-align: center;
background:-moz-linear-gradient(bottom, #382D2D,#534A4B);
color: white;
border-style: solid;
border-color: black;
border-width: 1px;
}
nav a:hover {
background:-moz-linear-gradient(bottom, #382D2D,#968E85);
color: #AAB6C4;
}
