Skip to content

Instantly share code, notes, and snippets.

@ozinepank

ozinepank/hover-fadein-fadeout.html

Last active December 16, 2015 13:59
Show Gist options
  • Save ozinepank/5445854 to your computer and use it in GitHub Desktop.
Save ozinepank/5445854 to your computer and use it in GitHub Desktop.
Download ZIP
Hover element fadeIn and fadeOut
Raw
hover-fadein-fadeout.html
<!DOCTYPE html>
<head>
<title>Hover : show Nivagation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/lab.css"/>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function(){
$("#article").hover(function() {
$("#navigation").fadeIn();
},
function() {
$("#navigation").fadeOut();
});
});
</script>
<style>
#article{
background-color: #151515;
width: 100%;
height: 100%;
margin: 0 auto;
position:fixed;
}
#navigation{
display: none;
text-align: left;
background: #e18728;
position: relative;
zoom: 1;
width: 100% !important;
z-index: 6000;
box-shadow: 0 0 10px black;
padding: 20px 0 15px;
}
#navigation::before,#navigation::after{
content: "";
position: absolute;
top: 0;
left: 6px;
width: 100%;
height: 100%;
background: #e18728;
border-bottom: 6px solid #8F5314;
z-index: -1;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
#navigation:before {
top: 0;
left: 12px;
background: #6C6666;
border-bottom: 12px solid #62390E;
}
</style>
</head>
<body>
<div id="article">
<div id="navigation"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment