Skip to content
Advertisements

SCSS and JS Tabs

CODEPEN

scss tabs

Github:https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/SCSS%20and%20JS%20Tabs


HTML

 
    <div id="container">
        <div id="top" >
            <ul>
                <li id="sec_1">HTML</li>
                <li id="sec_2">CSS</li>
                <li id="sec_3">JavaScript</li>
                <li id="sec_4">Jquery</li>
            </ul>
        </div>
        <div id="bottom" >
            <div class="html">
                <h2>HTML</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Sed sit amet nulla tortor, a posuere urna. Praesent 
                    urna quam, semper ut ultricies et, mollis ac elit.
                    <br>
                    <br>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Sed sit amet nulla tortor, a posuere urna. Praesent urna 
                    quam, semper ut ultricies et, mollis ac elit. Suspendisse
                    tempor, lacus id consectetur sagittis, lorem odio dignissim
                    nulla, a condimentum sem neque sed ligula. Maecenas id risus
                    eros, eget porttitor metus. Quisque pellentesque neque dignissim 
                    nisl pellentesque vitae tempus urna eleifend. Nullam egestas,
                    neque id placerat luctus, nibh velit pharetra nulla, vel pretium 
                    justo massa ut elit. Vivamus nec auctor nunc.
                </p>
            </div>
            <div class="css">
                <h2>CSS</h2>
                <p>
                    Maecenas dictum, urna ut consequat condimentum, est dui 
                    commodo diam, ac pretium dui ante eu quam. Curabitur posuere
                    metus nec tellus venenatis placerat. Ut egestas neque in
                    odio vulputate gravida. In at justo ac est laoreet eleifend 
                    vel quis arcu. Aliquam erat volutpat. Proin vitae vehicula 
                    neque. Nam tempus erat ac ante tincidunt tincidunt. 
                    Pellentesque eu nibh sapien. Nunc augue magna, lacinia
                    eget congue eget, mattis id tortor. Fusce id vestibulum neque. 
                    Proin tincidunt tellus ut risus lobortis cursus. Duis sit amet
                    urna vel sapien ullamcorper varius.    
                </p>
            </div>
            <div class="javascript">
                <h2>JavaScript</h2>
                <p>
                    Duis luctus dolor ac erat luctus hendrerit. Aenean id congue magna.
                     sit amet elit vel lacus ornare dignissim imperdiet nec odio.
                    Maecenas condimentum egestas lorem et laoreet. Donec ut leo non 
                    purus rutrum euismod vel faucibus nunc. Curabitur vel mauris 
                    nisi, vitae laoreet erat. Lorem ipsum dolor sit amet, consectetur 
                    adipiscing elit. Vestibulum ante ipsum primis in faucibus orci 
                    luctus et ultrices posuere cubilia Curae; Maecenas ipsum odio, 
                    iaculis id vulputate vitae, vestibulum at nunc. Integer non nisl
                    lorem. Quisque lobortis congue semper. Nunc neque nisi, consequat
                    id egestas vitae, porta vel sem.
                </p>
            </div>
            <div class="Jquery">
                <h2>Jquery</h2>
                <p>
                    Fusce vel eros eu lectus ultricies fermentum vestibulum adipiscing 
                    odio. Suspendisse ultricies, metus nec dapibus pharetra, quam arcu 
                    vulputate nisl, a pretium nisi velit id ante. Nunc auctor augue sit 
                    amet orci vestibulum id placerat nulla pellentesque. Duis vel quam 
                    velit. Ut auctor ipsum quis lacus semper non pretium mi dignissim.
                    Morbi ultrices augue eget nisi hendrerit placerat. Mauris rhoncus 
                    urna quis metus congue quis condimentum risus interdum. Nam lobortis 
                    lectus et enim laoreet mattis. Integer faucibus ullamcorper erat, at 
                    rhoncus leo bibendum sed. Mauris libero urna, placerat non pretium ac, 
                    elementum et arcu. Aliquam non tellus diam, vel scelerisque odio. Etiam a quam et enim vehicula feugiat posuere at dui. Phasellus at nisl quam. Integer nisi mi, varius vitae placerat viverra, dapibus vitae massa. Nullam ut orci vitae nisi ornare aliquam in eget orci.
                </p>
            </div>
        </div>
    </div>

CSS( SASS)

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
html{height: 100%;overflow: hidden;}
body{
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    background: linear-gradient(to left top, #fff, #d9d9d9, #bfbfbf);
}
#container{
    position: relative;
    margin: 50px auto;
    width: 600px;
    #top{
        ul{
            display: block;
            list-style: none;
            margin: 0;
            padding: 0;
            li{
                display: inline;
                margin-right: 5px;
                padding: 10px;
                cursor: pointer;
                border-radius: 3px;
                color: #262626;
                font-weight: 700;
                transition: .5s;
                &:hover{    
                    background: #262626;
                    color: #ccc;
                }
            }
        }
    }
    #bottom{
        perspective: 1000px;
        div{
            position: absolute;
            margin-top: 5px;
            padding: 20px 50px;
            box-sizing: border-box;
            background: #262626;
            color: #ccc;
            opacity: 0;
            transition:1s transform;
            transform-origin: top center;
            transform: rotateX(-40deg);
            h2{
                font-weight: 700;
                font-size: 23px;
            }
            p{
                font-weight: 400;
                font-size: 15px;
            }
            &:after{
                content: "";
                position: absolute;
                top: 14px;
                left: 12px;
                width: 95%;
                height: 90%;
                border: 2px solid #ccc;
                border-radius: 3px;
            }
        }
        .active{
            opacity: 1;
            transform-origin: top center;
            transform: rotateX(0deg);
        }
    }
}


JS


        let box_1 = document.querySelector(".html"),
            box_2 = document.querySelector(".css"),
            box_3 = document.querySelector(".javascript"),
            box_4 = document.querySelector(".Jquery"),
            sec_1 = document.getElementById("sec_1"),
            sec_2 = document.getElementById("sec_2"),
            sec_3 = document.getElementById("sec_3"),
            sec_4 = document.getElementById("sec_4");


        sec_1.addEventListener("click",function(){
            active(box_1,box_2,box_3,box_4);
            color(sec_1,sec_2,sec_3,sec_4);
        });

        sec_2.addEventListener("click",function(){
            active(box_2,box_1,box_3,box_4);
            color(sec_2,sec_1,sec_3,sec_4);
        });

        sec_3.addEventListener("click",function(){
            active(box_3,box_1,box_2,box_4);
            color(sec_3,sec_2,sec_1,sec_4);
        });

        sec_4.addEventListener("click",function(){
            active(box_4,box_1,box_2,box_3);
            color(sec_4,sec_3,sec_2,sec_1);
        });

        function active(a,b,c,d){
            a.classList.add("active");
            b.classList.remove("active");
            c.classList.remove("active");
            d.classList.remove("active");
        }

        function color(a,b,c,d){
            a.style.background = "#262626";
            a.style.color = "#cccccc";
            b.style.background = "none";
            b.style.color = "#262626";
            c.style.background = "none";
            c.style.color = "#262626";
            d.style.background = "none";
            d.style.color = "#262626";
        }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: