Barra de Navegação Usando CSS e Mootools – Tutorial Mootools

3

Criado por Mateus Souza em 3 de setembro de 2008 às 10:51

Olá pessoal.Neste tutorial aprenderemos como fazer uma barra de navegação com efeito(animação) usando o Mootools.Em tutoriais anteriores falei somente sobre o JQuery, então resolvi dar uma mudada e ensinarei a fazer isto usando o Mootools que é uma otima ferramenta também.

http://img247.imageshack.us/img247/2020/barnavqq7.jpg

Demostração / Download dos Arquivos

A barra de navegação é um elemento importante em qualquer site, e nada melhor do que ter uma com estilo.Neste Tutorial faremos uma barra com submenus.
O efeito ou animação que essa barra fará será quando o visitante passa o mouse sobre a barra alternado os submenus.Haverá ainda um link para esconder este submenu e mostra-lo novamente, veja com mais detalhes usando a demonstração.

Código HTML

antes de tudo, dê uma olhada no código HTML desta barra, repare que os menus(home, Tutoriais…) estão contidos na id=navigation, observe:

<div id="navigation">
<a href="#" class="right_link" id="op1">Esconder submenu</a>
<ul id="mymenu">
	<li id="s1"><a href="#">Home</a></li>
    <li id="s2"><a href="#">Tutoriais</a></li>
	<li id="s3"><a href="#">Vitrine</a></li>
    <li id="s4"><a href="#">Arquivos</a></li>
</ul>
</div>

Semelhantemete fiz com os submenus, só que agora usando o id dos menus, veja:

</div>
<div id="sublinks">
	<ul id="s1_m">
        <li><a href="#">Recentes</a></li>
      <li><a href="#">Populares</a></li>
      <li><a href="#">Os melhores...</a></li>
  </ul>
    <ul id="s2_m">
        <li><a href="#">Ajax</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">Flash</a></li>
        <li><a href="#">Photoshop</a></li>
    </ul>
    <ul id="s3_m">
        <li><a href="#">CSS Websites</a></li>
        <li><a href="#">Flash Websites</a></li>
        <li><a href="#">Imagens</a></li>
    </ul>
    <ul id="s4_m">
        <li><a href="#">Fontes</a></li>
        <li><a href="#">Wallpapers</a></li>
        <li><a href="#">Icones</a></li>
    </ul>
</div>

Cada lista é relacionada a uma aba no menu principal .Se você quer adicionar outros elementos ao submenu você tem apenas para adicionar um elemento novo com uma identificação igual as anteriores, ou simplismente copie a anterior e colo logo abaixo deste, ex:

<ul id="s4_m">
    <li><a href="#">Fontes</a></li>
    <li><a href="#">Wallpapers</a></li>
    <li><a href="#">Icones</a></li>
	<li><a href="#">Novo Submenu</a></li>
</ul>

Esta regra também vale para os menus, adicinado seus elementos no id=mymenu e no id=sublinks, ex:

<ul id="mymenu">
	<li id="s1"><a href="#">Home</a></li>
    <li id="s2"><a href="#">Tutoriais</a></li>
	<li id="s3"><a href="#">Vitrine</a></li>
    <li id="s4"><a href="#">Arquivos</a></li>
	<li id="s5"><a href="#">Novo Menu</a></li>
</ul>

E no Submenu:

	<ul id="s5_m">
        <li><a href="#">Novo Submenu</a></li>
        <li><a href="#">Novo Submenu</a></li>
        <li><a href="#">Novo Submenu</a></li>
    </ul>

Passado o código html, vamos ao CSS

2. CSS

Para o CSS precisaremos das imagens (que estão no pacote), utilizadas em nosso exemplo e do seguinte código:

body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	border:0; margin:0; padding:0;
}
ul, li{border:0; padding:0; margin:0; list-style:none;}

/* ----------- NAVIGATION----------- */
#top-navigation{
	background:url(img/topnav-bg.gif) repeat-x;
	width:auto;
	height:48px;
	margin:0 auto;
}
#navigation{
	background:url(img/nav-bg.gif) repeat-x;
	height:32px;
	margin:0 auto;
	width:auto;
	}
	#navigation .right_link{
		float:right;
		font-size:11px;
		line-height:32px;
		margin:0 10px;
	}
	#navigation ul{
	 height:32px;
	 line-height:32px;
	}
	#navigation ul li{
		display:inline;
	}
	#navigation ul li a,
	#navigation ul li a:visited {
		background:url(img/line-a.gif) right no-repeat;
		padding:0 20px;
		display:block;
		text-decoration:none;
		float:left;
		color:#000000;
		font-weight:bold;
	}
	#navigation ul li a:hover{
		color:#FFFFFF;
		background:#A5A5A5;
	}
/* ----------- SUBLINKS ----------- */
#sublinks{
	width:auto;
	margin:0 auto;
	background:#888888 url(img/sublink.gif);
	height:30px;
	font-size:11px;
}
	#sublinks ul{
	 height:32px;
	 line-height:31px;
	}
	#sublinks ul li{
		display:inline;
	}
	#sublinks ul li a,
	#sublinks ul li a:visited {
		padding:0 20px;
		display:block;
		text-decoration:none;
		float:left;
		color:#FFFFFF;
	}
	#sublinks ul li a:hover{
		text-decoration:underline;
	}
.style1 {
	font-size: 16;
	font-weight: bold;
}

Note que tanto para a id=navigation e para id=sublinks há estilos diferentes.

3. Javascript – Mootools

Antes de irmos ao script vamos chamar o mootools usando o seguinte codígo, não entrarei em detalhes pois já falei sobre isto neste tutorial(etapa 1):

<script type="text/javascript" src="mootools.svn.js"></script>

O arquivos mootools.svn.js já vai incluso no pacote com os arquivos e as imagens.

E agora finalmente o script da animação, copei e colo logo depois do script anterior(acima):

<script type="text/javascript">
window.addEvent('load', function(){

		$('sublinks').getElements('ul').setStyle('display', 'none');
		$('s1_m').setStyle('display', 'block');

		$$('#mymenu li').each(function(el){
         el.getElement('a').addEvent('mouseover', function(subLinkId){
			var layer = subLinkId+"_m";
				$('sublinks').getElements('ul').setStyle('display', 'none');
				$(layer).setStyle('display', 'block');
          }.pass( el.id)
        );
      });

  // --------------------------------------- //
  // SHOW and HIDE Submenu with animation

	var mySlide = new Fx.Slide('sublinks');

	$('op1').addEvent('click', function(e){

		var textLink = $('op1').innerHTML;

		if(textLink=='Hide submenu'){
			$('op1').innerHTML='Esconder Submenu';
				} else {
			$('op1').innerHTML='Mostrar Submenu';
		}
				e = new Event(e);
				mySlide.toggle();
				e.stop();

			});
    });
</script>

Depois de tudo feito nosso HTML ficará da seguinte forma(observe a sequência em que os codigos estão e faça igualmente):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu com Mootools</title>

<script type="text/javascript" src="mootools.svn.js"></script>

<script type="text/javascript">
window.addEvent('load', function(){

		$('sublinks').getElements('ul').setStyle('display', 'none');
		$('s1_m').setStyle('display', 'block');

		$$('#mymenu li').each(function(el){
         el.getElement('a').addEvent('mouseover', function(subLinkId){
			var layer = subLinkId+"_m";
				$('sublinks').getElements('ul').setStyle('display', 'none');
				$(layer).setStyle('display', 'block');
          }.pass( el.id)
        );
      });

  // --------------------------------------- //
  // SHOW and HIDE Submenu with animation

	var mySlide = new Fx.Slide('sublinks');

	$('op1').addEvent('click', function(e){

		var textLink = $('op1').innerHTML;

		if(textLink=='Hide submenu'){
			$('op1').innerHTML='Esconder Submenu';
				} else {
			$('op1').innerHTML='Mostrar Submenu';
		}
				e = new Event(e);
				mySlide.toggle();
				e.stop();

			});
    });
</script>

<style type="text/css">
body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	border:0; margin:0; padding:0;
}
ul, li{border:0; padding:0; margin:0; list-style:none;}

/* ----------- NAVIGATION----------- */
#top-navigation{
	background:url(img/topnav-bg.gif) repeat-x;
	width:auto;
	height:48px;
	margin:0 auto;
}
#navigation{
	background:url(img/nav-bg.gif) repeat-x;
	height:32px;
	margin:0 auto;
	width:auto;
	}
	#navigation .right_link{
		float:right;
		font-size:11px;
		line-height:32px;
		margin:0 10px;
	}
	#navigation ul{
	 height:32px;
	 line-height:32px;
	}
	#navigation ul li{
		display:inline;
	}
	#navigation ul li a,
	#navigation ul li a:visited {
		background:url(img/line-a.gif) right no-repeat;
		padding:0 20px;
		display:block;
		text-decoration:none;
		float:left;
		color:#000000;
		font-weight:bold;
	}
	#navigation ul li a:hover{
		color:#FFFFFF;
		background:#A5A5A5;
	}
/* ----------- SUBLINKS ----------- */
#sublinks{
	width:auto;
	margin:0 auto;
	background:#888888 url(img/sublink.gif);
	height:30px;
	font-size:11px;
}
	#sublinks ul{
	 height:32px;
	 line-height:31px;
	}
	#sublinks ul li{
		display:inline;
	}
	#sublinks ul li a,
	#sublinks ul li a:visited {
		padding:0 20px;
		display:block;
		text-decoration:none;
		float:left;
		color:#FFFFFF;
	}
	#sublinks ul li a:hover{
		text-decoration:underline;
	}
.style1 {
	font-size: 16;
	font-weight: bold;
}
</style>
</head>

<body>
<div id="navigation">
<a href="#" class="right_link" id="op1">Esconder submenu</a>
<ul id="mymenu">
	<li id="s1"><a href="#">Home</a></li>
    <li id="s2"><a href="#">Tutoriais</a></li>
	<li id="s3"><a href="#">Vitrine</a></li>
    <li id="s4"><a href="#">Arquivos</a></li>
</ul>
</div>
<div id="sublinks">
	<ul id="s1_m">
        <li><a href="#">Recentes</a></li>
      <li><a href="#">Populares</a></li>
      <li><a href="#">Os melhores...</a></li>
  </ul>
    <ul id="s2_m">
        <li><a href="#">Ajax</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">Flash</a></li>
        <li><a href="#">Photoshop</a></li>
    </ul>
    <ul id="s3_m">
        <li><a href="#">CSS Websites</a></li>
        <li><a href="#">Flash Websites</a></li>
        <li><a href="#">Imagens</a></li>
    </ul>
    <ul id="s4_m">
        <li><a href="#">Fontes</a></li>
        <li><a href="#">Wallpapers</a></li>
        <li><a href="#">Icones</a></li>
    </ul>
</div>

Bom pessoal espero que tenham gostado e qualquer dúvida, sugestão , elogios…comentem!!!
Até a proxima.

Postado em CSS, Javascript, Mootools, Tutoriais

Feed Comentários - RSS 2.0 | Trackback

Gostou? Então compartilhe já:

DeliciousDesign BumpDiggFriendfeedGoogleGoogle BuzzLinkedinMyspaceNetvibesPosterousRedditRSSStumbleuponTechnoratiTumblrYahoo Buzz

Posts Relacionados

Como Converter Arrays em Objetos e Vice-Versa Usando Uma Linha de Código
Prosseguindo com CSS3 – Bordas e Sombras
Linha Framework – Desenvolva Front-end Com Mais Qualidade!
Novas Funções do WordPress – Parte 3
Como colocar favicon em seu website

3 Comentários

  1. Rodrigo disse:

    Olha cara, ficou muito legal. Mas tipo, eu achei um erro nele.

    Ali no javascript que tá na página, tem uma coisa:

    if(textLink==’Hide Submenu’){

    com isso, não funciona o negócio de mudar de esconder para mostrar nem de mostrar para esconder. Se tu colocar:

    if(textLink==’Mostrar Submenu’){

    funciona direitinho, testei aqui e deu certo. :D

    Responder

    24 de maio de 2009 às 19:11

  2. Mateus Souza disse:

    opa vlw…isso vai ser bom pra galera…não uso mootools :)

    Responder

    25 de maio de 2009 às 10:57

  3. Rodrigo disse:

    de nada, eu sou um “observador atento” xD

    Responder

    25 de maio de 2009 às 17:36

Faça um Comentário

XHTML: Você pode usar essas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Uhull, 120 assinantes feed e 51 seguidores no twitter.

Feed Feed E-mail Twitter Facebook

Linha Framework Code Canyon Theme Forest

Comentários

  • Mateus Souza disse:

    Link arrumado Guilherme, obrigado pelo aviso!

  • Mateus Souza disse:

    Boa André, por essa nem eu esperava, hehe. Grande sacada mesmo, vlw :)

  • Mateus Souza disse:

    Concerteza Leandro, bloquear ie6 é uma decisão um tanto que difícil depedendo do caso. Vlw pelo comment!!!

  • Piero Di Carlo Dalla-Bona disse:

    Parabéns pelo Post!Super claro e didático.Abração, Piero.

  • Catinha disse:

    Valeu! Tentei fazer com tutoriais de outros sites, mas só com este consegui. Obrigadão por compartilhar conosco. Deus continue te abençoando!

© 2010 Mateus Souza – Webdesigner (Deus Seja Louvado) | Posts (RSS) | Comentários (RSS). | powered by WordPress e Linha Framework :P

diHITT - Notícias BlogBlogs.Com.Br