Can I do a wipe transition using CSS?

Can I do a wipe transition using CSS? - javascript

I have the following snippet of example code (I am using React but do not feel like spending time sanitising the actual project code before posting that here):
let menuOpened = false;
document.getElementById('menu-button')
.addEventListener('click', function() {
menuOpened = !menuOpened;
document.getElementById('body').classList.toggle('menu-opened', menuOpened);
document.getElementById('menu').classList.toggle('menu-opened', menuOpened);
});
* {
box-sizing: border-box;
}
body {
margin: 0;
}
body.menu-opened {
overflow-y: hidden;
}
body > * {
width: 100vw;
}
header {
background-color: #6FC5C2;
display: flex;
height: 20vh;
position: sticky;
top: 0;
align-items: center;
justify-content: center;
}
nav {
background-color: #80CAF1;
display: flex;
height: 80vh;
left: 0;
opacity: 0;
padding: 1rem;
position: fixed;
top: 20vh;
transition: all 0.35s ease;
visibility: hidden;
z-index: 20;
align-items: center;
flex-direction: column;
justify-content: center;
}
nav.menu-opened {
opacity: 1;
visibility: visible;
}
a {
color: black;
font-weight: bold;
text-decoration: none;
}
a:not(:last-child) {
margin-bottom: 0.5rem;
}
main {
display: flex;
}
aside {
background-color: #9C9ECF;
display: flex;
flex-basis: 25%;
padding: 3rem 0.5rem;
text-align: center;
justify-content: center;
}
section {
background-color: #F8CFD7;
display: flex;
flex-basis: 75%;
padding: 2rem;
align-items: stretch;
flex-direction: column;
}
article {
border: ridge #80CAF1;
border-width: 3px 3px 0 3px;
display: flex;
font-size: 0.75rem;
min-height: 15vh;
padding: 1rem;
align-items: center;
}
article:last-child {
border-width: 3px;
}
footer {
background-color: #016CBA;
height: 30vh;
}
<body id="body">
<header>
<button id="menu-button" type="button">Menu</button>
</header>
<nav id="menu">
Link 1
Link 2
</nav>
<main id="main">
<aside>Filter Form</aside>
<section>
<article>Article A</article>
<article>Article B</article>
<article>Article C</article>
<article>Article D</article>
<article>Article E</article>
<article>Article F</article>
<article>Article G</article>
<article>Article H</article>
<article>Article I</article>
</section>
</main>
<footer id="footer"></footer>
</body>
Currently, when I click the button to open the navigation menu, the page will disable scrolling and the menu will fade in. When I click the button again, scrolling will be re-enabled and the menu will fade out.
What I actually want is a wipe transition instead of fading, like so:
Using the above image as an analogy, the main page content would be A, and the menu would be B. However, instead of horizontal I want the wipe to be vertical i.e. when I open the menu, the wipe will go from top to bottom, and when I close the menu, the wipe will go from bottom to top. The menu text should not be moving. I want to use the same transition duration and timing function as currently configured.
Is this possible without using JavaScript/React?

