Simple Responsive Menu Bar

-

 


If you are looking for how to create a responsive menu bar very easy way, then I think this little code snippet is that what you are looking for... 


Ingrediants

  • HTML
  • CSS


Main Focus Point:
  • In HTML 

    • input (id = checked)
    • label (for = checked)

  • In CSS
    • ul { flex }
    • media queary ( 600px )
    • ul { flex + column }
    • position : absolute
    • top : 70px
    • left : -100%
    • #checked : checked ~ ul {  left : 0  }

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Menu</title>
    <link rel="stylesheet" href="style.css">
    <!--For Bar Icon-->
    <script src="https://kit.fontawesome.com/1f45fef13f.js" crossorigin="anonymous"></script>
</head>

<body>
	<header>
		<nav>
			<input type="checkbox" id="checked">
			<label for="checked" class="checkLebel">
				<i class="fas fa-bars"></i>
			</label>

			<ul>
				<li><a href="#Home">Home</a></li>
				<li><a href="#Service">Service</a></li>
				<li><a href="#About">About</a></li>
				<li><a href="#Contact">Contact</a></li>
				<li><a href="#Login">Login</a></li>
			</ul>
		</nav>
	</header>
</body>

</html>

CSS 

* {
    margin         : 0;
    padding        : 0;
    box-sizing     : border-box;
    list-style     : none;
    text-decoration: none;
}

body {
    font-family: 'Trebuchet MS';
}

nav {
    background-color: lightgoldenrodyellow;
    height          : 70px;
}

ul {
    display        : flex;
    justify-content: flex-end;
    margin-right   : 20px;
}

ul li {
    margin-top   : 15px;
    margin-left  : 10px;
    border       : .5px solid black;
    border-radius: 3px;
    padding      : 10px 20px;
    cursor       : pointer;
}

ul li a {
    color: black;
}

ul li:hover {
    background-color: coral;
}

.checkLebel {
    font-size: 35px;
    float    : right;
    margin   : 10px 25px 0 0;
    cursor   : pointer;
    display  : none;
}

#checked {
    display: none;
}


@media (max-width: 600px) {

    ul {
        width           : 100%;
        min-height      : 100vh;
        display         : flex;
        flex-flow       : column;
        text-align      : center;
        justify-content : flex-start;
        position        : absolute;
        top             : 70px;
        left            : -100%;
        background-color: cadetblue;
        transition      : all .5s ease-in-out;
    }

    ul li:last-child {
        margin-bottom: 20px;
    }

    ul li {
        display: inline-block;
        margin : 20px 10px 0 10px;
    }

    .checkLebel {
        display: block;
    }

    #checked:checked~ul {
        left: 0;
    }
}

Comments

Post a Comment

Popular posts from this blog

Stack

-
Data-Structure | Linear Category Stack Code Example  // BluePrint || Static Thing class Stack { // LIFO = Last In Fast Out | (Linear) Data-Structure constructor() { // empty stack this.stack = []; } // add new data in stack, one by one add(data) { this.stack.push(data); } // remove data from stack remove() { // for checking, is stack empty or not... if (this.stack.length) { return this.stack.pop(); } } } // ######################################################## // ######################################################## // ######################################################## // Object Creating || Dynamic Thing // Create an object of Stack class const person = new Stack(); person.add('Sam'); person.add('Jon'); person.add('Ken'); person.add('Lee'); // total object calling [its not a good approach] c
Read more

Get Your Geo Location

-
Image
  HTML + CSS + JavaScript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Geo Location</title> <style> body { font-family: 'Courier New', Courier, monospace; } button { font-size: 18px; padding: 10px 5px; cursor: pointer; } </style> </head> <body> <div> <h3>Click the button to get your coordinates.</h3> <button onclick="getLocation()">Know Your Geo Location...</button> <h1>Latitude : <span id="lan"></span></h1> <h1>Longitude : <span id="lon"></span><
Read more

React | State Toggling

-
Image
  if you are wondering How to toggle Boolean   state in react component, then maybe this little code snippet for you... Ingredients :  HTML CSS React *** Dependency :  Bootstrap (Only for button) command: npm start   import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; const App = () => { const [isLoggedIn, setIsLoggedIn] = useState(true); //let isLoggedIn = true; <<<|<<< this approach not work... // Element Variable const buttonText = isLoggedIn ? 'Log Out' : 'Log In'; const classNameChange = isLoggedIn ? 'danger' : 'success' const toggleFunction = () => { //isLoggedIn = !isLoggedIn; <<<|<<< this approach not work... setIsLoggedIn(!isLoggedIn); } const style = { textAlign: 'center', marginTop: '20px', lineHeight: 5 }; return ( <div style={style}>
Read more