Push left CSS Nav

Developer
Raphael Goetter
Size
2,630 Kb
Views
24,288
  1. Push left CSS Nav Previews
  2. Push left CSS Nav HTML Codes
  3. Push left CSS Nav CSS Codes

How do I make an push left css nav?

What is a push left css nav? How do you make a push left css nav? This script and codes were developed by Raphael Goetter on 19 September 2022, Monday.

Push left CSS Nav Previews
IQ Test

Push left CSS Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Push left CSS Nav</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body id="body"> <!-- body will be the .nav-button target -->
<aside class="sidebar"> <nav id="navigation" role="navigation"> <a href="#">Salade</a> <a href="#">Tomate</a> <a href="#">Oignons</a> <a href="#">Choucroute</a> <a href="#">Picon bière</a> </nav>
</aside> <!-- /aside -->
<div class="wrapper"> <a href="#body" class="nav-button-open" aria-label="open navigation"></a> <a href="#" class="nav-button-close" aria-label="close navigation"></a> <header id="header"> <h1>Push left CSS Nav</h1> </header> <div class="main"> <h2>partie "main"</h2> <p>Navigation "off Canvas" basée sur :</p> <ul> <li>CSS pour la décoration du lien-bouton (via linear-gradients)</li> <li>CSS pour l'évément du "touch" (via :target)</li> <li>CSS pour la transition</li> </ul> <p>Le principe général est celui-ci :</p> <ul> <li>Sur grand écran (mini 768), "sidebar" est simplement placé en haut de "wrapper".</li> <li>Sur petit écran (maxi 767), "sidebar" passe en position absolute, "wrapper" est décalé en translation par dessus "sidebar".</li> </ul> <p>Pré-requis :</p> <ul> <li>body doit avoir un id pour être ciblé par l'ancre</li> </ul> </div> <footer id="footer"> <p>Mon <b>footer</b> </p> </footer>
</div>
<!-- /wrapper --> </body>
</body>
</html>

Push left CSS Nav - Script Codes CSS Codes

/* preventing from overflow */
html,
body { overflow-x: hidden;
}
/* wrapper styles */
.wrapper { position: relative; min-height: 100vh;
}
/* small screens styles */
@media (max-width: 767px) { .sidebar { position: absolute; top: 0; width: 50vw; min-height: 100vh; } .wrapper { -webkit-transform: translateX(0) translateZ(0); transform: translateX(0) translateZ(0); -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; will-change: transform; } /* Button deco */ [class^="nav-button"] { display: block; z-index: 1; height: 3.5rem; width: 3.5rem; background-color: transparent; background-image: -webkit-linear-gradient(left, #333, #333), -webkit-linear-gradient(left, #333, #333), -webkit-linear-gradient(left, #333, #333); background-image: linear-gradient(to right, #333, #333), linear-gradient(to right, #333, #333), linear-gradient(to right, #333, #333); background-position: center top, center, center bottom; background-repeat: no-repeat; background-size: 3.5rem .9rem; padding: 0; outline: 0; border: 0; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } /* here's goes the push left effect */ body:target .wrapper { -webkit-transform: translateX(50vw); transform: translateX(50vw); } .nav-button-close, body:target .nav-button-open { display: none; } .nav-button-open, body:target .nav-button-close { display: block; }
} /* end of small screen media query */
/* Global deco */
* { box-sizing: border-box;
}
html { font-size: 62.5%;
}
body { margin: 0; padding: 0; color: #fff; font-size: 1.6em; font-family: arial, sans-serif;
}
a { color: #fff;
}
.wrapper { padding: 2rem; background-color: #eee; color: #333;
}
.sidebar { padding-top: 1em; background: #333; color: #ddd;
}
nav a { display: block; padding: .7em; margin-bottom: 2px; text-decoration: none; background: rgba(255,255,255, 0.1);
}
Push left CSS Nav - Script Codes
Push left CSS Nav - Script Codes
Home Page Home
Developer Raphael Goetter
Username raphaelgoetter
Uploaded September 19, 2022
Rating 3
Size 2,630 Kb
Views 24,288
Do you need developer help for Push left CSS Nav?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Raphael Goetter (raphaelgoetter) Script Codes
Name
Multicolumns 1
KNACSS Grids with Sass
Infobulles en CSS
KNACSS flexbox classes
Push Left JS Navigation
CSS3 nav
Flexbox form
KNACSS layout
Multicolumns breaks
Flexbox Grids
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!