Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom, desisto. Sou péssimo designer, logo CSS e JavaScript são minhas únicas alternativas para um layout bonito (ou menos feio :P)
Bom, como meu FTP tá de onda comigo hoje, postarei o soure da página, que é bem pequeno pois estou montando o layout aos pedaços, começando pelo menu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en-US">
<head>
<title>Layout :: Menu</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$( '#menu ul li' ).click( function() {
if( $( '#panel' ).css( 'marginRight' ) == '-200px' ) {
$( '#panel' ).animate({ 'marginRight' : '0'}, 1000 );
} else {
$( '#panel' ).animate( { 'marginRight': '-200px' }, 1000 );
}
});
});
</script>
<style type="text/css">
@import url( 'reset.css' );
body {
background-color: #2b2b2b;
margin: 5%;
}
#sidebar {
padding: 10px;
overflow: hidden;
}
#menu {
border-right: 5px solid #800004;
float: right;
}
#menu ul li {
background-image: url( 'inactive.png' );
cursor: pointer;
display: block;
height: 156px;
position: relative;
width: 40px;
z-index: 100;
}
* html #menu ul li {
position: fixed;
}
#menu ul li.active {
background-image: url( 'red.png' );
z-index: 101;
}
#menu ul li.inactive {
margin-top: -8px;
}
#panel {
background-color: #2b2b2b;
-webkit-border-radius: 0 10px 10px 0; /* Safari and Chrome */
-moz-border-radius: 0 10px 10px 0; /* Firefox */
-khtml-border-radius: 0 10px 10px 0; /* Linux browsers */
border-radius: 0 10px 10px 0; /* CSS3 */
-webkit-box-shadow: 6px 6px 7px rgba( 0, 0, 0, 0.2 );
-moz-box-shadow: 6px 6px 7px rgba( 0, 0, 0, 0.2 );
-pie-box-shadow: 6px 6px 7px rgb( 33, 33, 33 ); /* Hack for the Hack - Parsing RGBA used above */
box-shadow: 6px 6px 7px rgba( 0, 0, 0, 0.2 );
behavior: url( 'PIE.htc' ); /* Internet Explorer - hack */
float: right;
height: auto;
margin-right: -200px;
min-height: 452px;
width: 180px;
}
</style>
</head>
<body>
<div id="sidebar">
<div id="panel">
</div>
<div id="menu">
<ul>
<li class="active" id="search">
<a href="#"></a>
</li>
<li class="inactive" id="components">
<a href="#"></a>
</li>
</ul>
</div>
</div>
</body>
</html>Existem duas imagens (as abas) que, se for necessário posto depois. Diga-se de passagem, acho que até os 12 trabalhos de Hércules foram mais fáceis do que encaixar aquele triângulo na aba. :angry:
Enfim.
O super-mega-efeito nada mais é do que ao puxar uma das abas, o menu venha junto. E ao clicar de novo, ele saia de cena.
O meu problema é na borda vermelha presente na DIV #menu. Ela está lá para que, quando o menu estiver fechado, as abas não fiquem à deriva na tela.
Eu gostaria que assim que o menu tiver sido aberto, aquela linha vermelha, se estenda através de borda lateral esquerda desse menu.
Põe a borda em #panel, à esquerda, ué?
O problema é que se colocar em #panel ela vai se estender por toda altura corretamente, mas isso só deve acontecer depois que o menu estiver aberto, ou seja, enquanto fechado, deve limitar-se apenas à abas, de #menu.
Mas eu não consigo executar duas "animações" ao mesmo tempo, para dar suavidade ao efeito.
Se eu adicionar a borda em #panel e disparar a animação de abertura e logo abaixo disparar outra para que oculte a borda de #menu, por um micro segundo fica perceptível a remoção da borda para que a de #panel se encaixe.
Queria algo mais suave, como se (nos bastidores) a borda de #panel viesse, "encontrasse" a de #menu e à ela se fundisse, ficando tal qual se eu simplesmente adicionasse a borda diretamente em #menu, o que não pode acontecer pelos mesmos motivos de adicionar a borda à esquerda de #panel.
E, obviamente, deveria haver a mesma transição suave quando ocultando, isto é, a "borda fundida" seria desacoplada da de #menu, voltando a pertencer apenas à #panel apenas e sumiria ao ter sua margem empurrada de volta, de forma a ficar escondida.
Que é possível, eu acredito que seja. Mas faria eu isso com a jQuery ou precisaria apenas adaptar meu HTML / CSS?
Carregando comentários...