Side bar Toggle HTML and CSS tutorial ......

hey there guys , how are you doing i hope you are good and yea thanks for asking i am doing good here also , actually i have something to share with you guys which is a basic Frontend Development component which you are most likely to find in
most of the app , site , Softwares so here is a simple and basic example ,

Actually i wish to do a video of how i was coding it but due to the file size and space i will do a demo of the application / website , i will also link up the source file maybe on github or on hive .

So lets gets started , we first design the site using illustrator , i use illustrator because i am out of internet connection during the production .

here is the code :

<html>
    <head> 
        <title> Side Bar Toggle MENU</title>
    </head>
    <body>
        <header>
            <h4> LOREM IPSUM ON HIVE</h4>
            <input type="checkbox" id="check" name="checkbox" />
            <label for="check" class="side-bar-togg">
                <div> </div> 
                <div> </div> 
                <div> </div> 
            </label>
            <nav id="mainSideBar"> 
                <ul class="inner-side-bar">
                    <li> Programming and Devs</li>
                    <li> HIVE Tech Community</li>
                    <li> STEM Community</li>
                    <li> About to be Dsicovered </li>
                </ul>
            </nav>
        </header>

        <h3>
               <p>  This is the pure HTML and CSS SIDEBAR TOGGLE MENU 
            example designed with illustrator

            BY Alexander Philip (fox lead).......
            </p>
        </h3> 
    </body>
    <style>
body{
    max-width : 100% ;
    min-width : 320px;
    height : auto ;
    margin: 0 auto 0 auto ;
    position: relative;
    background-color: #fff;
}

*{
    list-style: none;
    font-family: Arial, Helvetica, sans-serif;
}

body p{
    text-align: center;
    display: inline-block;
    width : 100% ;
    color : #000;
    margin-top : 30% ;
}
header{
    width : 100% ;
    height: 50px;
    background : #fff ;
    box-shadow: 1px 1px 2px  #141414, -1px -1px 2px #141414;
    text-align: center;
    padding : 10px;
}
input{
    display: none;
    visibility: hidden;
}
.side-bar-togg{
    width : 40px;
    height :40px;
    position : absolute ;
    cursor: pointer;
    left : 10px;
    top : 10px;
}
.side-bar-togg div:nth-child(1){
    width : 50% ;
}
.side-bar-togg div:nth-child(2){
    width : 70% ;
}
.side-bar-togg div{
    background-color:#606060;
    display: block;
    margin : 5px;
    border-radius: 5px;
    height: 8px;
}
nav{
    width: 250px;
    height: 100vh;
    background-color: #0e2228 ;
    display: block;
    position: absolute ;
    right: 0;
    transform: translateX(250px);
    top : 0;
    text-align: center;
    text-transform: capitalize;
    color : #fff ;
}
ul{
    width : 100% ;
    padding : 0;
    height : 100% ;
}
li{
    display: block;
    margin-top : 10% ;
    margin-bottom: 10%;
    cursor: pointer;
    padding : 10px 15px ;
    text-align: center;
    width : 100% ;
    text-align: center;
}
li:hover{
    color : #0e2228 ;
    background : #fff ;
}

#check:checked ~ .side-bar-togg div:nth-child(1){
    transform: rotate(-60deg);
    transition: all .5s;
    width : 100% ;
}
#check:checked ~ .side-bar-togg div:nth-child(2){
    display: none ;
    visibility: hidden;
}
#check:checked ~ .side-bar-togg div:nth-child(3){
    transform: rotate(60deg);
    transition: all linear .5s;
    width : 100% ;
}
#check:checked ~ #mainSideBar{
    transform: translateX(0px);
    transition: all .5s;
}
@media screen and (max-width : 500px) {
    *{
        font-size: smaller;
    }
}



    </style>

so guys first of all i designed the site that i want to build using illustrator which makes your development process eaiser and quite faster ,

You Can check out the code or copy the code to test run it yourslef to see it end result ...

as much as i would love to do a video about this i can't at the moment due to my editing software lagged. but i will try my best to give a better shot at the next tutorial.

togg bar design.jpg

bar 2.jpg

bar 1.jpg

As always thanks for your time and support i truly appreciate it ....

Sort:

Trending

[-]

gwajnberg (72) 2 years ago

Ccs was always a challenge for me
!1UP

$0.00

1 vote

curation-cartel (52) 2 years ago

	You have received a 1UP from @gwajnberg! The @oneup-cartel will soon upvote you with: @stem-curator And they will bring !PIZZA 🍕.

^{Learn more about our delegation service to earn daily rewards. Join the Cartel on Discord.}

stemsocial (63) 2 years ago

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.

hivebuzz (74) 2 years ago

Congratulations @foxlead! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You received more than 1250 upvotes.
Your next target is to reach 1500 upvotes.

_{You can view your badges on your board and compare yourself to others in the Ranking}
_{If you no longer want to receive notifications, reply to this comment with the word STOP}

Side bar Toggle HTML and CSS tutorial ......

You have received a 1UP from @gwajnberg!

Support the HiveBuzz project. Vote for our proposal!