I'm trying to create a responsive navbar, but not all the items from my ul are showing,
PROBLEM:
console.log('works')
document.querySelector('.container__hamburger').addEventListener('click', ()=>{
document.querySelector('.container__navbar').classList.toggle('showMenu')
})
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
background-color: #2b2f33;
width: 100%;
height: 65px;
}
.container__navbar {
display: flex;
font-family: "Roboto", sans-serif;
width: 100%;
}
.container__logo {
display: inline;
width: 25%;
margin-right: 30px;
margin-left: 10px;
}
.navbar__list {
display: flex;
width: 100%;
list-style: none;
align-items: center;
color: #ffffff;
}
.list__item{
margin-right: 30px;
}
.container__hamburger {
display: none;
color: #ffffff;
align-self: center;
}
#media (max-width: 890px) {
.container {
position: fixed;
}
.container__navbar {
position: fixed;
height: 100%;
left: 0;
top: 65px;
transition: 0.5s;
background-color: #2b2f33;
transform: translateX(-100%);
width: 250px;
}
.showMenu {
transform: translateX(0);
}
.navbar__list {
display: block;
overflow-x: hidden;
overflow-y: scroll;
}
.container__hamburger {
display: block;
margin-left: auto;
margin-right: 30px;
}
.list__item {
width: 100%;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<img
class="container__logo"
src="assets/images/gamezonia.png"
alt="logo"
/>
<nav class="container__navbar">
<ul class="navbar__list">
<li class="list__item">Home</li>
<li class="list__item">Category 1</li>
<li class="list__item">Category 2</li>
<li class="list__item">Category 3</li>
<li class="list__item">Contact</li>
<li class="list__item">Item</li>
<li class="list__item">Item2</li>
<li class="list__item">Item3</li>
<li class="list__item">Item4</li>
<li class="list__item">Item5</li>
<li class="list__item">Item6</li>
</ul>
</nav>
<div class="container__hamburger">
<i class="fas fa-bars"></i>
</div>
</div>
<!-- FONT AWESOME -->
<script
src="https://kit.fontawesome.com/96fadf0e69.js"
crossorigin="anonymous"
></script>
<!-- FONT AWESOME -->
<script src="./index.js"></script>
</body>
</html>
You've dropped the .container__navbar down the viewport by 65 pixels. You need to take this off the 100% height using height:calc(100% - 65px);
console.log('works')
document.querySelector('.container__hamburger').addEventListener('click', ()=>{
document.querySelector('.container__navbar').classList.toggle('showMenu')
})
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
background-color: #2b2f33;
width: 100%;
height: 65px;
}
.container__navbar {
display: flex;
font-family: "Roboto", sans-serif;
width: 100%;
}
.container__logo {
display: inline;
width: 25%;
margin-right: 30px;
margin-left: 10px;
}
.navbar__list {
display: flex;
width: 100%;
list-style: none;
align-items: center;
color: #ffffff;
}
.list__item{
margin-right: 30px;
}
.container__hamburger {
display: none;
color: #ffffff;
align-self: center;
}
#media (max-width: 890px) {
.container {
position: fixed;
}
.container__navbar {
position: fixed;
height: calc(100% - 65px);
left: 0;
top: 65px;
transition: 0.5s;
background-color: #2b2f33;
transform: translateX(-100%);
width: 250px;
}
.showMenu {
transform: translateX(0);
}
.navbar__list {
display: block;
overflow-x: hidden;
overflow-y: scroll;
}
.container__hamburger {
display: block;
margin-left: auto;
margin-right: 30px;
}
.list__item {
width: 100%;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<img
class="container__logo"
src="assets/images/gamezonia.png"
alt="logo"
/>
<nav class="container__navbar">
<ul class="navbar__list">
<li class="list__item">Home</li>
<li class="list__item">Category 1</li>
<li class="list__item">Category 2</li>
<li class="list__item">Category 3</li>
<li class="list__item">Contact</li>
<li class="list__item">Item</li>
<li class="list__item">Item2</li>
<li class="list__item">Item3</li>
<li class="list__item">Item4</li>
<li class="list__item">Item5</li>
<li class="list__item">Item6</li>
</ul>
</nav>
<div class="container__hamburger">
<i class="fas fa-bars"></i>
</div>
</div>
<!-- FONT AWESOME -->
<script
src="https://kit.fontawesome.com/96fadf0e69.js"
crossorigin="anonymous"
></script>
<!-- FONT AWESOME -->
<script src="./index.js"></script>
</body>
</html>
Related
I need move the Logout "button" for bottom in SideBar menu.
body{
background: #526b62;
}
/* Sidebar */
#sidebar-wrapper{
z-index: 1;
position: absolute;
width: 0px;
height: 100%;
overflow-y: hidden;
background: #1c1c1c;/*#2C3E50;*/
/*border: 2px solid red;*/
/*opacity: 0.9;*/
}
#wrapper.MenuDisplayed #sidebar-wrapper{
animation-duration: 2s;
animation-name: side-wrapper;
width: 250px;
}
#wrapper.MenuDisplayed #page-content-wrapper{
animation-duration: 2s;
animation-name: side-content;
padding-left: 250px;
}
.wrapper-reverse{
animation-duration: 2s;
animation-name: side-wrapper-reverse;
}
.content-reverse{
animation-duration: 2s;
animation-name: side-content-reverse;
padding-left: 0px;
}
#keyframes side-content {
from {
padding-left: 0px;
}
to {
padding-left: 250px;
}
}
#keyframes side-content-reverse {
from {
padding-left: 250px;
}
to {
padding-left: 0px;
}
}
#keyframes side-wrapper {
from {
width: 0px;
}
to {
width: 250px;
}
}
#keyframes side-wrapper-reverse {
from {
width: 250px;
}
to {
width: 0px;
}
}
/* Sidebar styling*/
.title-sidebar{
display: flex;
justify-content: center;
font-size: 2em;
color: #ddd;
margin-top: 10px;
}
.sidebar-nav{
padding: 0;
margin-top: 15px;
list-style: none;
}
.sidebar-nav li{
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a{
padding: 10px;
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li :hover{
background: skyblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sidebar2.css" >
<style>
#menu-toggle div {
width: 20px;
height: 2px;
background-color: white;
margin: 6px 0;
}
.sidebar-nav{
height: 100%;
}
#a_logout{
}
</style>
</head>
<body>
<div id="wrapper">
<!--SideBar -->
<div id="sidebar-wrapper">
<h1 class='title-sidebar'>Welcome</h1>
<h1 class='title-sidebar'>USER</h1>
<ul class="sidebar-nav">
<li><a href="/" class='btn text-start'>HomePage</a></li>
<li><a href="#" class='btn text-start'>View</a></li>
<li><a href="/logout" id='a_logout' class='btn text-start' >Logout</a></li>
</ul>
</div>
<!--Contents -->
<div id="page-content-wrapper">
<div class="container-fluid ">
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn btn-success" id="menu-toggle"><div></div>
<div></div>
<div></div></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqkt
iwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click( function(e){
e.preventDefault();
$("#wrapper.MenuDisplayed #page-content-wrapper").addClass("content-reverse");
$("#wrapper.MenuDisplayed #sidebar-wrapper").addClass("wrapper-reverse");
$("#wrapper").toggleClass("MenuDisplayed");
});
</script>
<!-- Booststrap -->
</body>
</html>
How can I do it?
Add
#a_logout{
width: 100%;
position: absolute;
bottom: 0;
}
Add position:relative in <u>
Add position: absolute in Log-out <li>
Also Add top: calc(100vh - 12rem)
hamburger toggler animation doesn't work immediately after i refresh the page, it starts working after i hit it one time. the mainMenu appears without animation the first time i hit the openMenu. i dont understand how its possible working after the second time i hit it. there is something i am missing probably. why is this happening?
const mainMenu = document.querySelector(".mainMenu");
const closeMenu = document.querySelector(".closeMenu");
const openMenu = document.querySelector(".openMenu");
openMenu.addEventListener("click", () => {
mainMenu.style.display = "flex";
mainMenu.style.top = "0";
});
closeMenu.addEventListener("click", () => {
mainMenu.style.top = "-100%";
});
.row .left {
height: 98vh;
background-color: #5a2a19;
}
.row .right {
height: 98vh;
background-color: #ff640b;
}
.row .right nav .openMenu {
font-size: 3em;
margin: 10px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu {
background-color: #ff640b;
height: 100vh;
display: none;
position: fixed;
top: 0;
right: 0;
left: 50%;
z-index: 10;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: top 1s ease;
transition: top 1s ease;
list-style: none;
}
.row .right nav .mainMenu li a {
display: inline-block;
padding: 15px;
text-decoration: none;
color: #5a2a19;
font-size: 1.5em;
font-weight: bold;
}
.row .right nav .mainMenu li a:hover {
color: #e6e8de;
}
.row .right nav .mainMenu .closeMenu {
font-size: 2em;
margin: 20px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu .icons i {
display: inline-block;
padding: 12px;
font-size: 2.2em;
color: #5a2a19;
cursor: pointer;
}
.row .right nav .mainMenu .bi-facebook:hover {
color: #4267b2;
}
.row .right nav .mainMenu .bi-instagram:hover {
color: #e1306c;
}
/*# sourceMappingURL=style.css.map */
<!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" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Bees cafe</title>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
<script src="js/index.js" defer></script>
</head>
<body>
<header>
<div class="row">
<div class="col-12 col-md-6 left"></div>
<div class="col-12 col-md-6 right">
<nav>
<div class="openMenu"><i class="bi bi-list"></i></div>
<ul class="mainMenu">
<li>lala</li>
<li>lala</li>
<li>lala</li>
<div class="closeMenu"><i class="bi bi-x-lg"></i></div>
<span class="icons">
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
</span>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
If we are setting display to flex when opening for .mainMenu, but never when closing, we might as well set it to flex by default. This fixes the initial problem, but causes the menu to be open by default, so we can fix this by adding the same styling we add when closing, to the initial css (setting top: -100%; in .mainMenu).
const mainMenu = document.querySelector(".mainMenu");
const closeMenu = document.querySelector(".closeMenu");
const openMenu = document.querySelector(".openMenu");
openMenu.addEventListener("click", () => {
mainMenu.style.top = "0";
});
closeMenu.addEventListener("click", () => {
mainMenu.style.top = "-100%";
});
.row .left {
height: 98vh;
background-color: #5a2a19;
}
.row .right {
height: 98vh;
background-color: #ff640b;
}
.row .right nav .openMenu {
font-size: 3em;
margin: 10px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu {
background-color: #ff640b;
height: 100vh;
display: flex;
position: fixed;
top: -100%;
right: 0;
left: 50%;
z-index: 10;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: top 1s ease;
transition: top 1s ease;
list-style: none;
}
.row .right nav .mainMenu li a {
display: inline-block;
padding: 15px;
text-decoration: none;
color: #5a2a19;
font-size: 1.5em;
font-weight: bold;
}
.row .right nav .mainMenu li a:hover {
color: #e6e8de;
}
.row .right nav .mainMenu .closeMenu {
font-size: 2em;
margin: 20px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu .icons i {
display: inline-block;
padding: 12px;
font-size: 2.2em;
color: #5a2a19;
cursor: pointer;
}
.row .right nav .mainMenu .bi-facebook:hover {
color: #4267b2;
}
.row .right nav .mainMenu .bi-instagram:hover {
color: #e1306c;
}
/*# sourceMappingURL=style.css.map */
<!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" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Bees cafe</title>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
<script src="js/index.js" defer></script>
</head>
<body>
<header>
<div class="row">
<div class="col-12 col-md-6 left"></div>
<div class="col-12 col-md-6 right">
<nav>
<div class="openMenu"><i class="bi bi-list"></i></div>
<ul class="mainMenu">
<li>lala</li>
<li>lala</li>
<li>lala</li>
<div class="closeMenu"><i class="bi bi-x-lg"></i></div>
<span class="icons">
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
</span>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
I am trying to create a collapse navbar. I was wondering if you guys can check the code because whenever I refresh the website nothing happens and the console does not say any errors are in the code. The HTML, CSS, and JavaScript code are below. I would appreciate if you can look over it and give me feedback so that I can correct my mistake. Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Welcome to my Portfolio</title>
</head>
<body>
<header class="index-header">
<a href="index.html" class="pic-link"
><img src="logo/logo.png" alt="" class="pic"
/></a>
<section class="container">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</section>
<nav class="index-nav">
<ul class="ul-index">
<li class="li-index">Home</li>
<li class="li-index">About</li>
<li class="li-index">Contact</li>
<li class="li-index">Portfolio</li>
</ul>
</nav>
<main class="index-main">
<img src="img/banner.png" alt="" class="main-img" />
</main>
</header>
<section id="home"></section>
<section id="about"></section>
<section id="contact"></section>
<section id="portfolio"></section>
<section id="case"></section>
</body>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"
></script>
<script src="js/main.js"></script>
</html>
#media screen and (min-width: 360px) {
* {
box-sizing: border-box;
}
.index-header {
width: 100%;
height: 100px;
background-color: #569188;
}
.index-header .pic-ink {
display: block;
}
.index-header .pic {
width: 100px;
height: 100px;
}
.index-header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.index-header .index-nav {
position: absolute;
top: 100px;
right: 0;
background-color: #569188;
width: 40vw;
height: 40vh;
z-index: 3;
opacity: 0;
}
.index-nav .ul-index {
display: flex;
flex-direction: column;
}
.ul-index .li-index {
display: flex;
justify-content: center;
padding: 15px;
font-size: 18px;
}
.ul-index .li-index .a-index {
text-decoration: none;
color: #111;
font-weight: 900;
}
.index-main {
}
.index-main .main-img {
width: 100vw;
height: 200px;
margin-bottom: 20px;
}
}
function showNav() {
let openBtn = document.querySelector(".container");
openBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "40vw";
document.querySelector(".index-nav").style.height = "40vh";
document.querySelector("index-nav").style.opacity = "1";
showNav();
});
}
function hideNav() {
let closeBtn = document.querySelector(".container");
closeBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "0";
document.querySelector(".index-nav").style.height = "0";
document.querySelector(".index-nav").style.opacity = "0";
hideNav();
});
}
There are a couple of things that need attention here. You should enclose the styling and javascript codes inside <style> and <script> tags if you want to keep them all in one file.
Also, see the modifications to the showNav and hideNav functions.
document.querySelector("index-nav") -> document.querySelector(".index-nav")
The class should be preceded by a .
showNav should call hideNav after execution to achieve the toggle event
function showNav() {
let openBtn = document.querySelector(".container");
openBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "40vw";
document.querySelector(".index-nav").style.height = "40vh";
document.querySelector(".index-nav").style.opacity = "1";
hideNav();
});
}
function hideNav() {
let closeBtn = document.querySelector(".container");
closeBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "0";
document.querySelector(".index-nav").style.height = "0";
document.querySelector(".index-nav").style.opacity = "0";
showNav();
});
}
#media screen and (min-width: 360px) {
* {
box-sizing: border-box;
}
.index-header {
width: 100%;
height: 100px;
background-color: #569188;
}
.index-header .pic-ink {
display: block;
}
.index-header .pic {
width: 100px;
height: 100px;
}
.index-header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.index-header .index-nav {
position: absolute;
top: 100px;
right: 0;
background-color: #569188;
width: 40vw;
height: 40vh;
z-index: 3;
opacity: 0;
}
.index-nav .ul-index {
display: flex;
flex-direction: column;
}
.ul-index .li-index {
display: flex;
justify-content: center;
padding: 15px;
font-size: 18px;
}
.ul-index .li-index .a-index {
text-decoration: none;
color: #111;
font-weight: 900;
}
.index-main {
}
.index-main .main-img {
width: 100vw;
height: 200px;
margin-bottom: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Welcome to my Portfolio</title>
</head>
<body onload="showNav()">
<header class="index-header">
<a href="index.html" class="pic-link"
><img src="logo/logo.png" alt="" class="pic"
/></a>
<section class="container">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</section>
<nav class="index-nav" >
<ul class="ul-index">
<li class="li-index">Home</li>
<li class="li-index">About</li>
<li class="li-index">Contact</li>
<li class="li-index">Portfolio</li>
</ul>
</nav>
<main class="index-main">
<img src="img/banner.png" alt="" class="main-img" />
</main>
</header>
<section id="home"></section>
<section id="about"></section>
<section id="contact"></section>
<section id="portfolio"></section>
<section id="case"></section>
</body>
</html>
I am learning (just began) jQuery and now I want to make a menu like on this site
I mean, I want the menu to slide down out of the viewport to the header, just like in template in the link.
I tried to look at jQuery API documentation, some videos on YT about menus etc, but I did not find anything relevant.
Can anyone please learn me, how to do this?
Thank you very much
PS: I just have this:
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
Use translateY(); css class and jQuery to toggle classes.
This code snippet should get you where you need to be! It will need a bit of editing to fit your needs.
I've added a div called .offsite-canvas that houses your "offscreen" container. When you press the menu toggle button, jQuery toggles a class that puts the offscreen container in view for the user.
$( ".menu-toggle" ).click(function() {
$(".offsite-canvas").toggleClass("open");
});
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
.offsite-canvas {
position: relative;
transform: translateY(-400px);
transition: all .5s;
z-index: 100;
}
.offsite-canvas.open {
position: relative;
transform: translateY(0);
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.offcanvas {
display: flex;
float: none;
z-index: 100;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="offsite-canvas">
<ul class="offcanvas">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
I would suggest if you want to make a nav menu that comes onto the screen when a button is clicked, create the menus as normal, and then place it off the screen on either the left or the right by using translateX() in css.
From that point on, when the button is clicked, Toggle a class that would translate the menu one the x axis so that it is visible.
i'm trying to insert this tab box in my section tag.. from this website http://www.9bitstudios.com/2012/11/create-a-responsive-tab-box-using-jquery-and-css/
source code download link: http://www.9bitstudios.com/demos/blog/tab-box/tab-box.zip
here is my html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Librarian's corner</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/nav-menu.css">
<link rel="stylesheet" type="text/css" href="css/body.css">
</head>
<body >
<div class="big-wrapper">
<div class="form-nav-menu">
<nav>
<ul>
<li><a id="active" href="adduser.html">ADD USER</a></li>
<li><a class="in-active" href="#">EDIT USER</a></li>
<li><a class="in-active" href="#">DELETE USER</a></li>
<li><a class="in-active" href="#"> VIEW USER</a></li>
</ul>
</nav>
</div>
<header>
<h1>The Librarian's corner</h1>
</header>
<section>
> insert tab box here <
</section>
<footer>
<h1>this is footer</h1>
</footer>
</body>
</html>
and my css code filename: nav-menu.css
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
background: orange;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
body {
display: block;
width: 100%;
}
header {
width: 100%;
background: rgba(0, 0, 12, 1); /* Fallback */
background-color: rgba(12, 12, 12, 0.5);
margin: 0;
}
header h1 {
text-align: center;
line-height: 400px;
z-index: 99;
color: #fff;
font-size: 50px;
font-family: Comic Sans, Comic Sans MS, cursive;
text-shadow: rgb(3, 3, 3) 4px 4px 4px;
height: auto;
}
section {
height: auto;
background: white;
width: 100%;
margin-top: 0px;
}
footer {
height: 150px;
background: black;
width: 100%;
margin-top: 0px;
}
.form-nav-menu {
z-index: 99;
position: fixed;
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
.form-nav-menu nav {
width: 100%;
height: 70px;
}
.form-nav-menu nav ul{
width: 100%;
height: 70px;
list-style-type: none;
}
.form-nav-menu nav ul li{
height: 70px;
width: 120px;
display: inline-block;
float: right;
}
the problem is when i trying to insert the css tab box code for the tab box located in section tag, the footer background dis align...
im wondering why, why the footer background dis aligned.. my body background is orange and the footer is black... as we can see, the black color is in the top..
I think you may need to add a min-height to your "section" tag since you've added that container:
section {
height: auto;
**min-height:300px;**
background: white;
width: 100%;
margin-top: 0px;
}