enlace incorrecto del javascript?

00israel · #1 (**permalink**) 29/11/2015, 05:52

Hola a todos. No se ya que es lo que estoy haciendo mal y me estoy volviéndome loco.

Estoy trasteando con un menu desplegable en jquey. que he encontrado en codepen: http://codepen.io/jrelwell/pen/tnpcf

El caso es que la página tal cual me la he bajado para jugar con ella. Y no soy capaz de hacer funcionar la acción de jQuery de sacar el desplegable.

No se que estoy haciendo algo mal. Alguien puede echarme una mano porfavor.

Os dejo el código:

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>

<style>
a:link {text-decoration: none; color: #bdc3c7;}
a:visited {text-decoration: none; color: #bdc3c7;}
a:hover {text-decoration: none; color: #bdc3c7;}
a:active {text-decoration: none; color: #bdc3c7;}

body {
  background-color: #2c3e50;
  font-family: Helvetica;
  font-size: 22pt;
}

.menu {
  position: absolute;
  display: block;
  height: 100%;
  top: 0px;
  left: -200px;
  background-color: #34495e;
  box-shadow: 5px 5px 10px;
}

#links {
  position: relative;
  float: left;
}

#link_list {
  list-style-type: none;
  width: 100%;
  padding: 0px 50px 0px 0px;
}

#link_list li {
  display: block;
  width: 100%;

}

#link_list li:hover {
  background-color: #e74c3c;
}

#toggle {
  float: right;
  position: relative;
  top: 50%;
  right: -19px;
  width: 20px;
  height: 20px;
  background-color: #7f8c8d;
  border: 2px solid #ecf0f1;
  border-radius: 20px;
  text-align: center;
  padding: 5px;
  box-shadow: 1px 5px 20px #333333 inset;
}
</style>
</head>
<body>
	<div id="sidebar" class="menu">

		<div id="links">
		    <ul id="link_list">
		      <a href=""><li>Example</li></a>
		      <a href=""><li>Example</li></a>
		      <a href=""><li>Example</li></a>
		    </ul>
		</div>

		<div id="toggle">
	    </div>

	</div>

<!-- script -->

	<script>
		$("#toggle").click(function(){
	  var w = $('#sidebar').width();
	  var pos = $('#sidebar').offset().left;

	  if(pos == 0){
	  $("#sidebar").animate({"left": -w}, "slow");
	  }
	  else
	  {
	  $("#sidebar").animate({"left": "0"}, "slow");
	  }

	});
	</script>


<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</body>

</html>

AngelKrak · #2 (**permalink**) 29/11/2015, 11:11

sacar el Desplegable? yoo no veo ningun desplegable, a que te refieres exactamente o que quieres hacer?

hackjose · #3 (**permalink**) 29/11/2015, 13:23

Cita:

Iniciado por AngelKrak

sacar el Desplegable? yoo no veo ningun desplegable, a que te refieres exactamente o que quieres hacer?

Dale click en la bolita y se oculta el menu, yo tambien no veia el desplegable

Ayer en la noche se me descompuso mi lap y no puedo probar el codigo, pero lo probe en jsfiddle.net y si funciona, lo mas seguro es que falla porque incluyes dos versiones de jquery, deberias dejar solo una(la ultima)

Un tip para buena experiencia de usuario es que le pongas un cursor:pointer; a la bolita

Saludos

hackjose · #4 (**permalink**) 29/11/2015, 13:25

No vi que son jquery y jquery-ui, entonces trata de incluirlos desde otro CDN, o descargalos para probarlos localmente

00israel · #5 (**permalink**) 29/11/2015, 16:23

Gracias Jose, pues no sabía lo de jQuery-ui. Que quieres decir con incluirlos con otro CDN?.

Lo he descargado y lo he enlazado en la página como si fuera otro javascript y nada. Sigue sin funcionarme.

No se si tengo que seguir un orden concreto a la hora de enlazarlo.

Por cierto lo que no me queda también muy claro es porque aparte de enlazar los jQuery (el de google) y el otro que dices de jQuery-ui, tengo que poner ademas ese trocito de código que pongo al final. (todo esto es lo que he visto de la persona que lo creo en el codepen)

Gracias por ayudarme jose.

00israel · #6 (**permalink**) 29/11/2015, 16:55

Me lo he descargado y lo he enlazado como otro script cualquiera.

Lo único que lo he renombrado, no se si sera correcto (le he llamado script-menu):

Código HTML:

<script src="script/script-menu.js"></script>

00israel · #7 (**permalink**) 29/11/2015, 17:16

No entiendo nada. Acabo de hacer lo que me dices pero en lugar de probar como he probado hace un rato de descargármelo, he buscado en google el que se está enlazado de jQuery-ui.

