Você está aqui: Web Grafismo Componentes Menu Phatfusion * Menu de Fotografias com Mootools
Phatfusion * Menu de Fotografias com Mootools
Subscreva via RSS ♥ Email ♥ iGoogle Partilhe no Twitter ♥ Facebook ♥ Del.icio.us ♥ Digg ♥ EmailPhatfusion mostra-nos uma outra forma de construir o nosso menu, pela criação de um menu de imagens que recorre à plataforma Mootools. Este possui uma aparência muito boa e fácil de utilizar. É muito semelhante ao design do menu utilizado no website oficial da Mootools.
A aplicação resume-se a um menu horizontal que ao passar o rato sobre uma imagem, revela a totalidade da mesma.
Quais os browsers compatíveis?
- Firefox 2 (mac / pc)
- IE 7
- IE 6
- Safari (mac)
Quais as características do Menu?
- 2 opções de eventos onClick – abrir & fechar
- href passado pelos eventos onClick
- imagem mentem-se aberta quando clicada
- fecha quando clicada
- selecção de ítem para pré-abertura
E que Opções?
- onOpen – a função executa quando um ítem é aberto. Se existir um href dentro do li então é passo para função.
- onClose – o mesmo que em cima mas quando o ítem é fechado.
- openWidth – largura em px dos ítens quando o rato está sobre. defeito: 200
- transition – defeito: Fx.Transitions.quadOut
- duration – o comprimento da transição. defeito: 400
- open – o id ou index de um ítem para abrir ao entrar. defeito: null
- border – valor em px para a largura dos ítens quando abertos. defeito: 0
Requisitos: mootools v1.11
Download: imagemenu.zip
Website: http://www.phatfusion.net/imagemenu/
Aprenda como pode adicionar grandes efeitos com o Element Method: morph e faça toda a lista uma região clicável com Mootols 1.2. O QUE IRÁ PRECISAR: Antes de começar, você deve ficar um pouco familiar com o Element Method: morph. Os eventos configuráveis mouseenter e mouseleave, os quais o tutorial se baseia. Depois, irá precisar de descarregar Mootools [...]
noobSlide é um slideshow para galeria de imagens baseada na plataforma Mootools. Pode-se escolher 7 estilos diferentes de slide shows para as nossas galerias. Achei que você poderia gostar de ter uma galeria assim. Pois considero ser, uma nova forma de apelar a atenção do utilizador através dos movimentos deslizantes que as imagens realizam. De facto, tenho visto [...]
Sobre o autor
User Interface Designer e Front End Developer. É autor do site Webgrafismo, onde dispõe novidades Open Source para Web Developers. Segue-o no twitter em @pedromagalhaesO que tens a dizer?
Registar o seu Gravatar.
Componentes
3 Efeitos CSS/HTML muito bonitos por Dragon Labs: "Dragon Labs está a promover 3 efeitos em CSS/JavaScript muito bonitos com tutoriais e código fonte disponível, os quais você ..."
Treeview * plugin jQuery para Listas em Árvore: "Treeview é um plugin jQuery leve e flexível que transforma uma lista não ordenada numa árvore expansível e colapsível. É uma ..."
Phatfusion * Menu de Fotografias com Mootools: "Phatfusion mostra-nos uma outra forma de construir o nosso menu, pela criação de um menu de imagens que recorre à plataforma ..."
Galeria de Imagens em Slideshow com Mootools: "noobSlide é um slideshow para galeria de imagens baseada na plataforma Mootools. Pode-se escolher 7 estilos diferentes de sli..."
Menu Drop-Down em CSS (horizontal & vertical): "A plataforma gratuita para Menus Drop-Down em CSS não separa apenas o HTML do CSS, também categoriza por temas a estrutura do..." Design
Criando Formulários Bonitos Facilmente: "A Wufoo Form Gallery é um local onde web developers e webdesigners podem encontrar ajuda no desenvolvimento de formulários...."
Obter Tabelas Dinâmicas MySQL com PHP e AJAX: "O Eyesis Data Grid Control é tudo o que precisa quando chega a altura de exibir dados apartir de uma base de dados MySQL para..."
+20 Botões para Download em Photoshop e PNG: "Button-Download está a disponibilizar botões gratuitos com diferentes designs no formato PSD (Photohop) e PNG. Actualmente ex..."
3 Templates para capas de CD / DVD em PSD: "Por acaso você tem CDs ou DVDs para os seus leitores? Os leitores geralmente gostam que lhes mostrem os seus trabalhos como é..."
Inspiração para Design de Interfaces Web: "Gustavo Pimenta é um designer experiente focado em fazer da Web um lugar melhor. Ele menciona que é "viciado em criar screens..." Extras
Sistema de Grelha 960 para Desenvolvimento Web: "O Sistema de Grelha 960 é uma medida para simplificar o fluxo de trabalho no desenvolvimento web, pela disponibilização das d..."
Exportar Dados Google Analytics para Excell: "Google Analytics oferece variadas maneiras de visualizar dados e realizar comparações, o que é fantástico. Mas se você precis..."
Sistema de Votação em Estrela para Website: "Star Rating System é a solução perfeita se pretende ter um script para votação na sua página web! Gregory Boshoff escreveu es..."
Google Wave: Apresentação do Projecto: "Estes dias têm sido dominados com notícias e tremenda excitação à volta do Google Wave, a nova plataforma de comunicação em t..."
Sharein - Partilhe as suas Descobertas: "É um facto que adoramos partilhar coisas na internet. Estamos constantemente a enviar e-mails para amigos, família e colegas ..." Tutorial
Pop-up jQuery para Marketing e Publicidade: "Meerkat, o nome escolhido para este pop-up, é um plugin jQuery desenvolvido por Jarod Taylor que serve vários propósitos graç..."
Série de Tutoriais Google Earth - Dia 1 : "Google Earth é uma aplicação que já todos conhecemos. Oferece-nos mapas 3D e imagens de satélite para regiões específicas med..."
16 Vídeos Tutoriais para Aprender PHP: "Continuando com os vídeos tutoriais da Themeforest, esta série mostra-lhe como começar a programar em PHP. Tal como os vídeos..."
Série de Tutoriais Google Earth - Dia 2: "Neste segundo dia vamos criar a nossa primeira interface Google Earth em português, recorrendo a linguagens de marcação. Depo..."
7 Plugins Wordpress e Dicas para Blog de Sucesso: "Se é blogger e usa a plataforma Wordpress, então estes plugins são para si. Eles estão listados por ordem de instalação para ..."