Alexandre Mattos Blog » ajax http://www.alexandremattos.com.br/blog Design Web Fri, 09 Apr 2010 14:12:34 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Menu CSS com jQuery Round Corners http://www.alexandremattos.com.br/blog/2009/12/menu-css-com-jquery-round-corners/ http://www.alexandremattos.com.br/blog/2009/12/menu-css-com-jquery-round-corners/#comments Wed, 09 Dec 2009 18:02:42 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=135 Olá amigos, estou adicionando agora um menu que é super legal e bem simples de fazer. O que terá de novidade é que o menu terá bordas arredondadas através do jQuery e usará a propriedade text-shadow, que é uma propriedade do CSS para fazer a sobreposição. O menu será baseado no menu do site  jQuery.com, aquele azul. Vamos fazer ele no modo horizontal e no modo vertical para atender a demanda para qualquer tipo de aplicação.

Veja os menus em funcionamento.

Menu com jQuery

Menu com jQuery

O menu é bem simples de fazer. Siga os passos seguintes para criação.

Vamos ao que interessa. No passo 1, crie o arquivo html, que é a estrutura do menu. Vamos primeiro fazer o menu horizontal. Você precisa baixar o plugin jQuery Corner, e a Biblioteca jQuery. Feito isso vamos a estrutura do html.

<!DOCTYPE html>
<html language="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alexandre Mattos | Menu com jQuery</title>
<link href="menu.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="menu-h">
    <ul>
        <li><a href="#">Download</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Bug Tracker</a></li>
        <li><a href="#">Discussion</a></li>
    </ul>
</div>
</body>
</html>

Agora vamos ao CSS, crie o arquivo menu.css. Note que ele já foi referenciado no código acima com este nome.

menu.css

<pre>* {
 margin: 0;
 padding: 0;
 font-family: arial;
 font-size: 12px;
}

a{
 outline: none;
}

/* menu horizontal */

body{
 background: #0F1923;
}

#menu-h {
 float: right;
 margin: 30px;
 background: #0f67a1;
}

#menu-h ul {
 float: left;
 margin: 0;
 background: none;
 padding: 0 2px 0 2px;
}

#menu-h ul li {
 float: left;
 list-style: none;
 border-right: 1px solid #0d5995;
 border-left: 1px solid #1175ae;
 height: 34px;
 background: none;
}

#menu-h li a {
 float: left;
 padding: 0 12px;
 color: #eee;
 text-decoration: none;
 line-height: 34px;
 position: relative;
 background: none;
}

#menu-h li:first-child {
 background: none;
 border-left: none;
}

#menu-h li:last-child {
 background: none;
 border-right: none;
}

#menu-h li a:hover {
 color: #fff;
 text-shadow: 1px 1px 1px #000000; /* sombra */
}

Repare que na última linha tem o código text-shadow, que faz a sombra do link. Tudo pronto, mas ainda não está com as bordas arredondadas. O que fazer?

Simples! Agora faremos as referencias do jQuery Round e criaremos os scripts. Eu usarei ele refereciado nos sites listados acima.

Inclua dentro da tag head do seu html, logo abaixo da tag title o seguinte código.

<script language="JavaScript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.malsup.com/jquery/corner/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    // Arredonda a borda do elemento menu-h
    $('#menu-h').corner("3px");
})
</script>

Como vocês podem ver, somente inclui o js do jQuery, o js do plugin corner e abaixo fiz uma função para arredondar a borda da div que criamos, que no caso é menu-h. Com essa função você pode arredondar qualquer elemento que possui uma borda.

Muito simples não? Então agora vamos fazer o outro exemplo que é o menu vertical. Como já definimos que o menu horizontal, feito ainda pouco, se chamou menu-h, o vertical será chamado de menu-m. Este já será criado com o jQuery embutido, para posteriormente não ter que adicionar os scripts.

<!DOCTYPE html>
<html language="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alexandre Mattos | Menu com jQuery</title>
<link href="menu2.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.malsup.com/jquery/corner/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    // Arredonda a borda do elemento menu-m
	$('#menu-m').corner("round 3px");
})
</script>

