please help me with the implementation of the drop-down menu from the list. Now, for practice, I make a site using the Bootstrap 4 library, and I encountered such a problem when clicking on any of the buttons, the list only appears from the first button, but it is necessary that when you click on any of the buttons a nested list will drop out. Thanks!
let getList = document.querySelectorAll('.sideBtn');
for(let a of getList) {
console.log(a);
a.addEventListener('click' , showList);
}
function showList () {
let getHide = document.querySelector('.hide');
console.log(getHide);
for (let i = 0; i < 1; i++) {
if(getHide.style.display == 'block') {
getHide.style.display = 'none';
} else {
getHide.style.display = 'block';
}
}
}
/*for(let b of getHide) {
console.log(b);
if(b.style.display == 'none') {
b.style.display = 'block';
} else {
b.style.display = 'none';
}
}*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
.sidebar {
position: fixed;
width: 250px;
height: 100%;
background: #042331;
transition: all .5s ease;
}
.sidebar ul {
list-style-type: none;
}
.sidebar ul li a {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
font-size: 20px;
color: white;
padding-left: 40px;
box-sizing: border-box;
border-bottom: 1px solid black;
border-top: 1px solid rgba(255,255,255,.1);
transition: .4s;
text-decoration: none;
}
ul li:hover a {
padding-left: 50px;
}
.sidebar ul a i {
margin-right: 16px;
}
.hide {
display: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<section class="sidebar">
<ul>
<li class="sideBtn">
<a href="#">
<i class="fas fa-tv"></i>
Сериалы
</a>
<ul class="hide">
<li><i class="fas fa-star"></i>Лучшие</li>
<li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
</ul>
</li>
<li class="sideBtn">
<a href="#">
<i class="fas fa-film"></i>
Фильмы
</a>
<ul class="hide">
<li><i class="fas fa-star"></i>Лучшие</li>
<li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
</ul>
</li>
</ul>
</section>
<script src="scritp.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Related
i'm new in JavaScript Programming. I have some problem. I added some picture that i want to be slideshow with previous and next buttons.
const carouselSlide = document.querySelector('.carouselImage');
const carouselImages = document.querySelectorAll('.carouselImage img');
//Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
//Counter
let counter = 1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
nextBtn.addEventListener('click',()=>{
carouselSlide.style.transform = 'transform 0.4s ease-in-out';
counter++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
First image and last image are duplicated becouse I want smoothness in this.
Look on the HTML Code
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Benedykt Borowski</title>
<meta name="description" content="Młody człowiek cieszącym się życjem"/>
<meta name="keyword" content="Młody, blog, programista, cieszący się życiem"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link href="CSS/styleshets.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;700&display=swap" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap');
</style>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="ParentDiv">
<div id="IndexName">
<h1>Banedykt Borowski</h1>
</div>
<div class="Menu-side-bar" id="IndexMenu">
<ul class="active"> Home</ul>
<li>About me
<div class="drop-down-menu">
<ul>
<li>My bedroom</li>
<li>My workspace</li>
</ul>
</div>
</li>
<li>My travels</li>
<li>My work</li>
<li>My Studing</li>
</div>
<div id="indexText>">
<div id="indexFirstWords">
<p>Witam,<br>
Jestem młodym człowiekiem chcącym pokazać wszystkim ludziom kim jestem,
co robie, jak korzystam z życia i oczywiście jak żyje.</p>
<p>Odrazu odsyłam do zakładek po lewej stronie! <br>
Tam dowiecię się o mnie trochę więcej :D</p>
<p>A jeżeli chcecie poczytać odrazu to na dole pare rzeczy!</p>
<p> Może zacznijmy od moich stanowisk które posiadałem przez większość życia</p>
</div>
<div class="carouselSlide">
<div class="carouselImage">
<img src="./img/setup/FifthPicOfSetup.png" id="LastClone" alt="">
<img src="./img/setup/FirstPicOfSetup.jpg" alt="">
<img src="./img/setup/SecondPicOfSetup.jpg" alt="">
<img src="./img/setup/ThirdPicOfSetup.jpg" alt="">
<img src="./img/setup/FourthPicOfSetup.png" alt="">
<img src="./img/setup/FifthPicOfSetup.png" alt="">
<img src="./img/setup/FirstPicOfSetup.jpg" id="FirstClone" alt="">
</div>
</div>
<button id="prevBtn">Previous</button>
<button id="nextBtn">Next</button>
</div>
</div>
</body>
</html>
And CSS file:
.Menu-side-bar{
background-color: aliceblue;
list-style-type:none;
width: 10%;
text-align: left;
font-family: 'Lato', sans-serif;;
font-weight: 300;
}
.Menu-side-bar ul{
padding: 5%;
}
.Menu-side-bar li{
padding: 3%;
}
.Menu-side-bar a{
text-decoration: none;
color: black;
}
.Menu-side-bar li:hover{
color: white;
background-color:green ;
}
.active{
color: white;
background-color:green ;
}
#ParentDiv{
width: 100%;
text-align: center;
}
#IndexName{
display: inline-block;
width: 100%;
color: black;
background-color: aliceblue;
}
#IndexMenu{
float: left;
}
#indexText{
float: left;
}
.drop-down-menu{
display: none;
}
.Menu-side-bar li:hover .drop-down-menu{
display: block;
position: absolute;
background-color: aliceblue;
width: 10%;
padding: 0.1%;
margin-left: -0.3%;
}
#indexFirstWords{
width: 50%;
text-align: center;
display: inline-block;
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.carouselSlide{
width: 27%;
margin: auto;
}
.carouselImage{
display: flex;
width: 100%;
height: 500px;
}
Don't know what happend there, my friend is doing it and it works perfectly.
Thanks for all help!
I want to add dropdown to my current nav bar. I tried this code but dropdown content disappeared and now I don´t have any ideas to edit code to this be working. After my last edit it´s only show dropdown menu but I don´t click on any link. Dropdown, dropbtn was added to previous code. Can you help me with this? Thanks very much!
Here is code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="menu.png" />
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
height: 100%;
background-image: linear-gradient(orange, red);
}
</style>
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: linear-gradient(orange, red);
min-height: 100%;
background-position: full;
background-size: ;
}
</style>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.header {
overflow: hidden;
background-color: orange;
padding: 20px 10px;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: red;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn:hover ~ .dropdown-content {display: block;}
</style>
</head>
<body onload="startTime()">
<div class="header">
<a id="txt" hidden></a>
<img src="https://i.ibb.co/6Nkbdb3/dlhemenu-1-1-1.png" class="logo" title="Odhlásiť sa" alt="MENU logo" width="150" height="50" onclick="window.location='/logout.php'">
 
<a class="dropbtn"><i class="fa fa-user"> </i>Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="header-right">
<a class="active" href="/welcome.php">Úvodné menu</a>
Online hodiny
Testy na vyplnenie
Známky
Rozvrh hodín
Dochádzka
Učebný materiál
Hry
O mne
</div>
</div>
For this case I would suggest using Bootstrap, it will make life easier for you. It mainly allows people to apply some nice functionalities without leaving their HTML.
Here is the link to the docs of bootstrap v4.6 navbars. And here you can find all the docs.
You could try to integrate something as bellow in your website:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" defer></script>
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
</head>
<body>
<!-- Start of navbar -->
<nav class="navbar navbar-expand-sm navbar-dark" style="background:#FFBD35">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<!-- Section_1 link -->
<li class="nav-item active">
<a class="nav-link" href="#">Úvodné Menu<span class="sr-only">(current)</span></a>
</li>
<!-- Section_2 link -->
<li class="nav-item">
<a class="nav-link" href="#">Online hodiny</a>
</li>
<!-- Section_3 link -->
<li class="nav-item">
<a class="nav-link" href="#">Testy na vyplnenie</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-user"></i> Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- End of navbar -->
</body>
</html>
if i understand your question correctly you are searching for a simple dropdown menu with js?
here is a short excample
HTML:
<html lang="en">
<head>
<!-- your header settings -->
<link rel="stylesheet" href="page.css">
</head>
<body>
<header>
<span id="dropbtn">
<span class="fa fa-user"></span>
<span>Dropdown</span>
<span class="fa fa-caret-down"></span>
</span>
<div id="dropdown-content" class="hidden">
Link 1
Link 2
Link 3
</div>
</header>
<script src="menu.js"></script>
</body>
</html>
First in this excample HTML, CSS and JS in seperated Files. Than you get a better overview and your code perhaps will be reuseable in future ;)
CSS:
.hidden {
display:none;
}
JavaScript:
function clickListener_btn(event){
/** #type {HTMLElement} */
let clickedElement = event.currentTarget();
/** #type {HTMLElement} */
let dropDownMenu = document.querySelector('#dropdown-content');
if(dropDownMenu.classList.has('hidden') {
dropDownMenu.classList.remove('hidden');
} else {
dropDownMenu.classList.add('hidden');
}
}
/** #type {HTMLElement} */
let btn = document.querySelector('#dropbtn');
btn.addEventListener('click', clickListener_btn);
Problem No. 1 with your code. You click on a <a> Tag as button. So a new Link will be forced. That automaticly runs a reload if you have no href set. This is because in the sample a simple <span> element is used as button.
i hope this will be helpfully to you.
And another thing. I'm very sure there are tons of questions for dropdown menus in the database. Try to find samples to fix your code.
Another trick can be to do the dropdown only with css but i think this will be to hard for the beginning. ohterwise use your favorite search engine on look for "css only dropdown"
I am trying to create collapsed navbar I did the HTML and CSS part but when I do the javascript part it gives me an uncaught reference error. My code is below I provided the HTML CSS and Javascript. I would appreciate it if someone can please help. Thank you in advance. I provided all the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="btnOpen()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li><a href="index.html">Home</a></li>
<li><a href="pages/about.html">About us</a></li>
<li><a href="pages/contact.html">How to reach me</a></li>
<li><a href="pages/portfolio.html">Portfolio</a></li>
</ul>
</nav>
<section class="sm">
<a href="#"><i class="fab fa-facebook-f" class="facebook"></i></a>
<a href="#"><i class="fab fa-twitter" class="twitter"></i></a>
<a href="#"><i class="fab fa-google" class="google"></i></a>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
</html>
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
nav {
display: flex;
position: absolute;
top: 100;
right: 0;
background-color: #e1e1e1;
width: 40vw;
height: 30vh;
}
nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-decoration: none;
color: #111;
}
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: #111;
font-style: bold;
font-weight: 600;
font-size: 15px;
font-family: Roboto;
}
function openBtn() {
document.getElementsByName("nav").style.width = "40vw";
document.getElementsByName("nav").style.height = "30vh";
}
openBtn();
function closeNav() {
document.getElementsByName("nav").style.width = "0";
document.getElementsByName("nav").style.height = "0";
}
closeNav();
I have added Id to nav and corrected js. Please review.
function btnOpen() {
document.getElementById("nav").style.width = "40vw";
document.getElementById("nav").style.height = "30vh";
}
btnOpen();
function closeNav() {
document.getElementById("nav").style.width = "0";
document.getElementById("nav").style.height = "0";
}
closeNav();
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="btnOpen()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav id='nav'>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
</html>
A couple things need to be fixed, and you don't need any external libraries to do so. First, you have a syntax error on your first div. Your onclick attribute should point to the function openBtn(), not btnOpen().
Secondly, your reference error stemmed from your two functions, openBtn() and closeNav(). When you called document.getElementsByName('nav') you cannot edit the style properties of a NodeList, which is what was being returned. Here's what I changed.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
closeNav()
By using a for-of loop, you can edit each nav element in the HTMLCollection returned by document.getElementsByTagName('nav').
Here's a working example.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
nav {
display: flex;
position: absolute;
top: 100;
right: 0;
background-color: #e1e1e1;
width: 40vw;
height: 30vh;
}
nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-decoration: none;
color: #111;
}
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: #111;
font-style: bold;
font-weight: 600;
font-size: 15px;
font-family: Roboto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="openBtn()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
I've all my CSS and Javascript inside my HTML file on Django which looks as follows:
<!doctype html>
<html lang="en">
<head>
<title>Dashboard</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script>
function toggleSidebar(){
document.getElementsByClassName("sidebar");
}
</script>
<style type="text/css">
.toggle-btn {
position:absolute;
left:180px;
top:70px
}
.toggle-btn span {
display:block;
width:30px;
height:5px;
background:#000000;
margin: 5px 0px;
}
.sidebar {
height:100%;
width:160px;
position: fixed;
z-index:1;
top:0;
let:0;
background-color:#111;
overflow-x: hidden;
padding-top:70px;
}
.sidebar.active {
left:0px
}
.sidebar a {
padding:6px 8px 6px 16px;
text-decoration: none;
font-size:18px;
color: #818181;
display:block;
}
.sidebar a:hover {
color:#ffffff;
}
</style>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
<div class="sidebar">
Categories
Test 1
Test 2
Test 3
Test 4
</div>
</body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="#">Home.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Logout</a>
</div>
</div>
</div>
</nav>
<section class="hero">
<div class="hero-inner">
<h1>Centered Text</h1>
</div>
</section>
</header>
</body>
</html>
I wanted to toggle the sidebar, that means triggering a hide function when someone clicks on the hamburger menu indicated by the spann tag, as you can probably tell by the following:
<script>
function toggleSidebar(){
document.getElementsByClassName("sidebar");
}
</script>
So far it's not working yet as excepted, given that I'm an absolute beginner to CSS & Javascript. I would be super appreciative if someone could point out the things I might have done wrong.
In CodePen
I could fix the toggle functionality, hope this helps:
function toggleSidebar() {
var x = document.getElementsByClassName("sidebar")[0];
if(x.classList.contains('active')) {
x.classList.remove('active')
return;
}
x.classList.add('active')
}
if you check the sidebar div you'll see that class is being added and removed on toogle
You can use jQuery's toggle method. You need to have an onclick event on your .toggle-button with the name of your method (toggleSidebar), so it knows to call it when it's clicked.
You can also add an EventListener to your button instead of onclick.
.toggle-btn {
position: absolute;
left: 180px;
top: 70px;
}
.toggle-btn span {
display: block;
width: 30px;
height: 5px;
background: #000000;
margin: 5px 0px;
}
.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 70px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 18px;
color: #818181;
display: block;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
function toggleSidebar() {
$(".sidebar").toggle();
}
</script>
</head>
<body>
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<div class="sidebar">
Categories
Test 1
Test 2
Test 3
Test 4
</div>
</body>
How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over it? I tride to do this with jquery but i didn't really work.
Here's My HTML and CSS:
<DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="LunchWebsiteCSS.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(
{
previousTop: 0
},
function () {
var currentTop = $(window).scrollTop();
if (currentTop < this.previousTop) {
//$(".sidebar em").text("Up"); /* optional for demo */
$(".nav").css({ opacity: 0.5 });
} else {
//$(".sidebar em").text("Down");
$(".nav").css({ opacity: 0 });
}
this.previousTop = currentTop;
});
});
</script>
<script src="js/jjquery.js"></script>
</head>
<body>
<div class="nav">
<ul>
<div class="btn-group">
<li>Browse
</li>
<li>Sign Up
</li>
<li>BHS Lunch</li>
<li>Log In
</li>
<li>Help
</li>
</div>
</ul>
</div>
</body>
.nav {
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
width: 100%;
/*border: 1px solid black;*/
/*background-color: #AA3C39;*/
background-color: #AA3C39;
/*opacity: 0.7;*/
position: fixed;
}
This is how you can do it.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>100)
$(".nav").css({"background-color" : "rgba(0,0,0,.5)"});
else
$(".nav").css({"background-color" : "rgba(0,0,0,1)"});
});
});
Use CSS to see it back on hover
.nav:hover
{
background-color:rgba(0,0,0,1);
}