Menu animado

[lovetheshouts]

Hola gente, como estan, espero que bien. Como veran soy nueva en el foro y en el tema de la creacion de web.
Queria saber si ustedes pueden ayudarme o decirme como puedo crear un menu con la siguiente animacion.
Quiero que cuando paso el mouse por ensima de uno de los botones se le coloque una imagen de fondo como efecto de mouse over y se le vaya cuando saco el puntero, y cuando clickee sobre el mismo no solo me vaya a la seccion que señala sino que tambien coloque la misma imagen de fondo en el boton y cuando paso el mouse y lo saco no me quite la imagen y que cuando clickeo en otro boton la imagen me la saque del anterior que habia clickeado. Se me entiende? bueno si no me entendieron pregunten y trato de explicarme mejor, jeje, gracias de todos modo...

 

[TonnyORG]

mmm eso lo haces con css, tienes conocimiento css y html?
Es un simple boton con efecto de mouseover, en las etiquetas a.boton, a.boton:hover y a.boton:active


salu2

 

[lovetheshouts]

es dificil de aprender CSS? conoces algun libro que sea bueno? y lo que quiero hacer me lo podrias enseñar para ponerlo en practica? que es el CSS exactamente por que lei por ahi y no me quedo claro.

 

[TonnyORG]

css es una hoja donde va todo el codigo con el estilo ke usas en tu sitio web, o bien el documento html en la mayoria de lo kasos
Pero para no hacerte bolas con tu boton, debes conocer por lo menos una base de html y css para ke lo puedas insertar en tu web y ademas manejar los estilos en css
Yo aprendi html y css en esta web: http://www.desarrolloweb.com espero te sirva
Lo mas recomendable es ke crees el estilo del boton a tu preferencia en css, y si te atoras en algo ya interviene la ayuda, eso como tip para ke aprendas mejor


salu2

 

[lovetheshouts]

Hola de nuevo!, disculpa que te insista pero estoy tratando de hacerlo en javascript y css y no puedo, me estoy volviendo loca, vos no me podrias ayudar hacerlo, con un menu de dos botones y yo lo amplio despues.
Gracias, saludos!!!

 

[TonnyORG]

mm javascript no conosko muy bien, pero si lo kieres en css dame un poko de tiempo, nose unos dos dias y te lo hago, ya ke estoi saturado ultimamente
En si se hace en no mas de 15 minutos, pero komo dije, mi saturacion de actividades personales es lo ke no me da el tiempo


salu2

 

[lovetheshouts]

no te quiero molestar mucho, con que me hayas respondido fue de gran ayuda pero si me regalas esos 15 min de tu ayuda me seria de gran utilidad, porfis!, por que quise aprender javascript y no entiendo casi nada, y se me habia ocurrido hacerlo con mezcla de php y css que manejo un pco el php, pero no se si se podra!
gracias de todos modos!!!

 

[hexusff]

Bueno a mi me gusta mucho la librería Jquery de javascript, permite hacer cosas bastante complejas en poco tiempo.

Estoy sin tareas en el trabajo asi que hice este ejemplito:
el menú seria algo asi:

<div class="Menu">
	<ul>
    	<li><a href="#" class="selectedPage">Item 1</a></li>
    	<li><a href="#">Item 2</a></li>
    	<li><a href="#">Item 3</a></li>
    	<li><a href="#">Item 4</a></li>
    	<li><a href="#">Item 5</a></li>
    </ul>
</div>

la clase "selectedPage" la pones con php segun cada página que se esté viendo.

el CSS quedaría mas o menos asi:

<style type="text/css">
	.Menu
	{
		background-color:#FFF;
	}
		.Menu ul
		{
			list-style:none;
			margin:0;
			padding:0;
		}
			.Menu ul li
			{
				float:left;
			}
				.Menu ul li a
				{
					padding:0px 5px;
					text-decoration:none;
					background:url(dropdown.bmp);
				}
				.Menu ul li a.selectedPage
				{
					background:url(dropdown_clicked.bmp);
				}

