Sempre que um cliente precisa de um menu desses na agência onde trabalho, fazemos do zero, mas algumas estruturas mais complexas requerem mais tempo, e para isso usamos frameworks ou menus prontos.

As vantagens que encontrei nestes menus é o fato de funcionarem 100% em todos os browsers.

Obviamente ainda recomendo o post que fiz em 2007 onde disponibilizava 15 Menus Horizontais em CSS.

Agora fica a seu critério, qual a melhor opção de menu horizontal e vertical em CSS?

Posts Relacionados:

• 15 Menus horizontais gratuitos para download em CSS
• Comparação de Lightbox
• Reset’s CSS
• Sistemas de enquetes para seu blog

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Menu Drop-Down Vertical e Horizontal em CSS (framework)

Posts Relacionados:

• Wallpapers de Natal
• Icontexto Webdev + Tropa de Elite
• Ícones RSS #2
• Lançamento Adobe CS4

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Ícones de Natal

E aqui os 3 videos indicados, tem pra vários gostos...

Where is the love? do Black Eyed Peas

Have a nice day do Bon Jovi

Monstro Invisível do Rappa

Se alguém lembrar de mais algum, por favor indiquei aqui nos comentários!!Posts Relacionados:

• Carlsberg Satiriza Ronaldinho
• Trust, comercial de camisinhas africano
• Toyota Vios
• Hyde One

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Stickers e videoclips

A criação é da W/Brasil. "Se você também que a Casa Branca, use Good Bril".

Via Pacote201Posts Relacionados:

• Consciencia limpa
• Briefing Veículado - Consumo Consciente
• Publicidade debaixo dos seus pés
• Doritos X Música X Aids

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Anúncio da Bombril com Obama

A WV sempre focou a altura do Fox e seu espaço interno como os maiores diferenciais do modelo da fábrica alemã.

A Almap preparou uma ação em 3 salas de cinema de São Paulo para divulgação do Fox.
Notem na foto abaixo que a última fileira de cadeiras está mais alta e personalizada com a mensagem "Do alto é mais divertido". O que faz todo sentido numa sala de cinema, né não?

É aquela história: coloque o diferêncial do produto na vida do seu público e ele o perceberá

Posts Relacionados:

• Publicidade online para iniciantes
• Shave the Pussy (+18)
• Interatividade e impacto no ponto do ônibus
• Para sua segurança use o capacete

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Do alto é mais divertido

É eu sei. Com certeza estão cansados disso tudo, foi a semana toooda desde o dia das eleições americanas, eu não entendo e odeio política, mas acho que nós não podíamos ficar de fora, afinal o Dk também é notícias.

Vim trazer alguns links pra vocês, os que eu achei mais interessante, mais voltados para fotos e imagens. Dêem uma olhadinha e deixo uma pergunta: será que ele fica vivo até a sua posse?!

• boston.com: O próximo presidente dos Estados Unidos (coleção de imagens)
• fubiz: 700 capas do Obama (coleção de capas de revistas e jornais)
• DKcell Design: Vote com o chiclete - Barack Obama e Mccain - Eleições 2008 (campanha)
• Etsy: Barack Barrettes (tic tac do Obama até isso)
• G1: Camiseta traz Coringa 'versão Obama' (camiseta muito legal. Quem quiser pode me dar uma u.u)

Update Esqueci do link do joguinho estilo Mario: Super Pbama World

Posts Relacionados:

• Vote com o chiclete - Barack Obama e Mccain - Eleições 2008
• Barack Obama “Racismo”
• Ícones RSS #2
• Dk Obama Plugin - galeria de destaques

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Barack Obama

Para mostrar que a revista é quente, as famosas tarjas pretas que censuraram as partes íntimas da modelo viraram uma superfície como a das caixas de fósforo, o que faz com que uma pessoa possa acender uma fósforo.

A revista é quente ou não?

Posts Relacionados:

• Anúncio para a Astoc
• Qual melhor viral: Diesel ou Wario?
• MM’s que é a sua cara
• Transformation

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Hot Playboy

Posts Relacionados:

• Não desperdice Seu Tempo
• Mini, Axn, e Censuradas
• Como uma letra pode mudar o significado
• Tome Cuidado

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Campanha Career Builder

As eleições americanas estão aí e uma ação de guerrilha muito criativa e sem fins lucrativos pergunta ao cidadãos americanos: Who sucks the most? (Quem é o pior?).

A ação realizada em Nova York que já se estendeu por vários Estados e para a Europa, tem o nome de Gum Election, pois você vota em Barack Obama ou em John McCain com o seu chiclete mascado (Vote with your gum).

A ação além de incentivar a população a votar no dia 4 de novembro, ainda cria uma utilização para os chicletes mascados que normalmente vão parar no chão sujando a cidade.

