Orientacion sobre menu flotante

sarjentocuch · #1 (**permalink**) 17/03/2015, 09:20

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

AngelKrak · #2 (**permalink**) 17/03/2015, 09:43

alguno de los div debe de estar haciendo interferencia con los del CMS ;) intenta cambiarlo por unos tuyos desde 0 ;)

sarjentocuch · #3 (**permalink**) 17/03/2015, 10:41

AngelKrak no entiendo la respuesta

me he dado cuenta que los enlaces, osea los "href" llevan varios class llamados por ejemplo: class="menu_item fl_back4

y esos class no estan en el menu css..... no lo entiendo,,, donde estan o se definen (no se como se dice) esos class?? no os encuentro.

MMan · #4 (**permalink**) 17/03/2015, 11:00

te falta incluir el codigo javascript que "configura e inicializa"el plugin easing

[URL="http://codepen.io/anon/pen/zxMLaj"]http://codepen.io/anon/pen/zxMLaj[/URL]

---
y no se si debes incluir 2 versiones diferentes de jquery en tu web.... puede causar conflictos, yo me quedaria con uno solo (el mas actualizado ... tal vez)

AngelKrak · #5 (**permalink**) 17/03/2015, 11:29

ese es tu problema de los class, el JS no los llama yo creo y por eso no se desplega, recuerda poner el codigo bien en el CMS ;) para que funcione perfecto :)

sarjentocuch · #6 (**permalink**) 17/03/2015, 17:15

mmMMMm que dificil es esto: haber, el CMS tiene una carpeta que se llama ARCHIVOS, dentro de la cual, tiene un archivo que se llama JAVASCRIPT.PHP

lo he abierto, y dentro era asi:

Código:

<?php

/**
 * Dedalus CMS - javascript.php
 *
 * Javascript - Código JavaScript a utilizar en el portal de forma global
 *
 * @author Rolando Caldas Sanchez <[email protected]>
 * @copyright Copyright (c) 2009, Rolando Caldas Sanchez ({@link http://truzone.org})
 * @version 1.0.3
 * @since version 1.0.0
 * @license http://truopensource.org/lgp TruOpenSource/LGP
 * @package Kernel
 * @access private
 */

if (!defined('DEDALUS'))
	die("Illegal Access");

$java = '
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/cookies.js"></script> 


<!--[if lt IE 7]>
<script type="text/javascript" src="scripts/pngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="scripts/dedalus.js"></script>
<script type="text/javascript" src="scripts/scroll.js"></script>';

return($java);
# vim: ai ts=4 sts=4 et sw=4

yo le he agregado estas 2 lineas, no si si es lo que hay que hacer:

Código:

<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="scripts/js.js"></script>

osea asi:

Código:

<?php

/**
 * Dedalus CMS - javascript.php
 *
 * Javascript - Código JavaScript a utilizar en el portal de forma global
 *
 * @author Rolando Caldas Sanchez <[email protected]>
 * @copyright Copyright (c) 2009, Rolando Caldas Sanchez ({@link http://truzone.org})
 * @version 1.0.3
 * @since version 1.0.0
 * @license http://truopensource.org/lgp TruOpenSource/LGP
 * @package Kernel
 * @access private
 */

if (!defined('DEDALUS'))
	die("Illegal Access");

$java = '
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/cookies.js"></script> 
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="scripts/js.js"></script>

<!--[if lt IE 7]>
<script type="text/javascript" src="scripts/pngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="scripts/dedalus.js"></script>
<script type="text/javascript" src="scripts/scroll.js"></script>';

return($java);
# vim: ai ts=4 sts=4 et sw=4

es que no se si es eso lo que hay que agregar

AngelKrak · #7 (**permalink**) 17/03/2015, 19:33

ahora pon solo tu codigo completo del Menu Html en donde quieres y listo ;) y seria bueno que pasaras la web para ver como vas y por si hay problemas poder ayudarte mejor ;)

sarjentocuch · #8 (**permalink**) 17/03/2015, 20:33

Pues no funciona, mMMMMMmmm voy a poner el menu en mi web de verdad, la cual esta echa con dedalus, haber si ahi funciona.
pongo la url, lo siento, no es por hacer spam. (si consigo solucionarlo o no, luego lo quito igualmente)
[URL="http://www.infomaniakos.com"]PROBANDO EN ESTA WEB[/URL]

bueno, lo primero que voy a hacer, es meter los archivos jquery.easing.1.3.js y js.js en la carpeta scripts del CMS.

luego voy a la carpeta ARCHIVOS y abro el javascript.php y agrego estasdos lineas como he dicho arriba.

Código:

<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="scripts/js.js"></script>

Bien, ahora voy a la plantilla del template, y entre body y /body, pongo los div.

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>

