У меня встал вопрос,как реализовать такую штуку,нажимаешь на ссылку и с правой стороны выходит блок выдвигая сайт в сторону.Тоесть не поверх а просто сайт выдвигает в сторону.Пример можете увидеть на сайте фэйсбук,там кнопка в правом нижнем есть Чат нажимая появляется блок выталкивающий сайт а внутри блока уже нужный мне контент
2 ответа
html
<input id="show_chat" type="checkbox" />
<div class="content">
<h1>Header</h1>
<p>Content</p>
</div>
<div class="chat-wrapper">
<label for="show_chat">Покажите мне чат!</label>
<div class="chat-content">Успех! :)</div>
</div>
css
#show_chat {
display: none;
}
.content {
background-color: #aaeeff;
width: 100%;
transition: width 0.5s;
-o-transition: width 0.5s;
-moz-transition: width 0.5s;
-webkit-transition: width 0.5s;
}
.chat-wrapper {
bottom: 0;
display: table;
position: fixed;
right: 0;
width: 200px;
}
.chat-content {
height: 0;
}
#show_chat:checked ~ .content {
width: calc(100% - 200px);
transition: width 0.5s;
-o-transition: width 0.5s;
-moz-transition: width 0.5s;
-webkit-transition: width 0.5s;
}
#show_chat:checked ~ .chat-wrapper .chat-content{
height: 20px;
transition: height 0.5s;
-o-transition: height 0.5s;
-moz-transition: height 0.5s;
-webkit-transition: height 0.5s;
}
-
-
-
-
-
Да я бы и не додумался, но ваше решения для меня послужило вызовом: "А неужели я сам не догадаюсь как по-другому сделать?", - вот и поломал голову, как без табличной верстки сделать.– VenZell17 фев 2014 в 13:09
Верстаешь блок в видимом состоянии, потом прописываешь ему css правило через класс - display: none; а далее с помощью js прописываешь изменение на display: block; при нажатии на кнопку.