6

Preciso que 3 divs que tenho tenham a mesma altura, e caso a altura não seja 100%, vire 100%. Exemplo: Tenho 3 divs

<div class="menuEsquerdo"></div>

<div class="toggle"></div>

<div class="conteúdo"></div>

Quando toggle é clicado o menu é diminuído.O menuEsquerdo precisa ser fixo(deve permanecer) quando é preciso deslizar com o mouse para baixo(caso haja muito texto no assunto) , e caso se precise deslizar para o lado direito o menu também deve ser fixo porém o mesmo deve "levar" junto o toggle e "levar" o fundo do menu(caso o menu não esteja preenchido 100%).

Gostaria que ficasse assim:

Normal

Caso Normal

Deslizando para baixo

Deslizando para Baixo

Deslizando para o lado

Deslizando para o lado

4 Respostas 4

4

Você pode reproduzir essa funcionalidade com um pouco de CSS e JavaScript.

Primeiro o HTML:

<!-- O nome das classes já explica o que cada elemento representa -->
<div class="menu"></div>
<div class="toggle"></div>
<div class="conteudo"></div>

Código CSS:

body{
    padding-left:230px;
}
body.expandido{
    padding-left:30px;
}
.menu, .toggle{
    position:fixed;
    height:100%;
    left:0;
    top:0;
}
.menu{
    width:200px;
    background:#555;
}
.toggle{
    width:30px;
    background:#ccc;
    left:200px;
}
.conteudo{
    padding:10px;
}
.sumido{
    margin-left:-200px;
}

E por último um pouco de JavaScript (jQuery):

$('.toggle').on('click',function(){
    var toggle_menu = $('.toggle, .menu'),
        body = $('body');

    if(!$(this).hasClass('sumido')){
        toggle_menu.addClass('sumido');
        body.addClass('expandido');
    }else{
        toggle_menu.removeClass('sumido');
        body.removeClass('expandido');
    }
});

Como funciona?

O que nós fizemos acima foi fixar o elemento .menu e o elemento .toggle no layout da página, de forma que nem com scroll eles sumam. Alem disso, atribuímos um padding ao elemento body para ele empurrar todo o seu conteúdo para direita, de forma que esse conteúdo não seja sobreposto pelo menu.

E o código JavaScript nada mais faz do que trocar classes CSS para alterar a posição destes elementos.

Exemplo

1
  • ficou muito bom, estava testando aqui, porém como eu poderia colocar um header e um footer na página já que a página ficaria quebrada? Commented 22/05/2014 às 20:08
1

Pela descrição e pelas imagens me parece que você pretende criar um dashboard.

Não que não seja possível de ser feito do zero, mas não há necessidade de se reinventar a roda quando existem soluções prontas e compatíveis com os mais diversos browsers como o Bootstrap.

Das tantas possibilidades existentes, uma bem próxima seria esta.

1
  • Muito obrigado pelo ponto negativo, seja você quem for. Commented 27/05/2014 às 16:48
1

Você pode pegar a altura do navegador via jQuery ou JavaScript e declarar um CSS pra essas divs com essa altura. Exemplo com jQuery:

var altura = $(window).height();
$('.alvo').css('height', altura);
-3

Ola uma boa ideia de concertar o codigo é só fixe o elemento .menu e o elemento .toggle no layout da página. Depois atribuia um padding ao elemento body para ele empurrar todo o seu conteúdo para direita, de forma que o que esteja dentro não seja sobreposto pelo menu.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .