Jump to content
Sign in to follow this  
Bruceark

Drop Down Menu com icons

Recommended Posts

Bruceark

Boas!

Desde ja devo dizer que sou novo na programaçao de html, css ou qualquer outras linguagens que tenham a ver com web-design.

gostaria de saber se me podiam ajudar na construçao de um menu drop down, que reage á passagem com o rato, mas em vez de ser com texto é com icons.

Agradecia imenso alguma ajuda, porque neste momento tudo é precioso.

Thanks =D

Share this post


Link to post
Share on other sites
fil79
Daniivo

Boas!

Desde ja devo dizer que sou novo na programaçao de html, css ou qualquer outras linguagens que tenham a ver com web-design.

gostaria de saber se me podiam ajudar na construçao de um menu drop down, que reage á passagem com o rato, mas em vez de ser com texto é com icons.

Agradecia imenso alguma ajuda, porque neste momento tudo é precioso.

Thanks =D

tenho a solução para o teu problema!!! http://www.artisteer.com/

ele trabalha por ti, faz menus, o que tu quiseres, mas quando acabares, nao te esqueças de olhar para o codigo :cheesygrin:. o artisteer vai se tornar o teu melhor amigo.... :D

Share this post


Link to post
Share on other sites
taviroquai

gostaria de saber se me podiam ajudar na construçao de um menu drop down, que reage á passagem com o rato, mas em vez de ser com texto é com icons.

Podemos ajudar...

De uma forma geral, terá no HTML, uma lista ( e sub-listas) que serão os menus... algo do tipo:

<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu 2-1</a></li>
        </ul>
    </li>
</ul>

Os elementos <ul> significam uma lista.

Os elementos <li>, devem estar dentro dos <ul>, e significam items da lista.

Os elementos <a>, devem estar dentro dos <li>, e significam hiperligações (links).

Até aqui temos o menu do ponto de vista semantico.

Depois precisamos adicionar um estilo a estes elementos para apresentar como se fosse um típico menu; isto é feito com css.

Para o menu dropdown que pretendes, inicialmente os sub-menus estarão escondidos:

ul > li > ul {
    display: none;
}

Ainda sobre a apresentação, os submenus precisam de um posicionamento relativo ao menu superior; este processo como é dinamico, teremos que usar recorrer a outra linguagem: javascript.

Isto seria uma ajuda extensa... por isso sugiro que tentes digerir o que disse antes de avançares mais além.

Referências:

http://www.w3schools.com/html/html_lists.asp

http://www.w3schools.com/css/css_positioning.asp

Share this post


Link to post
Share on other sites
Bruceark

Agradeço imenso as ajudas fornecidas =D

Sou muito novo neste tipo de temas tendo em conta que aprendi apenas o básico de programação (pascal, VB) mas a necessidade de aprender mais é inevitável.

Agradeço mais uma vez e se me pudessem presentear com alguns tutorials de css javascript ou qualquer tipo de outras linguagens que vos pareça mais util  era espectacular.

thans =D

Share this post


Link to post
Share on other sites
taviroquai

Já agora... deixo aqui um exemplo mínimo para um menu desses...

O javascript, essencialmente, percorre os elementos do menu e atribui os eventos "mouseover" e "mouseout".

Este exemplo serve apenas de demonstração, não usem em produção, até porque só testei no FF 3.6 e no Chrome 14.

<html>
<head>
<style>
ul {
	list-style-type: none;
}
</style>
<script type="text/javascript">
var menu = {

init: function (elemento) {
	var self = this;
	var menu = document.getElementById(elemento);
	var filho = menu.firstChild;
	if (filho == null) return;
	while (filho != null)
	{
		filho = filho.nextSibling;

		if (filho && filho.nodeName == 'LI') {
			link = filho.firstChild;

			link.addEventListener('mouseover', function() { self.show(this); },false);
			var menu_filho = link.nextSibling;
			if (menu_filho && menu_filho.nextSibling && menu_filho.nextSibling.nodeName == 'DIV') {
				var div = menu_filho.nextSibling;
				div.addEventListener('mouseout', function() { this.style.display = 'none'; },false);
				div.style.display = 'none';
				div.style.position = 'relative';
				div.style.top = '-5px';
			}
		}
	}
},

show: function (elemento) 
{
	elemento = elemento.parentNode;
	var filho = elemento.firstChild;
	if (filho == null) return;
	while (filho != null)
	{
		filho = filho.nextSibling;
		if (filho && filho.nodeName == 'DIV') {
			filho.style.display = 'block';
		}
	}
}
}

window.addEventListener('load', function() { menu.init('menu1'); },false);

</script>
</head>
<body>
<ul id="menu1">
	<li><a href="#">Menu 1</a></li>
	<li><a href="#">Menu 2</a>
		<div>
			<ul>
				<li><a href="#">Sub Menu 2-1</a></li>
			</ul>
		</div>
	</li>
	<li><a href="#">Menu 3</a></li>
</ul>
</body>
</html>

Share this post


Link to post
Share on other sites
Bruceark

Nao percebo como é que o html identifica o codigo do javascrip ou do css, voces metem "#" mas na realidade o que é que se tem de meter?

Segundo a minha logica tem de ser a variavel criada para nomear todo o menu certo?

Share this post


Link to post
Share on other sites
taviroquai

Ops... acho que muito codigo criou alguma confusão...  :cheesygrin:

Sobre os elementos <a> http://w3schools.com/html/html_links.asp

O html é uma linguagem de marcação... é estática, não faz nada além de tornar o conteudo ententido pelo browser.

Css também é estático... apenas diz ao browser como deve apresentar os elementos definidos no html.

O javascript é que é o motor vivo das aplicações web :D

Se não tens conhecimentos, este exemplo não é de todo apropriado para começares a aprender sobre desenvolvimento web.

Share this post


Link to post
Share on other sites
Bruceark

Sim eu tenho algumas noçoes basicas, apenas nao sei como chamar um estilo css ou um javascrip no html.

Sera que os tenho de fazer separados ou nomealos como uma variavel e dps chama-los  no proprio html?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. 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.