0

У меня встал вопрос,как реализовать такую штуку,нажимаешь на ссылку и с правой стороны выходит блок выдвигая сайт в сторону.Тоесть не поверх а просто сайт выдвигает в сторону.Пример можете увидеть на сайте фэйсбук,там кнопка в правом нижнем есть Чат нажимая появляется блок выталкивающий сайт а внутри блока уже нужный мне контент

2 ответа 2

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;
}
5
  • там у него требование - сдвигать main content сайта влево...
    – zb'
    14 фев 2014 в 20:11
  • Уже делаю...
    – VenZell
    14 фев 2014 в 20:14
  • Все, теперь сдвигается все как надо.
    – VenZell
    17 фев 2014 в 12:43
  • +1 я чет не додумался input ещё выше перенести :)
    – zb'
    17 фев 2014 в 13:07
  • Да я бы и не додумался, но ваше решения для меня послужило вызовом: "А неужели я сам не догадаюсь как по-другому сделать?", - вот и поломал голову, как без табличной верстки сделать.
    – VenZell
    17 фев 2014 в 13:09
1

Верстаешь блок в видимом состоянии, потом прописываешь ему css правило через класс - display: none; а далее с помощью js прописываешь изменение на display: block; при нажатии на кнопку.

7
  • печально то что я js тупиком не знаю
    – Тахир
    14 фев 2014 в 18:25
  • печально, что вы не зная js беретесь за такое задание, но не беда - это можно сделать на css :)
    – zb'
    14 фев 2014 в 19:14
  • 1
    jsfiddle.net/oceog/hVs9p
    – zb'
    14 фев 2014 в 20:05
  • Красота! Опять я, видимо, читал через строчку... Забыл контент сдвигать.
    – VenZell
    14 фев 2014 в 20:10
  • вот кстати яркий пример где без <label **for=**> не обойтись
    – zb'
    14 фев 2014 в 20:18

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.