</head>

<div id="menu-m">
<ul>
        <li><a href="#">Download</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Bug Tracker</a></li>
        <li><a href="#">Discussion</a></li>
    </ul>
</div>
</body>
</html>

Agora vamos fazer o arquivo css, note que o nome do arquivo css é menu2.css.

menu2.css

* {
	margin: 0;
	padding: 0;
	font-family: arial;
	font-size: 12px;
}

a{
	outline: none;
}

/* menu horizontal */

body{
	background: #0F1923;
}
#menu-m {
	background: #fff;
	float: right;
	margin: 30px;
	background: #0f67a1;
}

#menu-m ul li {
	list-style: none;
	border-top: 1px solid #0D5995;
	border-bottom: 1px solid #1175AE;
}

#menu-m li a:link, #menu-m li a:visited {
	color:#ffffff;
	text-decoration:none;
	display: block;
	text-align: left;
	padding: 8px 10px 8px 10px;
}

#menu-m li:first-child {
	border-top: none;
}

#menu-m li:last-child {
	border-bottom: none;
}

#menu-m li a:hover {
	color: #fffffe;
	text-shadow: 1px 1px 1px #000000; /* sombra */
}

Repare que a última linha tem o código da sombra. Agora sim está pronto seus menus.

O que foi feito neste menu é que, em vez de colocar para cada link o float left, eu mantive o inline, não citando a propriedade float.

E é isso, qualquer dúvida só perguntar. Abaixo tem o arquivo para download.

Download: Menu com jQuery.

Abraços!

]]> http://www.alexandremattos.com.br/blog/2009/12/menu-css-com-jquery-round-corners/feed/ 0 Você conhece o “Mestre” do CSS? http://www.alexandremattos.com.br/blog/2009/12/voce-conhece-o-mestre-do-css/ http://www.alexandremattos.com.br/blog/2009/12/voce-conhece-o-mestre-do-css/#comments Tue, 08 Dec 2009 20:37:38 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=119 Não? Como assim não conhece?

Site do Majour

Site do Majour

O nome dele é Maurício Samy, autor do site do maujor. Posso dizer que muitas coisas que aprendi sobre CSS foi buscando informações no site dele. Tutoriais, guias, explicações, traduções, exemplos, e muitos outros recursos. Começar a trabalhar com CSS não foi fácil. Não tinha ninguém para me explicar e tive que correr para o site mais poderoso de todos, o Google.

Pesquisando encontrei o site do Maujor, que tem um guia muito, mas muito bom de como iniciar com CSS, abaixo segue o link.

http://maujor.com/tutorial/joe/cssjoe1.php

Comecei a estudar através deste link e logo a seguir parti para os outros tutoriais contidos no site do Majour. Como ainda não terminei meu tutorial de CSS+HTML para iniciantes. Deixo esta excelente referência para aprendizado.

O Maurício escreveu alguns livros que são na minha opinião, muito bons. Quer um livro para aprender realmente, abaixo segue os livros com os links.