Another idea using clip-path
let menuOpened = false;
document.getElementById('menu-button')
.addEventListener('click', function() {
menuOpened = !menuOpened;
document.getElementById('body').classList.toggle('menu-opened', menuOpened);
document.getElementById('menu').classList.toggle('menu-opened', menuOpened);
});
* {
box-sizing: border-box;
}
body {
margin: 0;
}
body.menu-opened {
overflow-y: hidden;
}
body > * {
width: 100vw;
}
header {
background-color: #6FC5C2;
display: flex;
height: 20vh;
position: sticky;
top: 0;
align-items: center;
justify-content: center;
}
nav {
background-color: #80CAF1;
display: flex;
height: 80vh;
left: 0;
padding: 1rem;
position: fixed;
top: 20vh;
transition: all 0.8s ease;
z-index: 20;
align-items: center;
flex-direction: column;
justify-content: center;
clip-path:polygon(0 0,0% 0,-200px 100%,0 100%);
}
nav.menu-opened {
clip-path:polygon(0 0,calc(100% + 200px) 0,100% 100%,0 100%);
}
a {
color: black;
font-weight: bold;
text-decoration: none;
}
a:not(:last-child) {
margin-bottom: 0.5rem;
}
main {
display: flex;
}
aside {
background-color: #9C9ECF;
display: flex;
flex-basis: 25%;
padding: 3rem 0.5rem;
text-align: center;
justify-content: center;
}
section {
background-color: #F8CFD7;
display: flex;
flex-basis: 75%;
padding: 2rem;
align-items: stretch;
flex-direction: column;
}
article {
border: ridge #80CAF1;
border-width: 3px 3px 0 3px;
display: flex;
font-size: 0.75rem;
min-height: 15vh;
padding: 1rem;
align-items: center;
}
article:last-child {
border-width: 3px;
}
footer {
background-color: #016CBA;
height: 30vh;
}
<body id="body">
<header>
<button id="menu-button" type="button">Menu</button>
</header>
<nav id="menu">
Link 1
Link 2
</nav>
<main id="main">
<aside>Filter Form</aside>
<section>
<article>Article A</article>
<article>Article B</article>
<article>Article C</article>
<article>Article D</article>
<article>Article E</article>
<article>Article F</article>
<article>Article G</article>
<article>Article H</article>
<article>Article I</article>
</section>
</main>
<footer id="footer"></footer>
</body>

now, you use it with visibility yes?
don't use it!
use height: 0;
then when you want open it in js convert it to height: 100% or another size.
and use transition: height .5s; for open as an animation.

After fiddling around, I've finally found a solution that gives me the desired effect:
let menuOpened = false;
document.getElementById('menu-button')
.addEventListener('click', function() {
menuOpened = !menuOpened;
document.getElementById('body').classList.toggle('menu-opened', menuOpened);
document.getElementById('menu').classList.toggle('menu-opened', menuOpened);
});
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow-x: hidden;
}
body.menu-opened {
overflow-y: hidden;
}
body > * {
width: 100vw;
}
header {
background-color: #6FC5C2;
display: flex;
height: 20vh;
position: sticky;
top: 0;
align-items: center;
justify-content: center;
}
nav {
background-color: #80CAF1;
clip-path: inset(0 0 80vh);
display: flex;
height: 80vh;
left: 0;
padding: 1rem;
position: fixed;
top: 20vh;
transition: clip-path 0.35s ease;
z-index: 20;
align-items: center;
flex-direction: column;
justify-content: center;
}
nav.menu-opened {
clip-path: inset(0);
}
a {
color: black;
cursor: pointer;
font-weight: bold;
text-decoration: none;
}
a:not(:last-child) {
margin-bottom: 0.5rem;
}
main {
display: flex;
}
aside {
background-color: #9C9ECF;
display: flex;
flex-basis: 25%;
padding: 3rem 0.5rem;
text-align: center;
justify-content: center;
}
section {
background-color: #F8CFD7;
display: flex;
flex-basis: 75%;
padding: 2rem;
align-items: stretch;
flex-direction: column;
}
article {
border: ridge #80CAF1;
border-width: 3px 3px 0 3px;
display: flex;
font-size: 0.75rem;
min-height: 15vh;
padding: 1rem;
align-items: center;
}
article:last-child {
border-width: 3px;
}
footer {
background-color: #016CBA;
height: 30vh;
}
<body id="body">
<header>
<button id="menu-button" type="button">Menu</button>
</header>
<nav id="menu">
<a>Link 1</a>
<a>Link 2</a>
</nav>
<main id="main">
<aside>Filter Form</aside>
<section>
<article>Article A</article>
<article>Article B</article>
<article>Article C</article>
<article>Article D</article>
<article>Article E</article>
<article>Article F</article>
<article>Article G</article>
<article>Article H</article>
<article>Article I</article>
</section>
</main>
<footer id="footer"></footer>
</body>
The trick is to use clip-path to create a mask over the menu.

