Alternate Menu On scroll

/* COLORI E STILI MENU ALTERNATE ON SCROLL - ©JackGaunt */
.container {margin-top: 150px !important}
.tabs.top {top: 150px !important}

body div:first-child {-moz-transition: opacity .2s ease-in-out 0s; transition: opacity .2s ease-in-out 0s; -o-transition: opacity .2s ease-in-out 0s; -ms-transition: opacity .2s ease-in-out 0s; -webkit-transition: opacity .2s ease-in-out 0s}

.menualt .menuwrap, .menudef .menuwrap {opacity: 1 !important; width: 920px; overflow:visible !important}

.menualt {position: fixed !important;
z-index: 9; background: rgba(0, 0, 0, 0.8);
left: 50%; margin-left: -460px}


.menudef {position: absolute !important;
z-index: 9; background:none;
left: 50%; top: 15px;
margin-left: -460px}


/* MENU principale PRIMA DELLO SCROLL*/
.menudef .menuwrap {font-family: verdana, tahoma, arial, sans-serif;
height: 120px}

.menudef .menuwrap li {line-height: 2.6em; color: #AAA; margin: 2px}

.menudef .menuwrap .left li {position:relative; top: 65px; left: -140px; z-index: 7}

.menuwrap .left > *:first-child ul li a:hover {background: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 2px 2px 2px rgba(0, 0, 0, 0.25) inset !important}

.menudef .menuwrap .left > *:first-child {position: relative;
top: 30px;
left: 0;
z-index: 8;
padding-top: 30px;
padding-left: 120px;
height: 0}

.menudef .menuwrap .left .login {padding-left: 0}

.menudef .menuwrap .menu ul li {top: 0; left: 0}


.menudef .menuwrap .avatar {max-width: 100px;
max-height: 100px;
height: auto;
width: auto; border-radius: 7px;
position: absolute;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 3px 3px 3px rgba(0, 0, 0, 0.5) inset; padding: 10px;
top: -15px;
left: 20px}

.menudef .menuwrap .avatar:hover {background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.2)}


.menudef .menuwrap .avatar img {border-radius: 7px; max-width: 96px;
max-height: 96px}

.menudef .menuwrap .left > li:first-child:hover > ul {display: block;
position: absolute; z-index: 9;
top: 31px;
margin-left: 35px}

.menudef .menuwrap a {margin: 0;
font-size: 11px;
color: #DDD;
padding: 0 20px;
border-radius: 5px;
line-height: 200%;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 3px 3px 3px rgba(0, 0, 0, 0.5) inset !important;
border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px}


.menudef .menuwrap a:hover, .menudef .menu:hover > a {background-color: rgba(0, 0, 0, 0.2); color:white}

.menudef .menuwrap .nick {margin: 0;
font-size: 11px;
color: rgb(170, 170, 170);
padding: 0 20px;
border-radius: 5px;
line-height: 0}