en teoria, asi deberia de funcionar, no?? bueno perdon, al stile.css agrego los stilos:

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;}

mMMMMMmmmm y nada, me sigue haciendo lo mismo. osea, se ve, pero no hace nada.

AngelKrak · #9 (**permalink**) 17/03/2015, 23:11

lo mas seguro es que tu codigo del menu este haciendo interferencia con el de Dedalus ;) y recuerda poner el JS que tiene tu menu en dedaluus y tambien las Librerias o no funcionara ;)

MMan · #10 (**permalink**) 18/03/2015, 08:00

Cita:

Iniciado por MMan

te falta incluir el codigo javascript que "configura e inicializa"el plugin easing

[URL="http://codepen.io/anon/pen/zxMLaj"]http://codepen.io/anon/pen/zxMLaj[/URL]

---
y no se si debes incluir 2 versiones diferentes de jquery en tu web.... puede causar conflictos, yo me quedaria con uno solo (el mas actualizado ... tal vez)

me parece que no haz LEIDO mi post... te falta el CODIGO JAVASCRIPT PARA INICIAR EL PLUGIN

:s tress:

que esta posteado en ese LINK de CODEPEN

Código:

   //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");
    $fl_menu_label = $("#fl_menu .label");

    $(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);
        }
    }

</script>

AngelKrak · #11 (**permalink**) 18/03/2015, 11:19

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

esto en el Header ;)

Cita:

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);
}
}

sarjentocuch · #12 (**permalink**) 18/03/2015, 19:46

Mman perdona que no te respondiera personalmente, es que yo por lo menos, abri el enlace, y no veo nada en el,,, osea lo que veo es esto: y es que aparte, no entendi muy bien donde meter ese script jeje lo siento, al no ver enlace me quede en blanco

AngelKrak, voy a probarlo ahora mismo, haber que pasa

EDITO: Angel, las lineas esas de codigo que marcas como JS, donde lo tengo que meter? es que estoy super liao ya,,,,

MMan · #13 (**permalink**) 18/03/2015, 20:02

pues a mi me funciona perfecto :)

http://codepen.io/anon/pen/zxMLaj

el codigo javascript metelo en como un inline script....

al final de todo tu html.. antes de la etiqueta de cierre </body>

<script>
aca el script
</script>
</body>

AngelKrak · #14 (**permalink**) 18/03/2015, 20:04

puedes hacerlo en un archivo aparte como index.js o en una etiqueta creo k se dice asi >_< llamada:

Cita:

sarjentocuch · #15 (**permalink**) 18/03/2015, 20:06

lo hago asi, y me da este error:

Código:

Parse error: syntax error, unexpected '=' in /home/s0667b7c/public_html/archivos/theme.php(456) : eval()'d code on line 321

ahora mismo lo tengo puesto con el error.

AngelKrak · #16 (**permalink**) 18/03/2015, 20:07

haaa por cierto parece k ahi problemas con Codepen de hoy en dia >_< a mi no me salen las Miniaturas de los proyectos que hacen :/ y otro problema puede ser el de @sarjentocuch

AngelKrak · #17 (**permalink**) 18/03/2015, 20:09

en la linea 321 dice que ahi un error y puede ser estte = checa cual podria ser y si no pusistes mal el codigo ;) recuerda k siempre debes de hacer backups por estos errores ;)

sarjentocuch · #18 (**permalink**) 18/03/2015, 20:15

en ese archivo theme.php en la linea 321, sol hay esto:

Código:

<div align="right">

y el dreamweaver no me da ningun error de sintaxis ni nada:

si si, lo de las bacups tengo esa buena costumbre de hacerlo si.

AngelKrak · #19 (**permalink**) 18/03/2015, 20:46

haber muestra el codigo que ahi desde la linea 316 hasta la que se pueda ver en adelante ;)

sarjentocuch · #20 (**permalink**) 19/03/2015, 11:15

Hola Angel,,, este codigo? de donde sale??? osea no lo entiendo, mi primera web la de http://www.kartingindoorirun.es donde el efecto funciona bien,,,,,de donde coge el script para darle animacion a ese div??? es que no lo entiendo.
estoy buscando ese codigo dentro de la web de karting, y no lo encuentro........

me han recomendado sacar el codigo a un js externo, y llamarlo, pero el dreamweaver me da error de sistaxis en ese codigo, en la ultima linea que solo hay un corchete cerrado.

Código:

//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);
}
}

AngelKrak · #21 (**permalink**) 19/03/2015, 11:23

lo tienes al final >_< o mas bn casi

sarjentocuch · #22 (**permalink**) 19/03/2015, 12:14

jo, habia una linea comentada enorme y no lo habia visto :(