Related

The navbar's appears to not cover entire screen in mobile mode

My navbar works just fine in desktop mode. But when I decrease the screen resolution, its starts not covering the entire width of the window. Can you help me to make it cover the whole width of screen.
MY home.html file
var ser = document.getElementById('in');
document.getElementById('in').onkeypress = function(e) {
if (e.keyCode == 13) {
console.log("ent")
var value = document.getElementById('in').value;
var search = "example";
console.log(value)
window.open("result.html", "_self");
sessionStorage.setItem("search", value);
}
}
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
const item = document.querySelector(".item");
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
//hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
}
const navLink = document.querySelectorAll(".nav-link");
navLink.forEach(n => n.addEventListener("click", closeMenu));
function closeMenu() {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}
var width = screen.width;
var height = screen.height;
var tempo = document.getElementById("tempo");
var ser = document.getElementById("ser");
if (width < 650) {
tempo.remove();
ser.remove();
navMenu.setAttribute('width', '100%')
}
* {
margin: 0px;
background-color: white;
}
.navbar {
background-color: blue;
width: 100%;
height: 50px;
}
.navbar-container {
display: flex;
align-items: center;
background-color: black;
height: 100%;
}
.item {
padding: 0 20px;
background-color: black;
color: white;
text-decoration: solid;
}
.search_box_item {
padding: 0 0 0 400px;
width: 500px;
}
.p1 {
float: right;
}
.pm {
font-family: 'Courier New', Courier, monospace;
color: aquamarine;
font-size: 5vw;
background-color: transparent;
width: 3vw;
margin: 10px 10px;
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%
}
.nav-items {
list-style-type: none;
}
#in {
border-radius: 25px;
}
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}
#media only screen and (max-width: 767px) {
.navbar {
height: 20vw;
width: 100%;
}
.logo {
height: 1vw;
width: 1vw
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
}
#media only screen and (max-width: 480px) and (min-width: 320px) {
.navbar {
height: 30vw;
}
.navbar {
height: 20vw;
width: 100%;
}
.logo {
height: 10vw
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
}
#media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 2.5rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
width: 100%;
}
.temp {
visibility: collapse;
}
.navbar {
height: 20vw;
width: 100%;
}
}
.nav-menu {
background-color: black;
width: 100%;
height: 40%;
margin-top: 0px;
}
<script src="https://kit.fontawesome.com/67c66657c7.js"></script>
<div class="navbar flex-row" style="width: 100%;">
<nav class="navbar-container navbar" style="width: 100%;">
<div class="navbar-logo item"><img class="logo" src="images/Navlab.png" style="width:3vw"></div>
<div class="search_box_item item temp" id="ser">
<input id="in" type="search" placeholder=" Search here" style="width:100%; background-color: white; align-self: center;">
<!--<button id="search" style="background: url(images/search1.png); height: 40px; width: 40px; border: none;"></button>-->
</div>
<div class="nav-items flex-row" id="tempo">
<li class="ptopics item temp">New releases</li>
<li class="profile item temp">My profile</li>
<li class="about item temp">About us</li>
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="nav-menu">
</div>
</nav>
</div>
<div class="firstp" style="max-width: 100vw; height: 100vw;">
<img style="float:left; max-width:50%vw; height:auto; margin: 10vw 10vw;" src="images/i1.png">
<p1 class="pm" style="margin-top: 10vw; padding-top: 5vw; float:left">Read <br> Write <br> Learn</p1>
</div>
I tried to make the width of navbar, navbar-container and navmenu 100% but its is still not working.

The class search_box_item has a padding: 0px 0px 0px 400px;. It causes the second <div> in <nav> to mess things up.
Checking elements one by one using Inspect Elements/Developer Tools helps a lot.