Livro Criando sites com HTML ( http://www.livrohtml.com.br/ )

Livro Construindo Sites com CSS e (X)HTML ( http://www.livrocss.com.br/ )

Livro AJAX com jQuery ( http://www.livroajaxjquery.com.br/ )

Livro jQuery A Biblioteca do Programador JavaScript ( http://www.livrojquery.com.br/ )

Espero que tenham aprendido a lição! ^^)

Abraços

]]> http://www.alexandremattos.com.br/blog/2009/12/voce-conhece-o-mestre-do-css/feed/ 1 jQuery FadeTo – Efeito Google.com http://www.alexandremattos.com.br/blog/2009/12/jquery-fadeto-efeito-google-com/ http://www.alexandremattos.com.br/blog/2009/12/jquery-fadeto-efeito-google-com/#comments Tue, 08 Dec 2009 15:52:34 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=87 Olá amigos, hoje vou explicar como funciona o efeito da página inicial do Google utilizando jQuery. Como todos já sabem, o jQuery é uma biblioteca Javascript que permite alterar características da página do lado cliente. Alguns exemplos são, formulários com validação sem ter que acessar outra página e páginas que dão uma resposta a um evento sem ir para uma segunda página de processamento.

Você já deve ter visto a página do Google.com com o efeito hover correto? Ainda não viu, acesse aqui -> jQuery.am-fadeto ou aqui -> google.com.

O funcionamento desse efeito é o seguinte. A página começa sem alguns elementos visíveis como: menu, rodapé, alguns links e parágrafos, deixando o banner como o único conteúdo visível na tela, reforçando a marca do produto. O que vamos fazer é um exemplo simples do funcionamento deste efeito que irá esconder alguns itens do conteúdo, o menu e o rodapé da página.

Primeiramente precisaremos da Biblioteca Javascrip jQuery. Iniciaremos com o arquivo puro, somente com o html para vocês verem que é muito simples.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alexandre Mattos Blog - jQuery FadeTo</title>
<link rel="stylesheet" type="text/css" href="http://www.alexandremattos.com.br/exemplos/estilo.css" />
</head>
<body>

<div id="menu">
	<a href="http://www.alexandremattos.com.br">Meu site</a> | <a href="http://www.alexandremattos.com.br/blog">Meu Blog</a> | <a href="http://jquery.com/">Biblioteca Javascript jQuery</a>
</div>

<div id="conteudo">
	<img src="http://www.alexandremattos.com.br/exemplos/logo-amfadeto.png" alt="Logo Alexandre Mattos" />
    <p>Este fade &eacute; um efeito muito interessante, usado na p&aacute;gina inicial do <a href="http://www.google.com">Google</a></p>
</div>

<div id="rodape">
	<div class="esquerda">Utilizando <a href="http://jquery.com/" title="jQuery">jQuery</a></div>
    <div class="direita">Editado por: <a href="http://www.alexandremattos.com.br">Alexandre Mattos</a></div>
</div>

</body>
</html>

Como vocês podem ver o conteúdo é completamente normal, no inicio a chamada para o css, somente para formatar as id e classes do documento. Preste atenção nos nomes das ids e nas classes e elementos da página, usaremos os essas referências para o jQuery.

Agora insira entre a tag head o link para o jQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

Logo após insira o efeito FadeTo nos elementos selecionados.

<script type="text/javascript">
$(document).ready(function(){

	$("#menu").fadeTo("fast", 0.0);
	$("#rodape").fadeTo("fast", 0.0);
	$("#conteudo p").fadeTo("fast", 0.0);

	$("html").hover(function(){

		$("#rodape").fadeTo("slow", 1.0);
		$("#menu").fadeTo("slow", 1.0);
		$("#conteudo p").fadeTo("slow", 1.0);

	});
});
</script>

Primeiro definimos quais elementos ficarão escondidos. Dizemos que os elementos #menu, #rodape, #conteudo p, ficarão escondidos.

Logo abaixo na linha: html hover function, significa que quando passar o mouse acima do documento html ele deve executar a função. Dentro da função definimos quais elementos ficarão visíveis. No nosso caso são os elementos que escondemos logo de início (#menu, #rodape, #conteudo p).

Abra a página e não mecha o mouse. Você perceberá que só aparecerá o logotipo.

Exemplo1 - Elementos escondidos

Exemplo1 - Elementos escondidos

Quando você movimentar o mouse em cima da página, os elementos escondidos aparecerão.

Exemplo2 - Página com todos os elementos visíveis

Exemplo2 - Página com todos os elementos visíveis

Bem simples e você pode implementar em seu site, blog ou qualquer outra aplicação.

Demo: jQuery.am-fadeto

Clique aqui para baixar o exemplo jQuery FadeTo.

Um abraço

]]> http://www.alexandremattos.com.br/blog/2009/12/jquery-fadeto-efeito-google-com/feed/ 1