.menudef .menuwrap a:hover {color: #FFF; border: 0}
.menudef .menuwrap .icon a {padding: 0 6px}


/* esci e news */
.menudef .menuwrap b {color: #000}

.menudef .menuwrap .nick {font-size: 20pt;
margin: 0 0 0 0.6em;
position: relative;
top: -15px}

.menuwrap form {padding: 0 11px 0 5px}


/* MENU principale IN SCROLL */
.menualt .menuwrap {font-family: verdana, tahoma, arial, sans-serif; background: #333; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); -moz-box-shadow: -2px 1px 2px rgba(0, 0, 0, .5)}

.menualt .menuwrap li {line-height: 2.6em; color: #AAA}

.menualt .menuwrap a {margin: 0; padding: 0 11px; font-size: 11px; color: #AAA}
.menualt .menuwrap a:hover {color: #FFF; border: 0}
.menualt .menuwrap .icon a {padding: 0 6px}


.menualt .menuwrap b {color: #000}

.menualt .menuwrap .nick {margin-left: .6em}
.menuwrap form {padding: 0 11px 0 5px}





/*MENU UGUALE SIA PRIMA CHE DOPO LO SCROLL*/


.right .menu ul {margin-left: -2em}
.menuwrap .right a {background:none !important; box-shadow:none !important}

.menudef .menuwrap .right {position:relative; margin-top: -20px}

.menu > a:hover, .menu:hover > a, .menudef .menu .nick:hover, .menudef .left li:first-child:hover .nick {color: #DDD; background-image: url(http://i.imgur.com/7VPYn.png) !important; background-repeat: no-repeat !important; background-position: 10% 100% !important}
.menuwrap .left .login > *: first-child a:hover {background-color: rgba(0, 0, 0, 0.1) !important}
.menuwrap .left .login > *: first-child a {background-color:rgba(0, 0, 0, 0.05) !important; border-radius: 4px; line-height: 22px; height: 22px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 3px 3px 3px rgba(0, 0, 0, 0.1) inset !important}
.menualt .left .menu ul li a {background:rgba(0, 0, 0, 0); background-image:none !important}

.menu ul {width: 15em; box-shadow: 0 5px 15px -6px rgba(0, 0, 0, .5); border-radius: 5px; padding: 3px;
background: rgb(232, 232, 232); /* Old browsers */
background: -moz-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(249, 249, 249, 1) 50%, rgba(232, 232, 232, 1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(232, 232, 232, 1)), color-stop(50%, rgba(249, 249, 249, 1)), color-stop(100%, rgba(232, 232, 232, 1))); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(249, 249, 249, 1) 50%, rgba(232, 232, 232, 1) 100%); /* Chrome10+, Safari5.1+ */
background: -o-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(249, 249, 249, 1) 50%, rgba(232, 232, 232, 1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(249, 249, 249, 1) 50%, rgba(232, 232, 232, 1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(232, 232, 232, 1) 0%, rgba(249, 249, 249, 1) 50%, rgba(232, 232, 232, 1) 100%); /* W3C */
filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#E8E8E8', endColorstr='#E8E8E8', GradientType=0)}


/* MENU contestuale(dropdown) */
.menu > a:hover, .menu:hover > a {color: #FFF; background: url('http://img.forumfree.net/style_images/52/arrow.gif') no-repeat bottom}

.menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none; border-top:}
.menu li:first-child {padding-top: 0}
.menu li strong {padding: 3px 8px; color: #000}
.menu li a {padding: 3px 8px !important; font-size: 12px; color: #666 !important}
.menu li a:hover, .menu li:hover > a {border-radius: 5px}


#m_up a {padding: 0 11px 0 0}
#c_up {position: absolute; right: 10px; bottom: 10px; opacity: .5}
#f_up {position: fixed; bottom: 20px; right: 1%; opacity: .9}
.p_up:hover, #c_up:hover, #f_up:hover {opacity: 1; text-decoration: none; border: 0}

/* SUB MENU contestuale(dropright) */
/* Sposta msg pvt */
.submenu.alternative ul {; margin-top: -2px}
.submenu.alternative li:first-child {padding: 3px 4px; border-top: 0}

.menuwrap .menu ul li a, .menuwrap em {background: none; box-shadow:none !important}
.menuwrap .menu ul li a {line-height: 120%}
.menuwrap .menu ul li a:hover {background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 2px 2px 2px rgba(0, 0, 0, 0.25) inset !important}

.menudef .menuwrap .left >:first-child a {background:none !important; box-shadow:none !important}

.menudef .menuwrap .login >:first-child a, .menualt .menuwrap .login >:first-child a {background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.05) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 3px 3px 3px rgba(0, 0, 0, 0.3) inset !important; line-height: 22px; height: 22px; border-radius: 4px}
.menudef .menuwrap .login >:first-child a:hover, .menualt .menuwrap .login >:first-child a:hover {background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.15) !important}

/* CERCA */
.menuwrap .search input {padding: 0 20px 0 5px; color: #CCC; background-color: rgba(0, 0, 0, 0.3); background-image:url('http://img.forumfree.net/style_images/52/icon_search.png'); background-position: 96% -20%; background-repeat:no-repeat; height: 22px; border:none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 3px 3px 3px rgba(0, 0, 0, 0.5) inset !important; border-radius: 4px; border:none}
.menuwrap .search input:hover {color: #DDD; background-color: rgba(0, 0, 0, 0.2)}
.menuwrap .search input:focus {color: #DDD; background-color: rgba(0, 0, 0, 0.2); background-position: 96.5% 120%}

.menuwrap input {height: 22px; padding-left: 5px}

/* LOGIN VELOCE */
.menuwrap label {padding: 0; font-size: 10px}
.menuwrap label:hover {color: #FFF}

.menuwrap input {font: 11px verdana, arial, sans-serif; color: #CCC; background: rgba(0, 0, 0, 0.3); border-radius: 4px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 3px 3px 3px rgba(0, 0, 0, 0.5) inset !important; border:none}
.menuwrap input:hover {cursor: pointer; background-color: rgba(0, 0, 0, 0.2)}
.menuwrap input:focus {cursor: default; background-color: rgba(0, 0, 0, 0.2); outline: none}

.menuwrap input[type=submit] {text-shadow: 0 -1px 0 #444; color: #888; border-radius: 4px;
background-color:rgba(0, 0, 0, 0.1); box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .3), inset 0 10px rgba(255, 255, 255, .1), inset 0 10px 20px rgba(255, 255, 255, .15), inset 0 -15px 30px rgba(0, 0, 0, .2)}
.menuwrap input[type=submit]:hover {color: #AAA; background:rgba(0, 0, 0, 0.15)}

<!--- SCRIPT MENU ALTERNATE ON SCROLL - ©JackGaunt --->

<script type="text/javascript">

window.onload = firstload();
window.onscroll = scrollin;


function scrollin() {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0)
switchtoalt();

else
switchtodef();
}

function opacize() {document.body.children[0].style.opacity = "0"; }
function deopacize() {document.body.children[0].style.opacity = "1";}

function switchtoalt() {
if(document.body.children[0].className == 'menualt')
null;
else
{
opacize();
setTimeout( function() {deopacize()}, 400 );
setTimeout( function() {document.body.children[0].className = "menualt"; }, 401);
}
}

function switchtodef() {
if(document.body.children[0].className == 'menudef')
null;
else
{
setTimeout( function() {opacize()}, 200 );
setTimeout( function() {deopacize()}, 400 );
setTimeout( function() {document.body.children[0].className = "menudef"; }, 401);
}
}

function firstload() {
deopacize();
document.body.children[0].className = "menudef";
}

</script>
<!--- FINE SCRIPT -->