Pular para o conteúdo principal

Postagens

Mostrando postagens de 2012

CSS : Megamenu simples em css

Megamenus são menus popups que ao invés de links, são mostrados conteudos variados. Hoje em dia está muito em voga esses menus, então vou mostrar aqui como criar rapidamente um megamenu. Primeiramente, criamos um menu simples como: Item 1 Item 2 Item 3 Agora, acrescentamos umas divs Item 1 ... conteudo 1 ... Item 2 ... conteudo 2 ... Item 3 ... conteudo 3 ... Onde os conteudos oidem ser o que você quiser, inclusive outros menus, já que o megamenu é uma expansão da idéia de menu pop-up. Escrevemos agora o CSS /* Deixa o menu na horizontal */ ul li { display: inline; /* Um pouquinho de enfeites para melhor visualização */ padding: 5px;border: 1px solid; } /* Esconde o conteudo do menu */ ul li .menu-content { display: none; /* Um pouquinho de enfeites para melhor visualização */ padding: 5px; border: 1px solid; } /* Mostra o conteudo sob o ponteiro do mouse */ ul li:hover .menu-content { position:absolute; display: block; } O essencial aqui é

CSS : Menu horizontal com items de mesmo tamanho

Se você precisa de um menu horizontal cujos items fiquem do mesmo tamanho automaticamente sem precisar definir o 'width' deles, basta fazer assim: Crie um menu Item 1 Item 11 Item 1111 Item 11111 Item 111111 No css da página, escrevemos ul { display: table; width: 100%; table-layout: fixed; } li { display: table-cell; /* Borda para facilitar a visualização do efeito. */ border: 1px solid; text-align:center; } O truque é o uso das propriedades "display:table"e "table-layout" para a tag "ul", e "display:table-cell" para tag "li". Outras opções podem ser acrescentadas, mas essa é o mínimo que vai precisar para o efeito desejado. Até a próxima.

Jquery : um simples slider de imagens com mouse hover

Temos nesse esquema, uma imagem principal e alguns thumbnails, onde, ao passar o mouse por cima dos thumbs, a imagem principal muda para a imagem que é apontada pelos thumbs. Assim, temos por exemplo, o html com as imagens Um css básico #main-img { width: 200px; height: 300px; overflow:hidden; } #main-img img { width: 200px; } #thumb-img { width: 200px; } #thumb-img li { margin-right: 20px; display:inline; width: 50px; height: 50px; height-overflow: hidden; } #thumb-img img { width: 50px; } O javascript então , para ter o nosso efeito será $(document).ready( function(){ $("#thumb-img img").hover( function(){ /* Pega o nome da imagem do thumbnail */ var thumbsrc = $(this).attr('src'); /* Substitue a imagem principal pela imagem do thumbnail */ $("#main-img img").attr('src',thumbsrc); }); }); devidamente colocado num script a parte ou no inicio da página junto com a versão mais atual do jquery

Apache : Habilitando urls limpas ( amigáveis ) em seu servidor web

Essa dica serve para servidores linux. Para habilitar as urls limpas em seu servidor web,habilite o módulo 'rewrite.so' no apache. Após isso, abra o arquivo de configuração 'sites-enabled/000-default' e na seção escrito <Directory /var/www/>         Options Indexes FollowSymLinks MultiViews         AllowOverride None         Order allow,deny         allow from all </Directory> mude a linha 'AllowOverride None' para 'AllowOverride All'. Reinicie o apache, e poderá utilizar urls limpas em seus projetos. Caso não dê certo, talvez essa outra dica ajude. No seu arquivo '.htaccess' na raiz do seu site, coloque a diretiva <IfModule mod_rewrite.c> RewriteEngine on # tirando o dominio, por exemplo se o dominio de seu site é 'http://www.site.com/meu_site' , o caminho da raiz será '/meu_site'. Se for 'http://localhost/joao/meu_site' , então a raiz será '/joao/meu_site'. Rewrite

MySQL : Guia de referência

Este é um resumo de comandos básicos para mysql. Banco de dados Mostrar bancos de dados mysql> SHOW DATABASES; Usar banco de dados Esse comando é nescessário, pois você precisa escolher o banco de dados onde será criado as tabelas. mysql> USE <banco de dados> Criar banco de dados mysq> CREATE DATABASE <banco de dados> Excluir banco de dados mysql> DROP DATABASE ; Usuários Mostrar usuários mysql> SELECT mysql; mysql> SELECT user FROM user;  Criar usuário mysql> CREATE USER <usuário>; mysql> GRANT ALL PRIVILEGES ON <banco de dados>.* TO > '<usuário>'@'<host>' IDENTIFIED BY '<senha>'; mysql> FLUSH PRIVILEGES; Alterar usuário Para alterar uma permissão ou senha de um usuário num banco de dados, basta rodar o comando mysql> CREATE USER <usuario>; mysql> GRANT ALL PRIVILEGES ON <banco de dados>.* TO '<usuario>&#