why li element move on hover of button?

I am trying to make a simple demo li elements Which is horizontal center followed by Play or Pause button (see attached image ).I am able to make this using Flexbox properties. but facing few issue
Issue:
My li elements are moving or changing it position when I hover the Button.
conditions
we can't give hardcoded width to TEXT or hover text or PLAY or PAUSE .Text can be as big as possible ?
here is my code
https://jsbin.com/kobezulipe/edit?html,css,output
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
left: 18px;
margin-bottom: 0;
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
<span class="text">Play</span>
</div>
</div>
</div>
Attached expected output
Answer pic

It's moving because the flexbox in .abc justify-content: center. When the width of the button changes, everything moves to stay centered.
If you change that to start it will not move.
Alternatively, if you don't want the content to move and you want to keep it centered, and you can't use a hard-coded width, you can try using an overlay. It won't move when you hover, though it might cover up anything next to it:
add a second button next to the first one. remove the text from the original.
set this button to position: absolute so it's positioned above the layout. the parent is already position: relative
only display the overlay during .p:hover. Hide the original button with visibility: hidden so it keeps its width and height.
Example:
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
left: 18px;
margin-bottom: 0;
}
.container {
display: inline-flex;
}
.container, .overlay {
padding: 8px;
border: 1px solid;
align-items: center;
justify-content: center;
}
.overlay {
position: absolute;
left: 0;
top: 0;
flex-direction: row;
display: none;
transition: all 0.2s linear;
}
.p:hover .overlay {
display: inline-flex;
}
.p:hover .container {
visibility: hidden;
}
.text {
white-space: nowrap;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
overflow: visible;
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
</div>
<div class="overlay">
<button class='button'>
</button>
<span class="text">Play, this can be very long</span>
</div>
</div>
</div>
</body>

With #kid-jokers answer you can add white-space: nowrap; to container div to allow words to span on one line.
var btn = document.querySelector(".button");
btn.addEventListener('click',function(){
btn.classList.toggle('paused');
document.querySelector(".button");
})
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: 52px;
left: 18px;
margin-bottom: 0;
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: block;
white-space: nowrap;
}
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
<span class="text">Play WHAM! - Jitterbug</span>
</div>
</div>
</div>

