Tue Jan 01, 2013 11:19 pm
<html>
<head>
<title>Fade in menu position when scroll down</title>
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
</head>
<body>
<div class="contentDiv">
<div class="homecontainer" id="anch-home">
<div class="content">
<ul class="main-navigations nav">
<li><a href="#"><span class="LinkImage">C</span></a>
<div class="mainDiv">
<h2 class="headTitle">Code Snippets</h2>
<h3 class="home-sub">Free codes</h3>
</div>
</li>
<li><a href="#"><span class="LinkImage">P</span></a>
<div class="mainDiv">
<h2 class="headTitle">Free <br/>Projects</h2>
<h3 class="home-sub">Download now.</h3>
</div>
</li>
<li><a href="#"><span class="LinkImage">Q</span></a>
<div class="mainDiv">
<h2 class="headTitle c1">Post Questions</h2>
<h3 class="home-sub">Get Answers</h3>
</div>
</li>
</ul>
<ul class="navBar nav">
<li><a href="#"><span class="navbarIteam">Home</span></a></li>
<li><a href="#"><span class="navbarIteam">C</span></a></li>
<li><a href="#"><span class="navbarIteam">P</span></a></li>
<li><a href="#"><span class="navbarIteam">Q</span></a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var main_menu_top = $('.main-navigations').offset().top;
//Based on the hight of your menu
var menu_bottom = main_menu_top + 250;
$(window).scroll(function(){
var scroll_top = $(window).scrollTop(); // scroll position
// Check to see if we've scrolled more than the top menu
if (scroll_top > menu_bottom) {
// Scroll bar is lower than main menu- so show the bar menu
if ( ($(".navBar").is(":visible") == false) ) {
//Menu isn't visible, so show it
$('.navBar').fadeIn();
} }
else {
//Scroll bar is higher than the bottom of the main menu
if ( $(".navBar").is(":visible") ) {
$('.navBar').fadeOut();
}
}
});
</script>
</body>
</html>
body{
color: #000;
font-size: 13px;
}
.contentDiv{
position:relative;
}
a{
color: #fff;
text-decoration: none;
}
.clr{
clear: both;
}
.content{
position:relative;
}
h1{
margin:0px;
padding:20px;
font-size:32px;
color:#000;
text-shadow:1px 1px 1px rgba(255,255,255,0.9);
text-align:center;
font-weight:400;
}
h1 span{
display:block;
font-size:14px;
color:#666;
font-style:italic;
font-family:Georgia, serif;
padding-top:5px;
}
.homecontainer {
background:#3f36Fe repeat top left;
width: 100%;
height: 1080px;
padding-top:50px;
}
.websitescontainer {
width: 100%;
height: 1080px;
padding:50px;
background: #cefece;
}
.packagescontainer {
width: 100%;
height: 1080px;
padding:50px;
background: #cefefe;
}
.mecontainer {
width: 100%;
height: 1080px;
padding: 50px;
background: #cecefe;
}
.supportcontainer{
width: 100%;
height: 1080px;
padding: 50px;
background: #fecefe;
}
@media screen and (min-height: 900px){
#homecontainer{
padding-top: 100px;
}
}@font-face{
font-family: 'Symbols';
}
.main-navigations{
padding:0;
margin:20px auto;
width: 812px;
}
.main-navigations li{
width: 200px;
height: 300px;
overflow: hidden;
position: relative;
float:left;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-right: 4px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.main-navigations li:last-child{
margin-right: 0px;
}
.main-navigations li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;
}
.LinkImage{
font-family: 'Symbols';
font-size: 62px;
color: #354;
text-shadow: 0px 0px 2px #433;
line-height: 130px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}
.mainDiv{
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 50%;
}
.headTitle{
font-size: 30px;
opacity: 0.8;
text-align: center;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.home-sub{
text-align:center;
font-size: 14px;
color: #677;
line-height: 40px;
opacity: 0.8;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.main-navigations li:first-child:hover{
background-color: #CEFECE;
}
.main-navigations li:nth-child(2):hover{
background-color: #CEFEFE;
}
.main-navigations li:nth-child(3):hover{
background-color: #CECEFE;
}
.main-navigations li:last-child:hover{
background-color: #FECEFE;
}
.main-navigations li:hover .LinkImage{
color: #000;
font-size: 90px;
}
.main-navigations li:hover .headTitle{
color: /*#00ccff*/ #000;
-webkit-animation: moveFromLeftRotate 300ms ease;
-moz-animation: moveFromLeftRotate 300ms ease;
-ms-animation: moveFromLeftRotate 300ms ease;
}
.main-navigations li:hover .home-sub{
color: #000;
-webkit-animation: moveFromBottom 500ms ease;
-moz-animation: moveFromBottom 500ms ease;
-ms-animation: moveFromBottom 500ms ease;
}
@-webkit-keyframes moveFromLeftRotate{
from {
-webkit-transform: translateX(-100%) rotate(-90deg);
}
to {
-webkit-transform: translateX(0%) rotate(0deg);
}
}
@-moz-keyframes moveFromLeftRotate{
from {
-moz-transform: translateX(-100%) rotate(-90deg);
}
to {
-moz-transform: translateX(0%) rotate(0deg);
}
}
@-ms-keyframes moveFromLeftRotate{
from {
-ms-transform: translateX(-100%) rotate(-90deg);
}
to {
-ms-transform: translateX(0%) rotate(0deg);
}
}
@-webkit-keyframes moveFromBottom {
from {
-webkit-transform: translateY(100%);
}
to {
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromBottom {
from {
-moz-transform: translateY(100%);
}
to {
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromBottom {
from {
-ms-transform: translateY(100%);
}
to {
-ms-transform: translateY(0%);
}
}
.navBar{
width: 1020px;
z-index: 10000;
position:fixed;
top: 0;
display:none;
left: 50%;
margin-left: -510px;
}
.navBar li{
width: 150px;
height: 100px;
overflow: hidden;
position: relative;
float:left;
background: #ffc;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-right: 4px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.navBar li:last-child{
margin-right: 0px;
}
.navBar li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #000;
position: relative;
}
.navbarIteam{
font-family: 'Symbols';
font-size: 60px;
color: #333;
text-shadow: 0px 0px 1px #333;
line-height: 80px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
}
.navBar li:first-child:hover{
background-color: #C1E6CD;
}
.navBar li:nth-child(2):hover{
background-color: #C444C4;
}
.navBar li:nth-child(3):hover{
background-color: #CEF44E;
}
.navBar li:nth-child(4):hover{
background-color: #5ECEFE;
}
.navBar li:last-child:hover{
background-color: #FE6EFE;
} Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com
Powered by phpBB © phpBB Group.