css Responsive menu

-

 Html:---

<link rel="stylesheet" href="style/menuresp.css">

</head>

<body>
    <div class="container">
        <div class="header">
            <div class="title">
                <h1>Premium</h1>
            </div>
            <!-- adding responsiveness -->
            <a href="#" class="togglebutton">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </a>
            <!------>



            <div class="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Profile</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script src="script/respmenu.js"></script>
</body>

</html>

css:--

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.container {
    height: 100vh;
    width: 100vw;
    background-color: aqua;
}

.header {
    width: 100vw;
    /* height: 20vh; */
    background-color: blue;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.title {
    width: 30vw;
    /* height: 20vh; */
    background-color: burlywood;
}

.menu {
    width: 50vw;
    /* height: 20vh; */
    background-color: cadetblue;
}

.menu ul {
    display: flex;
}

.menu li {
    list-style-type: none;
}

.menu li a {
    text-decoration: none;
    color: white;
    padding: 1em;
    display: block;
    /*larger in size*/
}

.menu li :hover {
    background-color: grey;
}

.togglebutton {
    position: absolute;
    /*right side 
of the element */
    top: .75rem;
    right: 1rem;
    /* display: flex; */
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    /* background-color: red; */
}

.togglebutton .bar {
    height: 5px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
    /* background-color: white; */
    /* border-radius:20px; */
}



@media screen and (max-width:576px) {
    .header {
        background-color: gold;
        flex-direction: column;

    }

    .title {
        background-color: greenyellow;
        width: 100vw;

    }

    .menu {
        background-color: hotpink;
        width: 100vw;

    }

    .togglebutton {
        display: flex;
    }

    .menu {
        flex-direction: column;
        align-items: flex-start;
        display: none;
        width: 100%;
    }

    .menu ul {
        flex-direction: column;
        width: 100%;
    }

    .menu li {
        text-align: center;
    }

    .menu li a {
        padding: .5rem 1rem;
    }

    .menu.active {
        display: flex;
    }



}

js:--

const togglebutton = document.
getElementsByClassName('togglebutton')[0];
const menu = document.getElementsByClassName
('menu')[0];
togglebutton.addEventListener('click', () =>
 {
    menu.classList.toggle('active')
})

Comments

Post a Comment

Popular posts from this blog

interview questions js[ Anurag Singh ProCodrr]

-
 javascript:- nderstanding-the-difference-between-pure-and-impure-functions-in-javascript/ pure function:- that does not change outside value of the function 1: function geek(value) {      return value+100;  }     console.log(geek(34));  2: function capitalize(str) {    return str.toUpperCase();  }     console.log(capitalize('geeks')); ............................. lamda function[anonymous function] doesnt have name Lambda functions are pure functions in Javascript. let multiply = (a, b) => a * b; console.log(multiply(5, 9)); const Names = [   'Mansi',   'Gaurav',   'Akansha',   'Sanya' ]; console.log(Names.map(Names => Names.length));   array.slice[parts the array] gives array returns The slice() method returns selected elements in an array, as a new array. The slice() method selects from a given start, up to a (not inclusive) given end. The slice() method does not change the origi...
Read more

reactnative_creation

-
 [EAS Build Service]:--for production Alternative:-- expo managed workflow:- expo go:-expo init projectname:-[built in feature] easy to setup and workflow quick &fictionless development no or very little congiguration you can build(cross-platform) standalone apps expo Bare workflow: [own native code android ] relatively easy to setup and work with convenient development some configuration required you can build(cross-platform) standalone apps [react native cli] setup:-- android studio jdk java setup xcode install react cli: more complex setup conveninent development can require more configuration effort standalone apps are build locally expo bare workflow:--- https://docs.expo.dev/versions/latest/sdk/location/ https://github.com/expo/expo/tree/sdk-51/packages/expo-location u can eject from managed expo  to bear workflow:-- just run  expo eject in terminal continue android package name:-com.companyname.domainname
Read more