No blog oficial da ação - gumelection.wordpress.com - há uma galeria de fotos dos cartazes já com algumas contribuições. E também no blog, qualquer um pode participar, é só fazer o download do cartaz, imprimi-lo (11cm x 17cm 300dpi), depois tirar uma foto de como foi a ação e enviar para o pessoal que eles postam no blog.

Posts Relacionados:

• #5 Wallpaper Enviado: A Escritora
• Ausência
• Dk Slideshow - Galeria de destaques
• Adicione uma galeria de destaques a qualquer site

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Vote com o chiclete - Barack Obama e Mccain - Eleições 2008

Para promover o "Banco da Sustentabilidade" do Banco do Brasil foram instalados mobiliários urbanos contendo uma planta de verdade, terra de verdade, alguns respiros e um botão que aciona um jato de água na planta, para que as pessoas que estão no ponto de ônibus possam regar a plantinha, como se fosse um verdadeiro "vaso comunitário".

Veja abaixo:

A relação e interação do público com a "peça" - se pode se dizer assim - leva a proximidade da marca e mais ainda, mostra para ele o que é que o anúncio quer dizer com "Banco da sustentabilidade" já que o texto do mobiliário diz: "Cuidar desta planta é fazer o futuro...".

A criação é da Artplan (RJ).

Duka!

Posts Relacionados:

• Sustentabilidade | Mobilidade na ‘onda verde’
• Publicidade online para iniciantes
• Banco Matone
• Consciencia limpa

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Interatividade e impacto no ponto do ônibus

Doces ou travessuras?!

Posts Relacionados:

• Hellboy - Prologue
• Dica: Picamatic
• Apresentando: Patricia e o Amor Frustrado
• Tipografia Argentina

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Feliz dia das bruxas!!

Os motivos são simples, surgimento de um novo layout para o DK, algumas mudanças pessoais e o mais importante atual, o Blogueando.

Estou finalizando o layout do projeto, e assim que o mesmo for ao ar, será divulgado aqui, junto com grandes mudanças no DK, portanto acompanhem e fiquem no aguardo.Posts Relacionados:

• Pausa no Projeto Dk de Wallpapers
• A respeito dos Tutoriais e Wallpapers
• Apresentando: Patricia e o Amor Frustrado
• Candykiller Print

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Projeto Blogueando - Update

Mídia bem utilizada, mensagem clara e direta, local estratégicamente selecionado e até com uma certa "interatividade indireta" eu diria.

Nem precisa se comentar muito.

A criação é da Carla Chagas e de Luciano Mattos
A agência, e própria anúnciante, é a Gruponove (PE).

Posts Relacionados:

• Consciencia limpa
• Publicidade debaixo dos seus pés
• Interatividade e impacto no ponto do ônibus
• Para sua segurança use o capacete

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Mais uma da série “Cidade Limpa”

Muito criativo e impactante.

Fonte: I Believe In AdvertisingPosts Relacionados:

• Post de carnaval: Sex Life
• Anúncio para a Astoc
• Supere Seus Medos
• Ação para a cerveja Jupiler

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Mala-direta | Tubarão

Hoje, como meu primeiro artigo aqui no site vou começar um artigo sobre os princípios básicos do Mootools, que será dividido em 2 partes pois é muito coisa, porem para um melhor entendimnto é necessário saber pelo menos o básico do javascript e um pouco sobre o Mootools.
O amigo Daniel Kaiser postou sobre alguns frameworks neste post aqui. recomendo que você leia para enterder melhor o que é um framework e quais são os principais frameworks disponiveis no mercado e especialmente sobre o Mootools, no aqul será usado este tutorial.

Bom nesta lição(parte 1) vou mostrar como manipular propriedades do elemento, em particular como começar o elemento DOM do ID como usar o getStyle (), o setStyle () (para ajustar propriedades do CSS), o toInt () para converter uma string em número e alguns exemplos:

1. Adicione a estrutura de Mootools a sua página

Primeiramente, você tem que “chamar” o Mootools para o HTML dentro do Tag do <head> da página, como firemos em todos os futuros tutoriais(esse é um processo necessário para qualquer elemento usando o Mootools, JQuery…por isso é importante que você saiba disso):

Este é o código:

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

Pronto agora já podemos iniciar qualquer efeito usando o mootools.

2.obter um elemento DOM

Para obter um elemento DOM por ID você pode usar a seguinte sintaxe:

var element = $(‘meuElemento’);

… esta linha de código obtém o elemento com ID = “meuElemento” em sua página. Se você tem alguma familiaridade com JavaScript, é quase a mesma coisa para obter um elemento DOM por referência usando o código a seguir:

var element = document.getElementById(‘meuElemento’);

