Creating a Navigation Menu in Java Script:
$(function() {
var nav = $('#nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
left: nav.offset().left,
width: nav.width()
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
HTML Code:
<div> <div class="pic"> <img class="image" src="logo.jpg"/> </div> </div>
CSS for Classes:
.image{
width: 1000px;
height:800px;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.image:hover {
width: 1100px;
height: 900px;
opacity: 0.9;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.pic {
border: 10px solid #fff;
height: 800px;
width: 1000px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
The image has transparency that changes when hovered over, while the navigation menu stays fixed at the top of the page and moves with scrolling using JavaScript code. If hovering over the image makes the navigation menu links unclickable, consider adjusting the CSS properties to address this issue.