The result should be a hamburger menu with slides in from the right on clicking the icon.
This is the code for the main menu where I translate it to the right 100% and when I click on the icon it translates back to 0% bringing it on screen
HTML
<div id="mobilenav" class="mobile-nav">
<div class="mobile-nav-header">
</div>
<div class="hamburger">
<button (click)="closeMenu()">
<img src="../../assets/icons/close-menu.svg" alt="" />
</button>
</div>
</div>
<ul class="links">
</ul>
<div class="socials">
</div>
</div>
.mobile-nav {
height: 100vh;
top: 0;
position: absolute;
transform: translateX(100%);
right: 0;
transition: 0.5s;
background: white;
z-index: 99;
}
The JS
openMenu() {
var mobile_menu = document.getElementById('mobilenav');
mobile_menu!.style.transform = 'translateY(0px)';
// mobile_menu!.style.display = 'block';
}
closeMenu() {
var mobile_menu = document.getElementById('mobilenav');
mobile_menu!.style.transform = 'translateX(100%)';
// mobile_menu!.style.display = 'none';
}
The issue is that when closed, it is still possible for the user to scroll horizontally to the right. That should not be possible as the menu should be hidden and there should be no possibility to scroll horizontally.
The simplest way is to replace position: absolute with position: fixed. This fixes the problem but still allows the page to be horizontally scrollable if needed.
Alternatively, you could add
body {
overflow-x: hidden;
}
to remove the horizontal scrollbar.
Related
I made a simple slide show with divs stacked one on top of the other.
I switch the div on display with display:none or display:block.
But when I add animations, I encounter a problem. The fade in works, but I have no idea how to fade out a vanishing slide. The slide just disappears and I can't get any fade out method that I have found to work. Where is the error please?
let pages = document.getElementsByClassName("page");
let buttons = document.getElementsByClassName("page-button");
let currentPage = 0;
pages[currentPage].style.display = "block";
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", () => changePage(i));
}
function changePage(k) {
pages[currentPage].style.display = "none";
pages[k].style.display = "block";
currentPage = k;
}
.content-container {
display: flex;
height: 90vh;
}
.page {
position: absolute;
display: none;
width: 100%;
height: 100%;
animation: fadeIn 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#slideshow {
flex-grow: 1;
position: relative;
}
<div class="content-container">
<div id="slideshow">
<div class="page" style="background-color: red;"></div>
<div class="page" style="background-color: green;"></div>
<div class="page" style="background-color: blue;"></div>
</div>
<button class="page-button">1</button>
<button class="page-button">2</button>
<button class="page-button">3</button>
</div>
For animation I use the library called Animate.css. Take a look at the following link:
https://animate.style/
You can install this library with NPM:
npm install animate.css --save
Then you can use this library like this:
<div class="page animate__fadeOutLeft" style="background-color: green;">
The issue is that you are using a display none, which will instantly remove the coloured block and fade in from white.
On click set the background colour of the 'content-container' to the item's colour to be removed, giving the impression of fading in from that colour.
var contentContainer = document.getElementsByClassName("content-container");
var replaceColour = pages[k].styles.getPropertyValue("background-color")
contentContainer.style.backgroundColor = replaceColour;
I am working on a small site, where I am trying to learn how different navigation menus can interact with each other with html, css and js. My issue is that my top navigation bar does not interact correctly with my sidebar navigation. When i add the sticky class to my top navigation bar with js (= scrolling) and sidenavigation is open (= margin left on sidenavigation is 350px) my top navigation jumps out of the page. Is there a way to compensate for this?
Here is my js for fixed top navigation menu when scrolling:
let sectionMain = document.getElementById("section-main");
let navbar = document.getElementById("navbar");
let navPos = navbar.getBoundingClientRect().top;
window.addEventListener("scroll", e => {
let viewportHeight = window.innerHeight;
let scrollPos = window.scrollY;
if (scrollPos > navPos) {
navbar.classList.add('sticky');
sectionMain.classList.add('navbarOffsetMargin');
} else {
navbar.classList.remove('sticky');
sectionMain.classList.remove('navbarOffsetMargin');
}
});
window.addEventListener("scroll", e => {
let viewportHeight = window.innerHeight;
let scrollPos = window.scrollY;
if (scrollPos > navPos) {
sidenavid.classList.add('sticky');
} else {
sidenavid.classList.remove('sticky');
}
});
CSS for top navigation:
#navbar.sticky {
position: fixed;
top: 0;
box-shadow: 5px -1px 6px 5px #dad7d7;
clip-path: inset(-5px -5px -200px -0px);
background-color: #e3f4f1;
transition: 0.5s;
z-index: 1000;
}
As mentioned I also have a sidenavigation bar, that is opened/closed (width 0/350px) with a button:
function toggleNav() {
var element = document.getElementById("sidenavid");
if (element.style.width == "350px") {
element.style.width = "0px";
} else {
element.style.width = "350px";
}
var element = document.getElementById("main");
if (element.style.marginLeft == "350px") {
element.style.marginLeft = "0px";
} else {
element.style.marginLeft = "350px";
}
HTML:
<body>
<header>
<div id="sidenavid" class="sidenavclass">
<a href="#" class="closeicon">
<h1 class="h1-top" aria-hidden="true">h1 title</h1>
</a>
Menu
Menu
Menu
Menu
</div>
<div id="main">
<nav id="navbar">
<span onclick="toggleNav()">
<div class="navbar-brand">
<i onclick="toggleIcon(this)" class="fa fa-bars fa-2x"></i>
</div>
</span>
<ul class="nav-list" id="navlist">
<li class="nav-list-items">Home</li>
<li class="nav-list-items dropdown">Products
<div class="dropdown-content">
Product #1
Product #2
</div>
</li>
<li class="nav-list-items dropdown">Information
<div class="dropdown-content">
Courses
Tutorials
</div>
</li>
<li class="nav-list-items">Contact</li>
</ul>
</nav>
<section id="section-main">
<div class="article-container">
<article class="section-container">
<h1>This is the title of the section</h1>
<p class="section-text">
Here is the main section text in a paragraph tag that is supposed to xyz
</p>
</article>
</div>
</section>
<section id="section-main">
<div class="article-container">
<article class="section-container">
<h1>This is the title of the section</h1>
<p class="section-text">
Here is the main section text in a paragraph tag that is supposed to xyz
</p>
</article>
</div>
</section>
</div>
</header>
<script src="https://kit.fontawesome.com/9beebcdd4b.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>
My top navigation bar does not seem to work with my side bar, as it is pushed out of the viewport when it is scrolling (class sticky is added) and side bar is open (width of sidenav 350px. I tried compensating by adding following if statement to my code, but it does not seem to work as intended.
var element = document.getElementById("navbar");
if (main.style.marginLeft == "350px" || navbar.classList.contains('sticky')) {
element.style.width = "calc(100% - 350px)";
} else {
element.style.width = "100%";
}
Here is full jsfiddle: https://jsfiddle.net/louvalman/xf8kwrv9/6/ (site only works in full screen so far)
Thanks in advance to anyone willing to help out a newbie!
I think it is pretty funny you add a class called sticky but it sets the position value of the #navbar to fixed.
If you would set the position to sticky instead of fixed you would already almost get the result that you are after.
The only thing to change is then to add a space between the content of the navbar using justify-content: space-between. You can use this instead of the margin auto on the nav list class you've set.
#navbar {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
position: relative;
}
#navbar.sticky {
position: sticky;
top: 0;
box-shadow: 5px -1px 6px 5px #dad7d7;
clip-path: inset(-5px -5px -200px 0px);
background-color: #e3f4f1;
transition: 0.5s;
z-index: 1000;
}
I am playing with jquery recently and right now - trying to get animations to work.
Whole idea is basically a fullscreen slider. We have few sections with position absolute and height 100% of the document - in jquery we're playing with z-index. It's quite simply, but I can't figure out how to make a proper slide left and right animations. It's always breaking.
$(document).ready(function() {
var windowWidth = $(window).width();
var slideCount = $('.slide').length;
$('button#next').on('click', function() {
var slideActive = $('.slide.active');
var nextSlide = slideActive.next('.slide');
nextSlide.addClass('active').animate({
'z-index' : '2',
'left' : windowWidth
},500);
slideActive.removeClass('active');
});
});;
body, html {
height: 100%;
position: relative;
}
body {
font-size: 14px;
color: #fff;
}
nav {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 99;
}
section {
height: 100%;
display: flex;
align-items: center;
position: absolute;
right: 0;
left: 0;
}
section#home {
background-color: #2c3e50;
}
section#aboutMe {
background-color: #e74c3c;
}
section#smthElse {
background-color: #1abc9c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<button id="prev">Back</button>
<button id="next">Next</button>
</nav>
<section id="home" class="slide active">
<div class="container">
<p>1</p>
</div>
</section>
<section id="aboutMe" class="slide">
<div class="container">
<p>2</p>
</div>
</section>
<section id="smthElse" class="slide">
<div class="container">
<p>3</p>
</div>
</section>
Before that I tried just by adding class with css defined in .css and animating it (jquery ui) but effect was more or less the same.
All I want to achive is a simple slide functions of my sections.
Example behaviour: http://codepen.io/jibbon/pen/BoisC
Also, I am not looking for ready solutions as I need as simple code as possible to learn and develop it in my way.
Thank you guys!
There are many things that you can improve in your code to achieve what you want.
First, active class is set to a slide but isn't applied any special CSS rule, as you set position: absolute to your divs, you must set z-index to overlap one above other, initializing your app.
Here there is a idea, how to implement what you want:
https://jsfiddle.net/nz2hL6vn/1/
I have a mobile website which has a simple side menu bar with scroll, when scrolling the menu on safari it lags a lot (struggle to scroll).
here is the html:
<body>
<div id="menu_background" onclick="toggleMenu()"></div>
<div id="menu">
<ul>
<li>
<div>item 1</div>
</li>
//other items goes here
</ul>
</div>
<div id="global_container">
//some content goes here
</div>
</body>
here is the css:
#menu
{
position: absolute;
top: 0px;
bottom: 0px;
z-index: 100;
overflow: hidden;
display:none;
width: 0%;
padding: 1%;
}
and the javascript :
var menuShown = false;
function toggleMenu(){
var menu = document.getElementById("menu");
var menuBackground = document.getElementById("menu_background");
var globalContainer = document.getElementById("global_container");
if(!menuShown){
menuShown = true;
menuBackground.style.visibility = "visible" ;
menu.style.width="60%";
menu.style.display="block";
menu.style.overflowY="auto";
globalContainer.style.position="fixed";
globalContainer.style.right="62%";
}
else{
menuShown = false;
menuBackground.style.visibility = "hidden" ;
menu.style.width="0%";
menu.style.display="none";
menu.style.overflowY="hidden";
globalContainer.style.position="static";
}
}
I didn't include the rest of html where there is a menu button with onclick action that trigger the toggleMenu() javascript function.
Also I don't want to use ready made jQuery plugins or other solutions.
any suggestions ?
Solved using the following in the css:
rather than using the following in the css #menu selector
overflow: hidden;
use this instead
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
I have a div class called overlay, it's just a transparent box. When you hover over the live-box div, the span class should disappear (right now its going under the overlay box), and the text "test" appears and an arrow under that appears (working).
So basically everything works but the text in the span jumps under the overlay div, I have tried a few jquery attempts, but because of the fade in/fade out, even if I do a toggle visible class,the text still jumps under the overlay div for half a second.
<div class="live-box-outer">
<div class="live-box" id="CMS">
<div class="overlay" style="display: none">
test
<div class="arrow">
</div>
</div>
<span class="long-span">Content Management</span>
</div>
</div>
My javascript
$('.live-box').hover(function () {
$(this).not('.active, .invisible').find('.overlay').fadeIn(300);
}, function () {
$(this).not('.active, .invisible').find('.overlay').fadeOut(300);
});
my css
.overlay
{
top: 0;
left: 0;
width: 134px;
height: 134px;
z-index: 2;
position:relative;
background: url(../img/overlay.png) repeat;
}
I'm guessing you have:
.live-box-outer {
position: relative;
}
.long-span {
z-index: 1;
}
What you want then is for the overlay and long-span to both be position the top left of live-box-outer. Try changing the two such that
.overlay, .long-span {
top: 0;
left: 0;
position:absolute;
}
Then when overlay fades in it will cover long-span. The other option is to fade/hide long-span at the same time you fade/show overlay.