Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 73935

Creating 2 buttons that reveal content from 2 different direction

$
0
0

I want to create 2 buttons can when clicked will reveal their respective content from 2 different directions. enter image description here

Example:

When a user click on smt, the content will open from the left.

When a user click on mi, the content will open from the right.

Both buttons will show different content.

So far, I managed to do the smt part only as I don't know how to make the "mi" part work.

Below is my code:

Style:

<style>
    .overlay {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 60;
        left: 0;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
        overflow-x: hidden;
        transition: 0.5s;
    }

    .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }

    .overlay .closebtn {
        position: absolute;
        top: 60px;
        right: 45px;
        font-size: 60px;
    }

    @media screen and (max-height: 650px) {
        .overlay a {
            font-size: 20px
        }

        .overlay .closebtn {
            font-size: 40px;
            top: 15px;
            right: 35px;
        }
    }
</style>

SMT button:

<div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="overlay-content">Smt</div>
</div>
<span style="font-size:30px;cursor:pointer; position:absolute; top:680px; left:300px;" onclick="openNav()">smt</span>

JavaScript:

<script>
    function openNav() {
        document.getElementById( "myNav" ).style.width = "100%";
    }

    function closeNav() {
        document.getElementById( "myNav" ).style.width = "0%";
    }
</script>

How can I re-use the same code for the second button?


Viewing all articles
Browse latest Browse all 73935

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>