new answer: ↓
i rewrote the html. and the .p is positioned relative to the .list.
var btn = document.querySelector(".button");
btn.addEventListener("click", function () {
btn.classList.toggle("paused");
document.querySelector(".button");
});
li {
list-style: none;
}
.abc {
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list {
/* overflow: hidden; */
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
position: relative;
}
.list li {
width: 52px;
margin: 0 9px;
}
.list li button {
border: 1px solid #3a3631;
width: 52px;
}
.p {
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
/* left: 18px; */
margin-bottom: 0;
position: absolute;
right: -18px;
transform: translateX(100%);
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0;
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<div class="abc">
<ul class="list">
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<div class="p">
<div class="container">
<button class="button"></button>
<span class="text">Play longer longer longer</span>
</div>
</div>
</ul>
</div>
hope it can help you。
you can change the .p {width: initial;} to .p {width: 52px;}

Mobile Resizable Window Dropdown Menu Doesnt Work

Ok so I'm attempting a mobile resizable window. When I tried running it, it doesn't work and I don't know why. Here is my html code:
const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
<i class="fas fa-gem"></i> AigoLearningJuniorTeam
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Our Team
</li>
<li class="navbar__item">
Weekly Challenges
</li>
<li class="navbar__item">
Monthly Challenges
</li>
<li class="navbar__btn"> Get Started </li>
</ul>
</div>
</nav>
<script>src="app.js"</script>
</body>
Everything works perfectly fine until I resize my window into a mobile version, the drop menu icon shows, but when I press on it, nothing happens.

Container with Image & Image Description to be Responsive

I am trying to create this simple landing page where there is one row, which contains two <div class="image">, which are container div's which hold the image, the image title, and the image description.
I am trying to get it to be responsive so that when a user on mobile device access the page, the two images will be on one column as opposed to one row. I have started over and over adjusting CSS trying to get what I want, and the closest I have gotten is the example provided in the below snippet.
CSS Stylings I have tried but failed:
#media (min-width: ){} to change max/min size when the screen goes above/below certain pixels
Set a minimum size for the image itself
Tried the same for the container of the image
I couldn't get any of the above to make my landing page responsive.
.container1 {
display: flex;
justify-content: center;
position: relative;
margin-left: 160px;
margin-right: 180px;
}
.container1 p {
text-align: center;
margin: 0;
padding-top: -10px;
}
.container1 h3 {
margin: 10px;
padding: 0;
}
.armycontracts {
width: 100%;
text-align: center;
padding-left: 20px;
}
.armycontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts {
width: 100%;
margin: 0 auto;
text-align: center;
}
.landinghead {
text-align: center;
font-size: 25px;
font-weight: bold;
}
.projectInfo {
text-align: center;
font-size: 15px;
margin-top: 0px;
}
#contentRow {
margin-top: -50px;
}
.container {
display: flex;
justify-content: center;
position: relative;
}
.ms-core-pageTitle {
display: none;
}
.row-one {
width: 100%;
text-align: center;
padding: 20px;
}
#media (min-width: 400px) {
.row-one {
display: flex;
justify-content: center;
}
}
.image {
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
min-height: auto;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
.image__img {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
}
.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;
border-radius: 0px;
}
.image__overlay>* {
transform: translateY(20px);
transition: transform 0.25s;
}
.image__overlay:hover {
opacity: 1;
}
.image__overlay:hover>* {
transform: translateY(0);
}
.image__title {
font-size: 2em;
font-weight: bold;
}
.image__description {
font-size: 1.25em;
margin-top: 0.25em;
}
#contentRow {
overflow-y: hidden;
}
#sideNavBox {
DISPLAY: none
}
#contentBox {
margin-left: 0px
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
<h3 class="landinghead">Projects Landing Page</h3>
<p class="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="row-one">
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army" />
<div class="image__overlay">
<div class="image__title">Team 1 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3 <br>
</p>
</div>
</a>
</div>
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://media.defense.gov/2021/Feb/01/2002574582/-1/-1/0/210124-M-WH885-1032.JPG" alt="Usmc" />
<div class="image__overlay">
<div class="image__title">Team 2 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3
</p>
</div>
</a>
</div>
</div>
</body>

