sábado, 28 de julho 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:

Agora, acrescentamos umas divs





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 é o 'position:absolute' da classe '.menu-content' sob o 'li:hover', pois doutra forma, o conteudo seria mostrado DENTRO do item de menu, alterando tamanho e bagunçando todo seu layout.
E assim a estrutura está totalmente pronta e funcional assim, agora basta aplicar algumas técnicas de css corriqueiras para deixar o menu conforme seu gosto.


Até a próxima.

quarta-feira, 25 de abril de 2012

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



  • 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.





segunda-feira, 12 de março de 2012

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

image 1
  • image 1
  • image 2
  • image 3
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 aqui.

domingo, 15 de janeiro de 2012

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'.
  RewriteBase /caminho_da_raiz_de_seu_site 

# Aqui pode ser a regra de rewrite que quiser, estamos configurando apenas para habilitar isso.
  RewriteRule ^.* index.php

</IfModule>
 
 
 Assim você impõe o caminho base do seu site independentemente do servidor, permitindo que o rewrite mode seja habilitado para você.

domingo, 8 de janeiro de 2012

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>'@'<host>' IDENTIFIED BY '<senha>';
mysql> FLUSH PRIVILEGES; 


mas com os devidos valores que se deseja alterar, como os privilégios e a senha. Esse comando serve também para adicionar o usuário a outro banco de dados, a outro host, etc


Excluir usuário


mysql> DROP USER <usuario>;





Tabelas

Mostrar tabelas

mysql> SHOW TABLES;
 
Criar tabela

mysql> CREATE TABLE <tabela> (<campo1> <tipo1>, <campo2> <tipo2> ... );

Alterar tabela

Adicionar colunas

mysql> ALTER TABLE <tabela> ADD <coluna> <tipo> AFTER <coluna anterior>; 

Alterar coluna

msql> ALTER TABLE <tabela> CHANGE <tabela> <novo nome tabela> <campo> <tipo>;

Se não quiser mudar o nome da tabela, basta manter o <novo nome tabela> com o nome antigo. Quanto o campo, se você colocar outro nome, vai ser criado um novo campo com o tipo especificado, mas se for dado o nome de um campo já existente, ele apenas altera o tipo dele.

Apagar coluna

mysql> ALTER TABLE <tabela> DROP <coluna>;

Excluir tabela

mysql> DROP TABLE <tabela>