Hi all I have a header with a .header-top that I want to hide on scroll which I have managed using the below code, however, I would like the nav to slide up to the top when the .header-top fades out, not just jump to the top. Any ideas?
I have tried adding a transition all to * in my css but that doesnt work, I am unsure what would be the best way to do this
<header>
<div class="header-top">
<img class="logo" src="img/Logo long colour.png" alt="Accountancy Wise Logo">
<i class="fa fa-envelope" aria-hidden="true"></i> email#accountancywise.com
<i class="fa fa-envelope" aria-hidden="true"></i> 07554007114
<form action="subscribe">
<label for="field_email" class="email">
<input class="email-input" id="field_email" name="email" value="" placeholder="Your full email" required="" type="email">
</label>
<div id="submit">
<input class="" name="submit" value="SUBMIT" id="button" type="submit">
</div>
</form>
</div>
<nav>
<div class="menu-button">
<img src="img/Menu.png" alt="">
</div>
<ul>
<li>Home</li>
<li>News</li>
<li>Services</li>
<li>Software Savy</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.header-top').fadeOut(400);
}
else
{
$('.header-top').fadeIn(400);
}
});
header {
position: fixed;
top: 0;
width: 100%;
background: white;
}
.header-top {
#include container;
display: flex;
flex-direction: column;
justify-content: space-between;
#include desktop {
#include container ($width:80%);
}
.logo {
max-width: 40%;
margin: 0 auto;
margin: 10px auto;
}
a {
display: inline-block;
width: 100%;
text-align: left;
color: $brand-blue;
text-decoration: none;
padding: 10px 0;
&:hover {
color: darken($brand-blue, 20%);
}
}
form {
display: flex;
flex-direction: row;
.email-input {
padding: 5px;
margin-right: 10px;
border-radius: 5px;
}
#submit {
#button {
background:$brand-blue;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
&:hover {
background: darken($brand-blue, 20%);
}
}
}
}
}
nav {
background:$brand-blue;
position: relative;
top: 0px;
min-height: 60px;
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
.menu-button {
position: absolute;
top: 4px;
left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: none;
li {
display:block;
a {
color: white;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
}
}
}
}
I fixed this by doing
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.header-top').addClass('header-top-hide');
}
else
{
$('.header-top').removeClass('header-top-hide');
}
});
and then adding the css to match the added class
.header-top-hide {
height: 0px !important;
margin: 0;
padding: 0;
.logo {
display: none;
}
a{
display: none;
}
form {
display: none;
}
}
if you move out of page navbar should hide thats it right?
here jquery to hide navbar
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('nav').hide();
}
if ($(window).scrollTop() < 281) {
$('nav').show();
}
});
this hides navbar if you scroll down. change value in IF condition according to yours.
setTimeout(function() {
$('#myModal').modal();}, 2000);
place your code which hides navbar in the first argument
Related
I am using the onclick method for turning my navbar on/off the problem that I'm having is when I adjust my screen size to mobile view my nav auto turns on.
I'm not very good at JavaScript. I have just started learning it so just fiddled around and absolutely nothing worked for me. Someone told me to put aria-expanded on my HTML so also tried that:
function closeNav() {
document.getElementById("nav_bar").style.height = "0%";
document.getElementById("open-btn").style.display = "inline-block";
document.getElementById("close-btn").style.display = "none";
}
function openNav() {
document.getElementById("nav_bar").style.height = "100%";
document.getElementById("open-btn").style.display = "none";
document.getElementById("close-btn").style.display = "inline-block";
}
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav_bar {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: fixed;
top: 0;
width: 100%;
}
#nav_bar>img {
display: none;
}
.nav {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
.list-item {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
}
.list-item {
position: relative;
}
.list-item::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
.list-item:hover::before {
width: 100%;
}
.list-item:hover {
color: #C4C7C8;
}
#close-btn,
#open-btn {
display: none;
}
#media only screen and (max-width:768px) {
#nav_bar>img {
display: block;
position: absolute;
width: 10em;
left: 20%;
top: 10%;
}
#nav_bar {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow: hidden;
transition: 0.5s;
}
.nav {
position: relative;
display: flex;
flex-direction: column;
gap: 1.2rem;
top: 20%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.list-item {
text-decoration: none;
display: block;
color: #ffdada;
font-size: 1.5rem;
transition: 0.3s;
}
#close-btn,
#open-btn {
display: block;
position: absolute;
right: 25px;
top: 20px;
font-size: 2rem;
color: #818181;
transition: all 0.3s;
}
#close-btn:hover {
color: #fff;
}
<body>
<div id="nav_bar">
<a href="#" id="close-btn">
<i aria-expanded="false" onclick="closeNav()" class="bi bi-x-lg"></i>
</a>
<img src="assests/images/moon.png" alt="" />
<div class="nav">
<a class="list-item" href="#">Home</a>
<a class="list-item" href="#">About Me</a>
<a class="list-item" href="#">Projects</a>
<a class="list-item" href="#">C.V</a>
<a class="list-item" href="#">Contact</a>
</div>
</div>
<a aria-expanded="false" href="#" id="open-btn" onclick="openNav()"><i class="bi bi-list"></i
></a>
<script src="assests/nav.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Make use of the classList.toggle function that adds/remove a class from the Navbar. In this example, I add or remove the class d-none that has the property: display: none in CSS. With that you can hide or show the navbar by pressing the same button with a single line of code:
const BUTTON = document.querySelector('#toggle_navBar');
const NAV = document.querySelector('nav');
BUTTON.addEventListener('click', function() {
NAV.classList.toggle('d-none');
});
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: sticky;
top: 0;
width: 100%;
}
menu {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
nav li a {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
position: relative;
}
nav li a::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
nav li a:hover::before {
width: 100%;
}
nav li a:hover {
color: #C4C7C8;
}
.d-none {
display: none;
}
<nav>
<img src="assests/images/moon.png" alt="" />
<menu>
<li><a class="list-item" href="#">Home</a></li>
<li><a class="list-item" href="#">About Me</a></li>
<li><a class="list-item" href="#">Projects</a></li>
<li><a class="list-item" href="#">C.V</a></li>
<li><a class="list-item" href="#">Contact</a></li>
</menu>
</nav>
<button id="toggle_navBar">Toggle NavBar</button>
A few changes I made were for semantic reasons. You should use semantic tags if possible and have accessibility in mind. Accessibility is also part of SEO-ratings!
I think the basic idea would be to have a button toggle some variable and then update the UI according to the value of that variable.
You can do this in several ways, but here is an example of a simple way to do it:
// Get your toggle button element
const toggle = document.querySelector(".nav-toggle");
// Get your nav element
const nav = document.querySelector(".nav");
// Create a variable to hold the state of your nav
let navIsOpen = false;
// Listen for clicks on your nav toggle button
toggle.addEventListener('click', () => {
// Update the nav state variable
navIsOpen = !navIsOpen;
// run a function that will update the nav "styles"
updateNav();
})
// This function will update the UI state according to the value of the navIsOpen variable. Here you can update all things you need, like your navbar, your toggle button, ...
function updateNav() {
navIsOpen
?
nav.classList.add('nav--is-open') :
nav.classList.remove('nav--is-open');
}
.nav {
margin-top: 1rem;
padding: 1rem;
background-color: lightgrey;
}
.nav--is-open {
background-color: purple;
color: white;
}
<button class="nav-toggle">Toggle nav</button>
<nav class="nav">
Your nav here
</nav>
Recently I uploaded my website online on Github and it came out with some display problems.
I have an Hamburguer menu icon (.toggle - in my code) for widths less than 1210px. When I click in the icon it works fine, displaying the submenu with the items, but when I click in the home button the main page loses the menu icon. I don´t know why.
I've tested it previously before it became public, and it was working fine.
The same thing happens when I click on the a-tower or muda items and then backwards to home, again the icon disappears.
I have already tried to research about that error in specific but didn´t find one particularly similar.
html:
<div class="header">
<div class="menu-one">
<div class="logo">
<img src=".\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class= "toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul id="menu-two" class="hide">
<li class="item">
<a href="./index.html" >Home</a>
</li>
<li class="item" id="proj">
Projects
</li>
<li class="options">
<a href="./Atower.html" >A-Tower</a>
</li>
<li class="options">
Muda
</li>
<li class="item">
About
</li>
<li class="item">
<a href="#Contact" >Contact</a>
</li>
</ul>
</div>
css:
.header {
background-color: rgb(235, 223, 201);
z-index: 100;
top: 0px;
margin: 0 auto;
max-height: 5rem;
position: fixed;
border-bottom-style: double;
display: flex;
justify-content: space-between;
width: 100%
}
.menu-one {
display: flex
}
.logo {
display: flex;
}
.logo img {
height: 100%
}
.lettering {
display: flex;
justify-content: center;
align-items: flex-end;
padding-left: 1%;
}
h6 {
margin-bottom: 1.7%;
font-family: 'calibri';
font-weight: lighter;
letter-spacing: 0.1em;
font-size: 0.8em;
}
h6 .bolder {
font-weight: bold;
}
h6 .smaller {
font-weight: lighter;
}
.toggle {
display: none;
}
a {
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 1px;
font-size: 20px;
color: black
}
#menu-two{
display: flex;
}
.hide {
display: none;
}
li {
list-style: none;
padding: 1em
}
#media only screen and (max-width: 1210px) {
#menu-two {
display: block;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
#proj {
display: none;
}
#menu-two.visible {
opacity: 0.9;
pointer-events: auto;
}
.hide {
background-color: rgb(245, 243, 229);
opacity: 0.95;
position: absolute;
width: 100%;
top: 4rem;
text-align: center;
}
.options {
display: block;
}
.menu-one {
display: flex;
justify-content: space-between;
width: 100%
}
.toggle{
display: initial;
padding-top: 1.5rem;
transform: translate(-10px);
cursor: pointer;
}
.toggle span {
position: relative;
width: 36px;
height: 4px;
display: block;
background-color: black;
margin-bottom: 8px;
transition: 0.5s;
}
.toggle span:nth-child(1) {
transform-origin: left;
}
.toggle span:nth-child(2) {
transform-origin: center;
}
.toggle span:nth-child(3) {
transform-origin: left;
}
.toggle.active span:nth-child(1) {
transform: rotate(45deg);
left: 2px;
}
.toggle.active span:nth-child(2) {
transform: rotate(315deg);
right: 3px;
}
.toggle.active span:nth-child(3) {
transform: scaleX(0);
}
}
js:
$(document).ready(() => {
$('.toggle, .item').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('visible')
})
$('.active').on('click', function() {
$('.toggle').fadeToggle()
})
})
Note: when I resize my browser in my desktop, when it gets smaller, between 870px and 560px the menu burguer stays on the right, and disappears during these dimensions periods.
I have checked your site, it's not a jquery issue. The hamburger icons disappear because of the logo property "flex".
Replace this CSS on your stylesheet, I will fix your issue.
.logo {
display: flex;
flex: 1;
}
when your hamburger menu appears, it's got CSS display: block property so it failed to counter the display: flex.
Let me know Please.
A couple things are going on here. First, some of the links are redirecting you to a new page, without the header code. Second, you have your first click event set up to respond to .toggle and .item. .item refers to your menu items, so you want to remove that target.
$(document).ready(() => {
$('.toggle').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('visible')
})
$('.active').on('click', function() {
$('.toggle').fadeToggle()
})
$('ul#menu-two > li > a').click(function(e){
e.preventDefault();
});
});
#media only screen and (max-width: 1210px) {
#menu-two {
display: block;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
#proj {
display: none;
}
#menu-two.visible {
opacity: 0.9;
pointer-events: auto;
}
.hide {
background-color: rgb(245, 243, 229);
opacity: 0.95;
position: absolute;
width: 100%;
top: 4rem;
text-align: center;
}
.options {
display: block;
}
.menu-one {
display: flex;
justify-content: space-between;
width: 100%
}
.toggle {
display: initial;
padding-top: 1.5rem;
transform: translate(-10px);
cursor: pointer;
}
.toggle span {
position: relative;
width: 36px;
height: 4px;
display: block;
background-color: black;
margin-bottom: 8px;
transition: 0.5s;
}
.toggle span:nth-child(1) {
transform-origin: left;
}
.toggle span:nth-child(2) {
transform-origin: center;
}
.toggle span:nth-child(3) {
transform-origin: left;
}
.toggle.active span:nth-child(1) {
transform: rotate(45deg);
left: 2px;
}
.toggle.active span:nth-child(2) {
transform: rotate(315deg);
right: 3px;
}
.toggle.active span:nth-child(3) {
transform: scaleX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="menu-one">
<div class="logo">
<img src=".\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul id="menu-two" class="hide">
<li class="item">
Home
</li>
<li class="item" id="proj">
Projects
</li>
<li class="options">
A-Tower
</li>
<li class="options">
Muda
</li>
<li class="item">
About
</li>
<li class="item">
Contact
</li>
</ul>
</div>
I have responsive navbar on my project site. When screen width is lower than 968px, the hamburger menu with sliding menu. But when I resize screen again (so 'normal' wide navbar should appear again) navbar dissapears!
I think it's kind of conflict with my JS function's inside my main.js file. Here's the content of it:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1400);
});
$(document).ready(function(){
$(".hamburger").on('click', function(event) {
event.preventDefault();
$(".navigation-list").toggle();
});
});
So i have two functions in JS file. First makes the sliding effect when anchor is clicked. The second one shows/hides the hamburger menu when clicked.
So why navbar is dissapearing?
Here's the link:
https://jsfiddle.net/2s7Lnxb6/
I recognised that it is because of the toggle() function.
By adding another class say hide and you can use toggleClass('hide')
$(document).ready(function(){
$(".hamburger").on('click', function(event) {
event.preventDefault();
$(".navigation-list").toggleClass('hide');
});
});
.topbar{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
.navigation-list {
display: flex;
flex-direction: column;
text-align: center;
list-style: none;
max-height : 300px; /* here */
overflow:hidden; /* here */
transition: all 0.3s linear; /* here */
}
.navigation-list.hide { /* here */
max-height : 0px;
overflow:hidden;
transition: all 0.3s linear;
}
.navigation-list-item.hover {
padding: 10px;
flex: 1;
background: #a6b9cd;
list-style: none;
font-family: "Open Sans", sans-serif;
}
.center-logo {
display: none;
}
.navigation-list-item a {
color: #363636;
text-decoration: none;
font-size: 1em;
}
.navigation-list-item.hover {
transition: 0.1s linear;
}
.navigation-list-item.hover:hover {
background: #f8f8ff;
}
.hamburger-container {
text-align: center;
font-size: 2em;
background-color: #a6b9cd;
}
.hamburger:hover {
cursor: pointer;
}
#media screen and (min-width: 968px) {
.hamburger-container {
display: none;
}
.navigation-list {
display: unset;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
line-height: 70px;
height: 70px;
white-space: nowrap;
}
.navigation-list.hide { /* here */
max-height : 100px;
}
.navigation-list-item {
flex: 1;
background: #a6b9cd;
list-style: none;
font-family: "Open Sans", sans-serif;
}
.navigation-list-item a {
text-decoration: none;
font-size: 1em;
}
.center-logo {
padding: 0;
display: unset;
flex: 1;
width: 100px;
background: #a6b9cd;
border: 5px solid #a6b9cd;
border-radius: 50%;
}
.navigation-list-item.hover {
padding: 0;
transition: 0.3s linear;
}
.hamburger:hover {
cursor: pointer;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topbar clearfix">
<nav class="navigation">
<div class="hamburger-container">
<span>HAMBURGER</span>
</div>
<ul class="navigation-list">
<li class="navigation-list-item hover">Item1</li>
<li class="navigation-list-item hover">Item2</li>
<li class="navigation-list-item hover">Item3</li>
<li class="navigation-list-item"><img src="https://www.elecosoft.com/wp-content/uploads/2014/04/example-logo.png" class="center-logo" alt="page logo"></li>
<li class="navigation-list-item hover">Item4</li>
<li class="navigation-list-item hover">Item5</li>
<li class="navigation-list-item hover">Item6</li>
</ul>
</nav>
</div>
I have a simple website with a simple navigation bar, but it seems like a very daunting task after much research.
When hovering over any of the buttons, it will display a dropdown to show more options.
I have got that working fine, but how would I go about making the dropdown stay when I hover over the contents of the dropdown?
Basically when the cursor leaves the navigation's bar button and onto the dropdown menu, it doesn't disappear.
I read that it's possible with jQuery, but I want to do it in JavaScript alone if it's possible, even if it's lengthy.
The navbar's hover itself works, but whatever I tried to keep the dropdown there when hovering on it, keeps bugging everything out.
This is the code I have, and that I have tried:
document.getElementById("server").onmouseover = function() {
serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
serverMouseOut()
};
function serverMouseOver() {
document.getElementById("serverdropdownbox").className += "animated fadeIn";
};
function serverMouseOut() {
document.getElementById("serverdropdownbox").className += "animated fadeOut";
};
document.getElementById("serverdropdownbox").onmouseover = function() {
serverDropdownMouseOver()
};
document.getElementById("serverdropdownbox").onmouseout = function() {
serverDropdownMouseOut()
};
function serverDropdownMouseOver() {
document.getElementById("serverdropdownbox").style.opacity = "1";
};
function serverDropdownMouseOut() {
document.getElementById("serverdropdownbox").style.opacity = "0";
};
#navbarbox
{
clear: both;
display: block;
width: 100vw;
height: 3.5vw;
padding: 0vw 0 0 0;
margin: 0;
}
#navbar, #navbar ul
{
width: 100vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
margin: 0;
}
#navbar span
{
height: 3.5vw;
display: block;
transform: skewX(15deg);
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3.95vw 1vw 3.95vw;
margin: auto;
text-align: center;
color: red;
font-size: 2.3vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
}
#serverdropdownbox
{
display: block;
opacity: 0;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#serverdropdowncontent
{
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 10.1vw;
}
#serverdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
background-color: white;
}
#server
{
background-color: blue;
}
#communitydropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#communitydropdowncontent
{
list-style-type: none;
width: 19.7vw;
margin: 1vw 0 0 26vw;
}
#communitydropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#community
{
background-color: brown;
}
#storedropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#storedropdowncontent
{
list-style-type: none;
width: 13.6vw;
margin: 1vw 0 0 45.65vw;
}
#storedropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#store
{
background-color: blue;
}
#downloadsdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#downloadsdropdowncontent
{
list-style-type: none;
width: 19.8vw;
margin: 1vw 0 0 59.2vw;
}
#downloadsdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#downloads
{
background-color: brown;
}
#contactdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#contactdropdowncontent
{
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 78.9vw;
}
#contactdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#contact
{
background-color: blue;
}
.animated
{
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
<body>
<!--Giga logo, top left-->
<img id="gigalogo" src="images/gigalogo.png">
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li style="background-color: purple;"><span>Home</span></li>
<li id="server"><span>Servers</span></li>
<li id="community"><span>Community</span></li>
<li id="store"><span>Store</span></li>
<li id="downloads"><span>Downloads</span></li>
<li id="contact"><span>Contact</span></li>
</ul>
</div>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<li id="serverdropdownli">Server List</li>
<li id="serverdropdownli">GigaDB</li>
<li id="serverdropdownli">CS:GO</li>
</ul>
</div>
<div id="communitydropdownbox">
<ul id="communitydropdowncontent">
<li>Events</li>
<li></li>
</ul>
</div>
<div id="storedropdownbox">
<ul id="storedropdowncontent">
<li>Credits</li>
<li>Items</li>
<li>VIP</li>
</ul>
</div>
<div id="downloadsdropdownbox">
<ul id="downloadsdropdowncontent">
<li>TF2</li>
<li>CS:GO</li>
<li>Minecraft</li>
</ul>
</div>
<div id="contactdropdownbox">
<ul id="contactdropdowncontent">
<li>Contact Us</li>
<li>Staff</li>
<li>Steam Group</li>
<li>Appeal Ban</li>
<li>Links</li>
</ul>
</div>
First of all - your HTML structure is invalid. ul tag can have only li as direct child, not a. So ul > a > li must be replaced to ul > li > a.
Second - you don't need JS for such simple menu. Have ul > li > ul as sub-menu and use :hover on ul > li to show your sub-menu.
ul {
padding: 0;
}
li {
white-space: nowrap;
list-style: none;
}
#menu > li {
position: relative;
display: inline-block;
}
#menu > li > ul {
position: absolute;
left: 0;
top: 100%;
min-width: 100%;
opacity: 0;
transition: opacity 200ms ease-in-out;
}
#menu > li:hover > ul {
opacity: 1;
}
<ul id="menu">
<li>Home</li>
<li>
<span>Servers</span>
<ul>
<li>Server 1</li>
<li>Server 2</li>
<li>Server 3</li>
</ul>
</li>
</ul>
Okay so I am working on my new personal website and I have came to making the off canvas menu toggable. How cna I do so?
So far I have:
var mainNav = document.getElementById('menu');
var navToggle = document.getElementById('menu-toggle');
mainNav.classList.add('collapsed');
function mainNavToggle() {
mainNav.classList.toggle('collapsed');
}
navToggle.addEventListener('click', mainNavToggle);
.collapsed {
margin-left: -330px;
}
.navigation {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
height: 100%;
color: #212121;
background-color: #FFFFFF;
transition: all ease-in-out 200ms;
box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4);
}
.navigation ul {
display: flex;
flex-direction: column;
padding: 90px 0 0 30px;
}
.navigation li {
margin-bottom: 30px;
}
.navigation a {
display: inline-block;
font-size: 16px;
font-weight: 500;
}
.navigation i {
vertical-align: top;
margin-right: 10px;
}
.navigation .double-line {
display: inline-block;
line-height: 1.45;
}
.navigation .double-line span {
display: block;
font-size: 12px;
opacity: 0.3;
}
.clicked span {
background-color: #000;
}
.menu-toggle {
background-color: transparent;
border: 0px;
outline: 0px;
cursor: pointer;
position: relative;
z-index: 10;
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
margin: 4px;
background-color: #FFFFFF;
}
<button class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="navigation" role="navigation" id="menu">
<ul>
/* Menu contents */
</ul>
</nav>
But with this code when the page loads you can see the menu being swept to the left, I dont want this.
How can I make my toggle button change colour when the menu is open?
Adding the class collapsed to the nav and removing the initial toggle solves your blinking issue! And toggling an active class on the toggle gets you a grey toggle when the $menu is open! The transition CSS property is optional to make the bg transition from transparent to grey look smooth.
Fiddle: https://jsfiddle.net/mbs1kymv/1/
JS:
var $menu = document.getElementById('menu');
var $toggle = document.getElementById('menu-toggle');
$toggle.addEventListener('click', function()
{
$menu.classList.toggle('collapsed');
$toggle.classList.toggle('active');
});
HTML:
<nav class="navigation collapsed" role="navigation" id="menu"> ... </nav>
CSS:
.menu-toggle {
transition: background-color 0.25s;
}
.menu-toggle.active {
background-color: #CCC;
}