Jump to content
Sign in to follow this  
sarerac

Crear menú html

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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 by uhf

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!!

Share this post


Link to post
Share on other sites

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

Gracias!!

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by uhf

Share this post


Link to post
Share on other sites

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

 

Un saludo!!

Share this post


Link to post
Share on other sites

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

Saludos

Edited by sarerac

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

...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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.