.row-one{
width: 80%;
text-align: center;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.image{
flex: 1 45%;
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
This works. JSFiddle

You can use 'flex-direction' to achieve what you want.
This page has pretty good information about it.
https://css-tricks.com/almanac/properties/f/flex-direction/
Apply a flex-direction to your 'row-image' class. Set it to 'column' when you want your elements to stack, set it to 'row' when the elements should flow in a line.

:hover is not working

I am fairly new to web development, so although appreciated, I am not looking for critiques on "best practices", I realize this is not beautiful code, but I am not sure why the a:hover function is not working. it does indeed work for other parts of the code that are not included but I am not sure why this code will not work, any insight would be appreciated.
NOTE: There is no issue with the .css filepath or anything, all the other styles elements work just fine.
So with this question I have included two files, my .html file as well as my main.css file. I have removed any personal information and any code that is not pertinent to the actual issue.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-decoration-color: white;
}
html {
margin: 0px;
}
body {
margin: 0px;
min-height: 100%;
}
.home {
position: relative;
z-index: -2;
}
.intropage {
position: fixed;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
}
#enterwebsite {
font-family: 'Cookie';
font-size: 48px;
color: white;
border: solid white 2px;
border-radius: 15px;
text-align: center;
padding: 10px 25px;
}
#enterwebsite:hover {
font-family: 'Cookie';
font-size: 48px;
color: black;
border: solid black 2px;
border-radius: 15px;
text-align: center;
padding: 10px 25px;
}
.enterbutton-container {
position: absolute;
top: 60%;
left: 39.5%;
}
.enterbutton {
text-align: center;
}
.backgroundimage {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("styles/images/SF2.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.backgroundimage img {
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
overflow: hidden;
}
.navigation {
display: flex;
background: rgba(10, 10, 10, 0.9);
}
.logo {
display: flex;
flex-grow: 30;
justify-content: center;
align-items: flex-start;
}
h2 {
color: white;
font-family: 'Raleway';
}
p {
color: white;
padding: 32px;
font-family: 'Raleway';
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.logo h1 {
margin: 0;
color: rgba(230, 230, 230, 1.0);
font-family: 'Raleway';
font-size: 32px;
}
#logotop {
text-decoration: underline;
}
#logobottom {
text-decoration: overline;
}
.logotext {
justify-content: center;
}
.intro-container {
display: flex;
justify-content: center;
margin-top: 150px;
}
.intro {
display: flex;
flex-flow: column;
align-items: center;
width: 40%;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 25px;
}
.menu {
flex-grow: 70;
display: flex;
align-items: flex-end;
z-index: auto;
}
.ul-menu {
flex-grow: 1;
display: flex;
list-style-type: none;
justify-content: space-between;
}
.menu-item {
flex-grow: 1;
color: white;
font-family: 'Raleway';
}
.profilepic img {
border: solid 2px cyan;
border-radius: 50%;
margin-top: -100px;
}
.topmenuitem {
text-decoration: none;
color: white;
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet'>
<div class="home">
<div class="navigation">
<div class="logo">
<div class="logocontainer">
<a href="index.html">
<div class="logotext">
<h1 id="logotop">JOHN J</h1>
</div>
<div class="logotext">
<h1 id="logobottom">JINGLEHEIMERSCHMIDT</h1>
</div>
</a>
</div>
</div>
<div class="menu">
<ul class="ul-menu">
<li class="menu-item"><a class="topmenuitem" href="home.html">Home</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Projects/code</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Music</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Websites</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">About</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Contact</a></li>
</ul>
</div>
</div>
<div class="main-body">
</div>
<div class="intro-container">
<div class="intro">
<div class="profilepic">
<img src="assests/profilephoto.jpg" alt="Profile Picture">
</div>
<h2>Welcome!</h2>
<p>Hello, and this is a test link thank you for visiting. here is some text
<br>
<br>
<br> here is some more text
</p>
</div>
</div>
</div>

Remove
z-index: -2;
at .home class
Your body has only one child tag with class home. In this case you shouldn't to set negative z-index. Negative z-index means that this element under the all others elements

Yes Bro, I have debugged your code.
Because of negative z index, your cursor is not detecting the link itself. Removing it, solves the problem. Please check the property properly that how you want to use it.
.home{
position: relative;
// z-index: -2;
}

Just remove z-index: -2; from css file
and for more information related to z-index property in CSS please visit this link
CSS z-index property

First, remove z-index: -2 rule of the .home selector in your CSS
Then, wrap the a with span:
<p>Hello, and <span> this is a test link </span> thank you for visiting..
And in CSS:
span:hover {
//code n' stuffs
}

We Keep Coding

JavaScript is the programming language of the Web.

Can I do a wipe transition using CSS? - javascript

now, you use it with visibility yes? don't use it! use height: 0; then when you want open it in js convert it to height: 100% or another size. and use transition: height .5s; for open as an animation.

Related

The navbar's appears to not cover entire screen in mobile mode

why li element move on hover of button?

Mobile Resizable Window Dropdown Menu Doesnt Work

Container with Image & Image Description to be Responsive

:hover is not working

Categories

Resources