HTML+JS+CSS.Как наложить div блок на другой div при нажатии на кнопку?

272
07 января 2019, 09:30

Имеется вот такой шаблончик https://codepen.io/psyapathy/pen/wENPgX

<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="content">
        <div id="chat-box">
            <div id="chat-head"> 
            </div>
            <div id="converse"></div>
                <div id="controls">
                <input id="textbox" name="sendtext" class="controls-elements" placeholder="Напишите сообщение" type="text" onkeypress="usl(event)" autofocus></input>
                <button id="send" onclick="buttonOtprav()" class="controls-elements" type="submit">Отправить</button>
            </div>  
        </div>
        <div id="sidepanel">
            <div id="sidemenu">
            <div class="buttons">
                <div class="func button">
                </div>
                <div class="dest button">                   
</div>
                <div class="donate button">
                    </div>
            </div>
            </div>      
        </div>  
        </div>
    </body>
</html>

Справа на боковой панели есть подобие трёх разноцветных кнопок.
Как сделать, чтобы при нажатии, допустим на первую, справа вылезал аналогичный sidemenu блок поверх имеющегося. Допустим с одной кнопкой, чтобы при нажатии ее он закрывался.

Как наложить div блок на другой div при нажатии на кнопку?

Спасибо заранее

READ ALSO
Манипуляция положений объектов
CSS

Манипуляция положений объектов

 215
Проблема с jQuery в IE11
javascript

Проблема с jQuery в IE11

Не работает следующий код в IE11, а так же если повесить событие через onclickПри этом в chrome работает

 208
Функции JavaScript [закрыт]
javascript

Функции JavaScript [закрыт]

У меня есть 4 функции case1(); case2(); case3(); case4(); и есть еще 5 функция start();, которая запускается по нажатию кнопки, а сама функция start() должна запускать...

 234
Двумерный ассоциативный массив - цикл
javascript

Двумерный ассоциативный массив - цикл

Прошу пояснить и помочь с цикломЕсть двумерный ассоциативный массив

 230