usando $$ você pode obter uma série de elementos DOM dentro de um elemento com um determinado ID:

$$(‘#meuElemento li.minhaListadoElemento’);

… por exemplo, esta linha de código retorna  um array de todas as tags <li> com a class = “minhaListadoElemento” dentro do DOM elemento com ID = “meuElemento”.

3. setStyle() e Style()

Estes são dois métodos básicos para definir e obter a propriedade de um elemento(altura, plano de fundo, cor …).Para definir uma propriedade deve-se usar o seguinte código:

$(“meuElemento”).setStyle(“height”, “200px”)

$(“meuElemento”).setStyles({

background: “#DEDEDE”,
border:“solid 1px #999999″,
width: “700px”
height: “80px”

});

Para obter uma propriedade que você pode usar getStyle () especificando o que deseja obter (altura, plano de fundo, cor …)ex.:

$(“meuElemento”).getStyle(“height”)

O código retorna a altura do elemento DOM com ID = “meuElemento”, por exemplo, “200px”. Se você quiser que o número (200 e não  “200px”) você tem que usar o seguinte codigo:

$(“meuElemento”).getStyle(“height”).toInt()

…, desta maneira, o valor retornado será um número (200).

4. Javascript

Agora, nós podemos começar ver como escrever o código  do Javascript usando MooTools, vamos separar o índice da página do código do Javascript, usando o seguinte código:

<script type=“text/javascript”>
window.addEvent(‘domready’, function() {
/ / Algumas linhas de código aqui …
});
</script>

Por exemplo, gostaria de escrever um script simples que mostre uma mensagem “Olá, Mundo!” Quando um usuário clicar em um link com a ID = “meuElemento”. O script é:

<script type=“text/javascript”>
window.addEvent(‘domready’, function() {
$(‘meuElemento’).addEvent(‘click’, function() {
alert(‘Olá Mundo!’);
});
});
</script>

… eo código HTML:

<a href= “home.html” id= “meuElemento”>
clique aqui!
</a>

Usamos somente isso em vez de um código “importuno” com o evento do onClick que chama uma função (por exemplo doSomething ()) adicionado dentro do Tag do <a>Ex.:

<a href= “home.html” id= “meuElemento” onClick= “javascript:doSomething()”>
clique aqui! </a>

Bom axo que basicamente entenderam o que eu escrevi, agora vamos aos exemplos(prática):

Exemplo 1: mude a cor do fundo

Vamos escrever um simples código que mudar a cor de fundo de uma camada com ID = “minhaLayer”:

O código do HTML(desta forma ou coisa do tipo):

<div id=“minhaLayer”>
<a href=“#” id=“meuElemento”>Mudar cor de fundo</a>
</div>

… como você pode ver, você não chama uma função do Javascript usando um evento (onClick, o onFocus…) dentro do Tag do <a>. A referência ao elemento DOM “myLayer” será inserir o seguinte script em que você tem que adicionar à estrutura do MooTools na Tag do <head> (etapa 1);

<script type=“text/javascript”>
window.addEvent(‘domready’, function() {
$(‘meuElemento’).addEvent(‘click’, function() {
$(‘minhaLayer’).setStyle(‘background’, ‘#DEDEDE’);
});
});
</script>

Ficando assim, para maior compreenção:

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

<script type=“text/javascript”>
window.addEvent(‘domready’, function() {
$(‘meuElemento’).addEvent(‘click’, function() {
$(‘minhaLayer’).setStyle(‘background’, ‘#DEDEDE’);
});
});
</script>

Exemplo 2: alterar e redefinir a cor de fundo

Agora vamos modificar o código anterior e torná-lo um pouco mais complexo.

Quando o usuário clica no link “Mudar cor de fundo” será alterada a cor e logo depois voltara para a cor padrão.

O código HTML será o mesmo do exemplo 1.

E o Javascritpt ficará da seguinte forma:

<script type=“text/javascript”>
window.addEvent(‘domready’, function() {

$(‘meuElemento’).addEvent(‘click’, function() {

var currentBgColor = $(‘myLayer’).getStyle(‘background’);
if(currentBgColor==”){
$(‘minhaLayer’).setStyle(‘background’, ‘#DEDEDE’);
} else {
$(‘minhaLayer‘).setStyle(‘background’, ‘#FFFFFF’);
}

});

});
</script>

Espero que tenham entendido e que tenham gostado, pois eu me “matei” pra fazer este artigo.Até a próxima.

Posts Relacionados:

• Divulgue seu conteúdo com facilidade
• Comparação de Lightbox
• Reset’s CSS
• #3 Photoshop: A Caixa de Ferramentas

Este post faz parte do blog Dk Design

Compre os melhores produtos de informática, celulares, eletrônicos entre muitas outras categorias

Principios Básicos do Mootools - Parte 1