</style>

Y por ultimo el javascript que utiliza las funciones de jquery

<script type="text/javascript">
	function bindActions()
	{
		var urlForHover = "url(dropdown_clicked.bmp)";
		var urlForNormal = "url(dropdown.bmp)";
		$('.Menu ul li a').bind('mouseover',function(){
			$(this).parent().parent().find('a').each(function(){
				$(this).css({ background:urlForNormal});
			});
			$(this).css({ background:urlForHover});
		});
		$('.Menu ul li a').bind('mouseout',function(){
			$(this).parent().parent().find('a').each(function(){
				if ($(this).hasClass('selectedPage'))
				{
					$(this).css({ background:urlForHover});
				}
				else
				{
					$(this).css({ background:urlForNormal});
				}
			});
		});
	}
	$().ready(function(){
		//bindings to make the field work
		bindActions();
	});
</script>

Esto te dará un menu horizontal que se comportará como necesitas, te dejo el ejemplo trabajando aca, disculpa las imagenes pero la idea es la cosa

 

[lovetheshouts]

Bueno a mi me gusta mucho la librería Jquery de javascript, permite hacer cosas bastante complejas en poco tiempo.

Estoy sin tareas en el trabajo asi que hice este ejemplito:
el menú seria algo asi:

<div class="Menu">
    <ul>
        <li><a href="#" class="selectedPage">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
</div>

la clase "selectedPage" la pones con php segun cada página que se esté viendo.

el CSS quedaría mas o menos asi:

<style type="text/css">
    .Menu
    {
        background-color:#FFF;
    }
        .Menu ul
        {
            list-style:none;
            margin:0;
            padding:0;
        }
            .Menu ul li
            {
                float:left;
            }
                .Menu ul li a
                {
                    padding:0px 5px;
                    text-decoration:none;
                    background:url(dropdown.bmp);
                }
                .Menu ul li a.selectedPage
                {
                    background:url(dropdown_clicked.bmp);
                }

</style>

Y por ultimo el javascript que utiliza las funciones de jquery

<script type="text/javascript">
    function bindActions()
    {
        var urlForHover = "url(dropdown_clicked.bmp)";
        var urlForNormal = "url(dropdown.bmp)";
        $('.Menu ul li a').bind('mouseover',function(){
            $(this).parent().parent().find('a').each(function(){
                $(this).css({ background:urlForNormal});
            });
            $(this).css({ background:urlForHover});
        });
        $('.Menu ul li a').bind('mouseout',function(){
            $(this).parent().parent().find('a').each(function(){
                if ($(this).hasClass('selectedPage'))
                {
                    $(this).css({ background:urlForHover});
                }
                else
                {
                    $(this).css({ background:urlForNormal});
                }
            });
        });
    }
    $().ready(function(){
        //bindings to make the field work
        bindActions();
    });
</script>

Esto te dará un menu horizontal que se comportará como necesitas, te dejo el ejemplo trabajando aca, disculpa las imagenes pero la idea es la cosa

Muchas gracias!!!, y disculpame las molestias.
Lo estuve probando pero cuando clickeo sobre otro boton me sigue quedando marcado el primero.
Pero la idea me quedo masomenos!.
Otra pregunta, como te llamas?
De curiosa pregunto nomas! y vos trabajas de esto? aca en buenos aires?

 

[hexusff]

Lo estuve probando pero cuando clickeo sobre otro boton me sigue quedando marcado el primero.

Esto es por que todos los links apuntan a la misma pagina :happysad: la idea es que cambies la clase del link segun la página que estas viendo ...

Otra pregunta, como te llamas?

OMG !! te dire eso con un par de wiskys encima :biggrin: jajajajajaja

vos trabajas de esto? aca en buenos aires?

Sip pero no en BsAs, vivo en Bolivia ....

PD: Me llamo Gabriel, ya consegui wisky

 

[lovetheshouts]

Jajaja, oca, Gracias por todo!!! Nos vemos en el proximo post!