Y tampoco funciona.

Los he puesto así:

Código HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

no se que estoy haciendo mal ya.

00israel · #8 (**permalink**) 29/11/2015, 17:51

Sigo sin entender nada. He cambiado en CODEPEN el enlace que tiene a la biblioteca de jQuery, lo que os he puesto en el último post y funciona. pero si lo descargo en mi ordenador no va.

Sigo sin entenderlo

AngelKrak · #9 (**permalink**) 29/11/2015, 21:57

Uffff, maldito FDW, me borro el mensaje que te habia escrito, asi que te dire nomas el codigo que ahi que poner para local

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Hide Menu</title>
    <link rel="stylesheet" type="text/css" href="est.css"> <!-- Los Estilos del Menu -->
    <script src="http://code.jquery.com/jquery-2.1.4.js"></script> <!-- La libreria de Jquery -->
</head>
<body>
<!-- la Estructura del Menu -->
<div id="sidebar">
  <div id="links">
    <ul id="link_list">
      <a href=""><li>Example</li></a>
      <a href=""><li>Example</li></a>
      <a href=""><li>Example</li></a>
    </ul>
  </div>
  <div id="toggle">
    
  </div>
</div>
<script src="ind.js"></script> <!-- El codigo Personal que abre y Cierra el Menu -->
</body>
</html>

ind.js:

Código Javascript:

Ver original$("#toggle").click(function(){
  var w = $('#sidebar').width();
  var pos = $('#sidebar').offset().left;
 
  if(pos == 0){
  $("#sidebar").animate({"left": -w}, "slow");
  }
  else
  {
  $("#sidebar").animate({"left": "0"}, "slow");
  }
  
});

est.css:

Código CSS:

Ver originala:link {text-decoration: none; color: #bdc3c7;}
a:visited {text-decoration: none; color: #bdc3c7;}
a:hover {text-decoration: none; color: #bdc3c7;}
a:active {text-decoration: none; color: #bdc3c7;}
 
body {
  background-color: #2c3e50;
  font-family: Helvetica;
  font-size: 22pt;
}
 
#sidebar {
  position: absolute;
  display: block;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: #34495e;
  box-shadow: 5px 5px 10px;
}
 
#links {
  position: relative;
  float: left;
}
 
#link_list {
  list-style-type: none;
  width: 100%;
  padding: 0px 50px 0px 0px;
}
 
#link_list li {
  display: block;
  width: 100%;
 
}
 
#link_list li:hover {
  background-color: #e74c3c;
}
 
#toggle {
  float: right;
  position: relative;
  top: 50%;
  right: -19px;
  width: 20px;
  height: 20px;
  background-color: #7f8c8d;
  border: 2px solid #ecf0f1;
  border-radius: 20px;
  text-align: center;
  padding: 5px;
  box-shadow: 1px 5px 20px #333333 inset;
}

00israel · #10 (**permalink**) 30/11/2015, 03:56

Muchisimas gracias Jose.

que alivio!!

por cierto ahora viene lo bueno. Explicame que estaba haciendo mal porque aunque no lo he hecho así. No pensé que era incorrecto el mio.

P.D.: Por cierto esto me funcionará igual cuando lo suba a internet tal y como está?

nuevamente muchas gracias.

00israel · #11 (**permalink**) 30/11/2015, 05:28

ya me contesto yo a lo de si funciona arriba. Y funciona perfectamente. Genial!!

00israel · #12 (**permalink**) 30/11/2015, 05:58

Por cierto hay algo que me estoy dando cuenta que me resulta molesto. Cuando pulsas varias veces el boton para probar el menú. Me doy cuenta que se selecciona como parte de texto invisible.

Eso se puede evitar?

AngelKrak · #13 (**permalink**) 30/11/2015, 11:54

si, eso puedes hacer con la Propiedad de user select ;)
-webkit-user-select: none;

http://jsfiddle.net/AngelKrak/L4tfrzyv/

00israel · #14 (**permalink**) 30/11/2015, 13:29

Mil gracias de nuevo Angel.

un saludo.

00israel · #15 (**permalink**) 30/11/2015, 13:30

por cierto me sigue intrigando porque no me funcionaba como lo hacia yo?

que me dices?

AngelKrak · #16 (**permalink**) 30/11/2015, 16:10

Talvez es porque ponias mal los enlaces, yo tambien tenia problemas al principio cuando colocaba los enlace a Jquery por ejemplo, ahi veces que necesitan estar al principio, Final o entre el código que usaras o no funciona jejeje xD

00israel · #17 (**permalink**) 30/11/2015, 16:34

Gracias angel. La verdad que necesito ponerme las pilas con jquery.