Simple JQuery Accordion menu

O JQuery torna este tipo de efeito muito fácil de ser implementado. Veremos aqui como é simples.

Primeiro é necessário uma lista com sublistas internas que funcionarão como nosso menu e submenus respectivamente.

Abaixo o codigo no menu:

<ul id="menu">
	<li>
 <a href="#">Empresa</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
	<li><a href="#">Conteúdo</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
	<li><a href="#">Conteúdo 2</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
	<li>
 <a href="#">Informativo</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
</ul>

Em seguida, obviamente usaremos o CSS pra dar um look agradável para o menu. Repare que diferentemente do usual display:none que geralmente é utilizado em submenus, aqui não é necessário devido ao JQuery.

*{
 border: 0;
 padding: 0;
 margin:0;
 }
 body{
 font-family:Tahoma,Arial,Helvetica,sans-serif;
 font-size: 14px;
 font-weight: bold;
 }
 ul {
 border: 1px dotted #ccc;
 width: 200px;
 }
 ul ul{
 border: none;
 width: 200px;
 }
 ul li a {
 display: block;
 text-decoration: none;
 background: #f57327;
 color: #fff;
 padding: 2px;
 outline:none;
 border: 1px solid #b8360b;
 }
 ul li li a {
 display: block;
 text-decoration: none;
 font-size: 13px;
 font-weight: normal;
 background: #f59247;
 border: none;

Agora a mágica do JQuery, para atingir o efeito esperado usamos primeiro o “hide” para esconder nossos submenus que serão abertos com o efeito tipo Accordion. Em seguida, o truque: para cada elemento “a” é adicionado o evento click que mostra ou esconde nossos menus usando o slide criando um efeito realmente bom.

function initMenu() {
 $('#menu ul').hide();
 $('#menu li a').click(
 function() {
 var checkElement = $(this).next();
 if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
 checkElement.slideUp('normal');
 return false;
 }
 if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
 $('#menu ul:visible').slideUp('normal');
 checkElement.slideDown('normal');
 return false;
 }
 }
 );
}
$(document).ready(function() {initMenu();});

Com este exemplo pode-se notar que é possivel criar efeitos realmente atraentes usando jQuery utilizando muito pouco código, o que agiliza muito o trabalho. O resultado pode ser visto aqui: preview

CSS Font Stacks!

Este é um problema muito comum ao se criar websites é manter a tipografia pelo menos com a mesma “cara” independente do sistema operacional.

Dependendo do sistema operacional os tipos de fontes instaladas – e estas serão usadas na renderização do texto do seu website, por isso é necessário criar as chamadas “Font Stacks” que são “cadeias” de fontes que serão utilizadas para renderizar o seu texto. O princípio é simples, é preciso definir a propriedade “font-family” no CSS de modo que siga uma ordem de uso. Por exemplo:

body{
font-family:Verdana,Geneva,sans-serif;
}

Neste caso, a primeira tentativa de uso seria  a “Verdana” que está presente na maioria dos sistemas, se por um acaso não houver suporte para esta fonte, é utilizada a segunda fonte Geneva, num caso raro onde não encontrada esta segunda será utilizada a ultima fonte que é o tipo de fonte genérico “Sans-serif”.

A partir dessa ideologia e após uma busca pela internet encontrei vários casos onde são mostrados font stacks interessantes, esta foi a que achei melhor:

The ‘wide’ sans serif stack

body{font-family:Verdana,Geneva,sans-serif;}

The ‘narrow’ sans serif stack

body{font-family:Tahoma,Arial,Helvetica,sans-serif;}

The ‘wide’ serif stack

body{font-family:Georgia,Utopia,Palatino,'Palatino Linotype',serif;}

The ‘narrow’ serif stack

body{font-family:'Times New Roman',Times,serif;}

The monospace stack

body{font-family:'Courier New','Courier',monospace;}

Fontes:

http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml#common-font-stacks
http://www.sitepoint.com/article/eight-definitive-font-stacks/3/
http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/

CSS3 module: Multi-column layout

Resumindo, o Modulo “Multi-column” do CSS3 serve para separar o conteúdo de um elemento em multiplas colunas.

O Módulo Multi-Column é parte das específicões  do CSS3 propostas pela W3C.

This extension to the CSS Box Model opens a new range of possibilities in terms of web design. Multi-column layouts that are so pervasive in the print media (think newspapers, magazines) can now become a reality on the web

http://www.csscripting.com/css-multi-column/example1.php

47+ Excellent Ajax CSS Forms

Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data.

Let’s take a look, hopefully you’ll find new ideas you can develop further on your own.

http://www.noupe.com/css/47-excellent-ajax-css-forms.html

medidas no CSS

Unit Description

%     Porcentagem

in     Polegada

cm     Centimetro

mm     Milimetro

em     1em é igual a tamanho atual de fonte. 2em significa 2 vezes o tamanho atual de fonte. Ex. Se um elemento é mostrado com um fonte de 12pt, então ‘2em’ são 24pt, uma unidade bastante util para adapatar automáticamente à fonte que o usuário usa.

ex     um ex é a x-height de uma fonte(x-height é normalmente metade de font-size)

pt point(1 pt é o mesmo que 1/72 polegadas)

pc pica (1 pc é o mesmo que 12 points)

px pixels (um ponto na tela do computador)

Colors
Unit Description
color_name     Nome de uma cor (e.g. red)

rgb(x,x,x)     Um valor RGB (e.g. rgb(255,0,0))

rgb(x%, x%, x%)     Um valor percentual RGB (e.g. rgb(100%,0%,0%))

#rrggbb     Numero HEX (e.g. #ff0000)

fonte: www.w3.org