Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

IagoEduardo

Layout Responsivo - Sistema PHP

Recommended Posts

Bom dia galera!

 

Preciso desenvolver um Sistema PHP responsivo... e estou indo bem até o momento, rs

 

Não conhecia nada de PHP e nem de CSS, estou estudando a uma semana.

 

Estou trabalhando com o Bootstrap, mas, estou com algumas dificuldades em relação ao Layout.

 

Gostaria de Desenvolver algo parecido com esse Layout:

 

Sem-t%C3%ADtulo.png

 

Minhas dúvidas em relação ao Design/Layout seria:

 

Qual é a melhor maneira de dividir a minha página em 3 partes como esse Layout: Barra do topo / Menu e Conteúdo?

 

Como realizo a ligação dos Menus do Dashboard com o conteúdo? Seria frames (html)?

 

Como realizo esse efeito Dropdown no Menu (Botão +)?

 

Desde já, agradeço a ajuda.

 

Até mais!

Compartilhar este post


Link para o post
Compartilhar em outros sites

P: Qual é a melhor maneira de dividir a minha página em 3 partes como esse Layout: Barra do topo / Menu e Conteúdo?

 

R: Exemplo aqui: http://jsbin.com/kobuzisa/1/edit

 

P: Como realizo a ligação dos Menus do Dashboard com o conteúdo? Seria frames (html)?

 

R: Você deixa a div de cada menu setada inicialmente com display:none (dentro da DIV mãe conteudo, citada na pergunta anterior) e ao clicar em um menu, mudar para display: block. Tudo isso com Javascript:

<script>
function mostra(){
 var conteudo = document.getElementById("dashboard_content");
  conteudo.style.display='block';
}
</script>

--no html vc poem no evento onclick="mostra(this);"

P: Como realizo esse efeito Dropdown no Menu (Botão +)?

 

R: Você vai criar uma subdiv dentro da div mãe MENU e vai setar a margin-left:2%;

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se usa Bootstrap não precisa recriar o css como no exemplo do galvaoheitor e nem a função js, tudo pode ser feito com bootstrap, pois já está tudo setado e definido.

 

Mas o que ele passou não está errado.

 

É isso ai.

 

 

...

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.