Crear menú html

sarerac · January 25, 2013

Hola !

Estoy haciendo una web y quería hacer un menú sobre un texto con muchas palabras. Cuando pusiera el ratón sobre una, que se resaltaran otras desperdigadas por el cuerpo del texto. No sé si me he explicado bien. P.ej.

Xxxxxxxxx. Xxxxxxxxxx. Xxxxxxxxx. Xxxxxxxxxx xxxxxxxxxx

En AK, además de los encargos de terceros que podéis ver en nuestro book, también hacemos productos propios.Estos siempre son de dos tipos: Digitales o Físicos (normalmente con su versión digital). Los físicos tienen un precio, y si os gustan podéis pedírnoslos para que os los enviemos a casa. Pero los digitales son gratis (cobrar por algo que se puede copiar infinitas veces no tiene sentido) y podéis bajarlos directamente de nuestra web

Las equis son las palabras del menú y las palabras en negrita y subrayadas las resaltadas. Alguien sabe por favor si es muy complicado hacerlo en Dreamweaver o si hay algún tutorial?

Gracias!

quim_ · January 25, 2013

Hola,

Puedes probar con getElementsByClassName() en una función javascript onmouseover()

el getElementsByClassName no funciona en IE 5,6,7,8 ... para variar ...

saludos!

sarerac · January 27, 2013

Gracias por contestar. La verdad es que necesitaba que no tenga problemas en ningún navegador. Os pongo un ejemplo a continuación:

http://www.vivelatino.com.mx

uhf · January 28, 2013

Hola sarerac:

Adaptando y simplificando el ejemplo que has puesto de la web mexicana puedes llegar a este código simplificado que es fácil de manejar y de entender.

Te pongo un enlace al ejemplo mio.

Y aquí el mismo código (muy escueto) utilizado:

<!doctype html>
<html>
<head>
<style>
body{
margin: 0;
padding: 0;
background: #b9b9b9;
height: 100%;
font-family: sans-serif;
}
#menus li {
float: left;
height: 40px;
list-style-type: none;
}
#menus a {
display: block;
float: left;
color: #6a6a6a;
font-family: sans-serif;
font-size: 36px;
line-height: 36px; 
margin-right: 20px;
text-decoration: none;
height: 100%;
}
#menus a:hover, #menus a.selected {
color: #fef8d2;
}
.band_list {
width: 500px;
clear: both;
}
.band_list a{
text-decoration: none;
}
.band_list li{
float: left;
list-style-type: none;
margin: 0 15px 5px 0;
position: relative;
height: 30px;
line-height: 30px;
z-index: 100;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
.band_list li.inactivo {
opacity: 0.30;
filter:alpha(opacity=30);
}
.band_list li.inactivo span {
color: white;
}
.tiny{
font-size: 24px;	
color: white;
}
.color span{
color: teal;
}
</style>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

<body>
   	<div id="menus">
		<ul>
			<li><a href="#todas"class="selected">todos</a></li>
			<li><a href="#1">uno</a></li>
			<li><a href="#2">dos</a></li>
			<li><a href="#3">tres</a></li>
			<li><a href="#4">cuatro</a></li>
		</ul>
	</div>
	
	<ul class="band_list">
		<li class="etiqueta_2 etiqueta">	
				<span class="tiny">Lorem</span>
		</li>		
		<li class="etiqueta_1 etiqueta">
				<span class="tiny">ipsum</span>
		</li>
		<li class="etiqueta_4 etiqueta">
				<span class="tiny">dolor</span>
		</li>
		<li class="etiqueta_3 etiqueta">
				<span class="tiny">sit</span>
		</li>
		<li class="etiqueta_3 etiqueta">
				<span class="tiny">amet,</span>
		</li>
		<li class="etiqueta_1 etiqueta">
				<span class="tiny">consectetur</span>
		</li>
		<li class="etiqueta_4 etiqueta">
				<span class="tiny">adipiscing</span>
		</li>
		<li class="etiqueta_3 etiqueta">
				<span class="tiny">elit.</span>
		</li>
		<li class="etiqueta_2 etiqueta">
				<span class="tiny">Curabitur</span>
		</li>
		<li class="etiqueta_3 etiqueta">
				<span class="tiny">sed</span>
		</li>	
		<li class="etiqueta_1 etiqueta">
				<span class="tiny">lacus</span>
		</li>
		<li class="etiqueta_4 etiqueta">
				<span class="tiny">non</span>
		</li>
		<li class="etiqueta_3 etiqueta">
				<span class="tiny">odio</span>
		</li>
		<li class="etiqueta_2 etiqueta">
				<span class="tiny">pretium</span>
		</li>
		<li class="etiqueta_3 etiqueta">
				<span class="tiny">ultrices</span>
		</li>
	</ul>

<script>
		var currentDay = 'todas';
		$('#menus a').click(function(e) {
			e.preventDefault();
			var diaID = $(this).attr('href');
			var dia = diaID.substring(1);
			var newDayID = '.etiqueta_'+dia;
			if(currentDay != dia) {
				$('#menus a').removeClass('selected');
				$(this).addClass('selected');
				currentDay = dia;
				switch(dia) {
					case 'todas':
						$('.etiqueta').removeClass('inactivo color');
						break;
					case '1':
					case '2':
					case '3':
					case '4':
						$('.etiqueta:not('+newDayID+')').addClass('inactivo').removeClass('color');
						$(newDayID).removeClass('inactivo').addClass('color');
						break;
				}
			}	
		});
	</script>

</body>
</html>

A partir de aquí es facil de adaptar a tus necesidades jugando con html/css y creo que funciona en cualquier navegador (sin comprobar).

Ya nos contarás

Un saludo.

mon

* No olvides ejecutarlo en un servidor para que cargue la librería jQuery.

Edited January 28, 2013 by uhf

Mr_Joker · January 28, 2013

Según entiendo, lo que quieres es que al pasar el mouse por el texto se activen las palabras que conforman el menú. Sería un onmouseover a lo bestia. He estado mirando porque también me interesa el efecto, pero estoy orientándome por lo que comento _quim

uhf · January 28, 2013

Hola de nuevo:

Si necesitas un efecto onmouseover, en mi ejemplo solo necesitas modificar esta línea así en el script

$('#menus a').mouseover(function(e) {

Ejemplo de onmouseover

Espero que os sirva.

¡Saludos!

mon

sarerac · January 28, 2013

Uhf gracias de verdad era lo que estaba buscando, te lo agradezco sinceramente!!!!!!!

Mr_Joker · January 29, 2013

Hola de nuevo:

Si necesitas un efecto onmouseover, en mi ejemplo solo necesitas modificar esta línea así en el script
$('#menus a').mouseover(function(e) {
Ejemplo de onmouseover

Espero que os sirva.

¡Saludos!

mon

Muy bueno. Eso es!!

sarerac · February 1, 2013

Uhf por favor una última cosa es que quiero justificar todas las palabras y no lo consigo. Qué código debo modificar?

Gracias!!

Mr_Joker · February 2, 2013

1359757195[/url]' post='1052723030']
Uhf por favor una última cosa es que quiero justificar todas las palabras y no lo consigo. Qué código debo modificar?

Gracias!!

S tienes el texto en un div o donde sea métete en style un text-align:justify

uhf · February 2, 2013

Hola! :)

No podías justificar el texto pues cada palabra era un elemento de una lista desordenada.

He modificado el html para incluir todo el texto dentro de un div y cada elemento individual está dentro de un span. Y también se ha modificado el css para ajustarlo.

Aquí tienes el ejemplo con texto justificado.

Y aquí todo el código:

<!doctype html>
<html>
<head>

<style>
body{
margin: 0;
padding: 0;
background: #b9b9b9;
height: 100%;
font-family: sans-serif;
}
#menus {
margin-bottom: 30px;
height: 50px;
}
#menus li {
float: left;
height: 40px;
list-style-type: none;
}
#menus a {
display: block;
float: left;
color: #6a6a6a;
font-family: sans-serif;
font-size: 36px;
line-height: 36px; 
margin-right: 20px;
text-decoration: none;
height: 100%;
}
#menus a:hover, #menus a.selected {
color: #fef8d2;
}
.lista {
width: 500px;
clear: both;
text-align: justify;
color: white;
font-size: 24px;
margin-left: 42px;
}
.lista a{
text-decoration: none;
}
.lista span{
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition:	color 1s ease;
-o-transition: color 1s ease;
transition: color 1s ease;
}
.lista span.inactivo {
color: #d9d9d9;
}
.lista span.color {
color: teal;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</head>

<body>
   	<div id="menus">
		<ul>
			<li><a href="#todas"class="selected">todos</a></li>
			<li><a href="#1">uno</a></li>
			<li><a href="#2">dos</a></li>
			<li><a href="#3">tres</a></li>
			<li><a href="#4">cuatro</a></li>
		</ul>
	</div>
	
	<div class="lista">

				<span class="etiqueta_2 etiqueta">Lorem</span>

				<span class="etiqueta_1 etiqueta">ipsum</span>

				<span class="etiqueta_1 etiqueta">dolor</span>

				<span class="etiqueta_3 etiqueta">sit</span>

				<span class="etiqueta_3 etiqueta">amet,</span>

				<span class="etiqueta_1 etiqueta">consectetur</span>

				<span class="etiqueta_4 etiqueta">adipiscing</span>

				<span class="etiqueta_3 etiqueta">elit.</span>
				
									<span class="etiqueta">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</span>

				<span class="etiqueta_2 etiqueta">Curabitur</span>

				<span class="etiqueta_3 etiqueta">sed</span>

				<span class="etiqueta_1 etiqueta">lacus</span>
									<span class="etiqueta">Vivamus vestibulum, purus nec pharetra dignissim, enim sapien interdum neque, vitae egestas erat turpis in tortor. Donec cursus eros a mi auctor pretium. Morbi est felis, aliquet sit amet egestas a, placerat id justo.</span>
				<span class="etiqueta_4 etiqueta">non</span>

				<span class="etiqueta_3 etiqueta">odio</span>

				<span class="etiqueta_2 etiqueta">pretium</span>

				<span class="etiqueta_3 etiqueta">ultrices</span>

	</div>

<script>
		var currentDay = 'todas';
		$('#menus a').mouseover(function(e) {
			e.preventDefault();
			var diaID = $(this).attr('href');
			var dia = diaID.substring(1);
			var newDayID = '.etiqueta_'+dia;
			if(currentDay != dia) {
				$('#menus a').removeClass('selected');
				$(this).addClass('selected');
				currentDay = dia;
				switch(dia) {
					case 'todas':
						$('.etiqueta').removeClass('inactivo color');
						break;
					case '1':
					case '2':
					case '3':
					case '4':
						$('.etiqueta:not('+newDayID+')').addClass('inactivo').removeClass('color');
						$(newDayID).removeClass('inactivo').addClass('color');
						break;
				}
			}	
		});
	</script>

</body>
</html>

También he cambiado un poco las transiciones utilizadas para que sean solo de color y no de trasparencia.

Un saludo de nuevo.

mon

sarerac · February 9, 2013

Hola UHF!!!

sabes si este archivo se podría integrar en una web con efecto parallax?

Gracias

uhf · February 9, 2013

Buenas sarerac:

Estoy convencido que sí se puede.

Pero "parallax" es más un concepto que una tecnología concreta. Se puede implementar de diferentes formas.

Si pones un ejemplo del parallax en concreto (una web) y como/donde lo quieres integrar te podríamos contestar con más precisión.

¡Saludos!

mon

sarerac · February 10, 2013

Hola !!

Copio el link donde se puede descargar el código el código de un parallax que me sirve de modelo, he intentado integrarlo yo pero no funciona, evidentemente algo he hecho mal

http://johnpolacek.github.com/superscrollorama/

Edited February 10, 2013 by sarerac

uhf · February 10, 2013

Buenas noches. :rolleyes:

Aqui tienes una muestra de que funciona. Eso sí, implementado de cualquier manera y a todo correr.

Mira el código y saca tus conclusiones. Esta trasteado sobre el archivo "simpledemo.html" que te pudes descargar en la web de superscrollorama

Habría que saber qué es lo que necesitas o quieres conseguir, pero ya ves que es factible.

.

Un saludo y espero que te sirva de algo.

Si precisas un poco más el efecto o como quieres implementarlo podremos echarte un cable.

Saludos!

mon

Edited February 11, 2013 by uhf

sarerac · February 10, 2013

Gracias intentaré implementar como lo has hecho tú con una plantilla simplificada, a ver si lo consigo.

Un saludo!!

sarerac · February 10, 2013

Perdona es que Safari no me permitía estudiar el código con comando "view source:" y en Firefox si.

Saludos

Edited February 10, 2013 by sarerac

sarerac · February 11, 2013

Hola

Perdón por la insistencia. El ejemplo que me mostraste es màs o menos lo que quería excepto que el código tuyo apareciese encima de las letras amarillas nada más abrir la página. He copiado el código en coda para estudiarlo y no funciona no sé si es un problema de librerías...no tengo experiencia en html ( aunque estoy aprendiendo)pero quizá lo que pretendo hacer está fuera de mis posibilidades.

Saludos

uhf · February 11, 2013

...pero quizá lo que pretendo hacer está fuera de mis posibilidades.

No lo creo. Seguro que lo puedes conseguir. Lo importante en todo proyecto es tener claro lo que quieres hacer y conseguir. Para así definir tus necesidades. Hay en internet infinidad de recursos accesibles incluso para novatos como nosotros. Y lo más importante es no cazar moscas a cañonazos.

Te digo esto pues me da la impresión que lo que tu pretendes es tener una página donde se cargue el contenido, del que veniamos hablando, de una forma animada. Con el tipo de animación que tu deseas.

Para cumplir ee objetivo "parallax" me parece excesivo y complejo.

Con jQuery puedes llegar a casi todo. Siempre dentro del marco de cosas sencillas. Es fácil de implementar y comprender y sobre todo de modificar a tu gusto. También puede ser complejo y muy maleable pero hay que ser algo más experto.

Para usos sencillos es ideal.

Bueno te pongo otro ejemplo que con una par de pequeñas modificaciones sobre el código que ya teniamos crea un efecto (entre otros posibles) en la carga de la página y otro al hacer clik sobre los elementos del menú. Se puede adaptar, modificar, extender, etc. a tu gusto.

No tiene nada que ver con "parallax"

Visita la página de este ejemplo. Copia el código y no olvides que necesitas ejecutarlo en un servidor ya sea MAMP, otro similar o un servidor en la red.

¡Suerte y un saludo!

mon

sarerac · February 12, 2013

La animación se pierde cuando tu ej. lo implemento en la web es posible que sea por la biblioteca jquery o por una mala integración en el código html de la web?. No lo entiendo llevo exactamente el código de tu último ejemplo al editor Coda o Dreamweaver y se ve el menú pero se queda estático, es decir pierde la animación.

uhf · February 12, 2013

Evidentemente si no ejecutas el código en un servidor real no te valen las llamadas a los cdn de las librerias jQuery

<!--Estos 2 scripts/enlaces cargan las librerias js-->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

Pon el código en tu servidor Apache o en MAMP o en un servidor de internet o en su defecto deberás editarlo para cargar esas librerias desde un directorio local, para lo cual debes descargartelas y editar el código de esta manera:

<script type="text/javascript" src="ruta_a _el.js"></script>

Si te resultan complicadas esas opciones y no tienes un alojamiento con servidor web en internet, te puedo propocionar uno temporalmete (mediante privado) y así trabajarás con fuego real.

¡Venga! A ello y suerte.

mon

sarerac · February 12, 2013

Tengo servidor muchas gracias. La verdad es que no consigo integrar bien el menú con tu ejemplo último dentro de Collorama. Se pierde la animación y el resaltado de las palabras al pinchar el menú no me funciona.

uhf · February 13, 2013

Buenas sarecac:

Tienes un privado

mon

Crear menú html

Recommended Posts

sarerac 0

Share this post

Link to post

Share on other sites

quim_ 0

Share this post

Link to post

Share on other sites

sarerac 0

Share this post

Link to post

Share on other sites

uhf 4

Share this post

Link to post

Share on other sites

Mr_Joker 0

Share this post

Link to post

Share on other sites

uhf 4

Share this post

Link to post

Share on other sites

sarerac 0

Share this post

Link to post

Share on other sites

Mr_Joker 0

Share this post

Link to post

Share on other sites

sarerac 0

Share this post

Link to post

Share on other sites

Mr_Joker 0

Share this post

Link to post

Share on other sites

uhf 4

Share this post

Link to post

Share on other sites

sarerac 0

Share this post

Link to post

Share on other sites

uhf 4

Share this post

Link to post

Share on other sites

sarerac 0

Share this post

Link to post

Share on other sites

uhf 4

Share this post

Link to post

Share on other sites

sarerac 0

Share this post

Link to post

Share on other sites

sarerac 0

Share this post

Link to post

Share on other sites

sarerac 0

Share this post

Link to post

Share on other sites

uhf 4

Share this post

Link to post

Share on other sites

sarerac 0

Share this post