Hola amigos, hacia mucho que no venia por aqui, espero que esteis bien.
tengo una consulta que hacer, y es algo complicado de explicar, haber si lo hago bien.
Bien, por un lado, tengo una web echa en html con css, es algo basica. con algunas cositas bonitas.
http://www.kartingindoorirun.es/
bien, al entrar veis como a la izquierda, hay un menu flotante?? que segun bajas el scrooll hacia abajo, ese menu va contigo.
bueno, la cosa es que ese menu flotante, lo quiero integrar en un theme de un CMS llamado Dedalus, que hace mucho tiempo que lo uso para depende que proyectos, y es que no hay manera de integrarlo.
Esta es la web real:
[url=http://www.subirimagenes.com/imagen-1-9325877.html]Ver Imagen: http://s2.subirimagenes.com/imagen/previo/thump_93258771.png[/url]
Bien, y en esta captura, es el mismo efecto, pero dentro de Dedalus.
[url=http://www.subirimagenes.com/imagen-2-9325879.html]Ver Imagen: http://s2.subirimagenes.com/imagen/previo/thump_93258792.png[/url]
Bien, consigo que aparezca en el CMS,,,,, pero no consigo que el texto tenga enlace, y tampoco que se habra el sub-menu, y tampoco que baje hacia abajo cuando bajo el scrooll del raton.
Bien, el menu que esta en ambas webs, es el mismo, osea la parte HTML:
Código:
<div id="fl_menu">
<div class="label fl_back0" >MENÚ</div>
<div class="menu">
<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>
la parte CSS es la misma en las 2:
Código:
/* Side menu */
body{margin:0px; padding:0px;}
#fl_menu{position:absolute; top:30%; left:0px; z-index:9999; width:9%; height:40px;}
#fl_menu .label{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{display:none;}
#fl_menu .menu .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 a.menu_item:hover{background:#333; color:#fff;}
y luego en la plantilñla HTML entre head y /head, ambos tienen esto:
Código:
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- side menu -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
UFFFF es que perdon si la pregunta no es muy clara, o no aporto demasiado datos, estoy tratando de hacer una chapuzilla sin saber nada del tema, y me esta costando.
lo unico que me falta es reproducir los efectos, osea que baja hacia abaj