Ver Mensaje Individual
  #11 (permalink)  
Antiguo 18/03/2015, 11:19
Avatar de AngelKrak
AngelKrak
 
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 11 meses
Puntos: 91
Respuesta: Orientacion sobre menu flotante

ahi te modifique un poco las clases para que no tuvieras conflicto con otro menu ;)

esto en el Header ;)
Cita:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.kartingindoorirun.es/js/jquery.easing.1.3.js"></script>
html:
Cita:
<div id="fl_menu">
<div class="label-2 fl_back0" >MENU</div>
<div class="menu-2">
<a href="#header" class="menu_item fl_back1">Inicio</a>
<a href="#bloc001" class="menu_item fl_back2">Registro</a>
<a href="#bloc02" class="menu_item fl_back3">Reservas</a>
<a href="#bloc03" class="menu_item fl_back4">Galería</a>
<a href="#bloc04" class="menu_item fl_back5">Tarifas</a>
<a href="#bloc05" class="menu_item fl_back6">Contacto</a>
<a href="https://www.facebook.com/irunkartingindoor" class="menu_item fl_back7" target="_blank">Facebook</a>
</div>
</div>
css:
Cita:
/* Side menu */
#fl_menu {
position:absolute;
top:30%;
left:0px;
z-index:9999;
/* width:9%;*/
width:120px;
height:40px;
}
#fl_menu .label-2 {
padding-left:20px;
line-height:50px;
font-family:"Arial Black", Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
background-color:#000;
color:#fff;
letter-spacing:7px;
}
#fl_menu .menu-2 {
display:none;
}
#fl_menu .menu-2 .menu_item {
display:block;
background-color:#000;
color:#bbb;
border-top:1px solid #393;
padding:10px 20px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
text-decoration:none;
text-align:right;
}
#fl_menu .menu-2 a.menu_item:hover {
background:#333;
color:#fff;
}
js:
Cita:
//config
$float_speed = 1500; //milliseconds
$float_easing = "easeOutQuint";
$menu_fade_speed = 500; //milliseconds
$closed_menu_opacity = 0.75;

//cache vars
$fl_menu = $("#fl_menu");
$fl_menu_menu = $("#fl_menu .menu-2");
$fl_menu_label = $("#fl_menu .label-2");

$(window).load(function() {
menuPosition = $('#fl_menu').position().top;
FloatMenu();
$fl_menu.hover(

function() { //mouse over
$fl_menu_label.fadeTo($menu_fade_speed, 1);
$fl_menu_menu.fadeIn($menu_fade_speed);
},

function() { //mouse out
$fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
$fl_menu_menu.fadeOut($menu_fade_speed);
});
});

$(window).scroll(function() {
FloatMenu();
});

function FloatMenu() {
var scrollAmount = $(document).scrollTop();
var newPosition = menuPosition + scrollAmount;
if ($(window).height() < $fl_menu.height() + $fl_menu_menu.height()) {
$fl_menu.css("top", menuPosition);
} else {
$fl_menu.stop().animate({
top: newPosition
}, $float_speed, $float_easing);
}
}