I'm getting a text cursor when I click the hamburger menu. As shown in the below image:
The following is the HTML for the hamburger menu:
<div class="hamburger-menu">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<style>
.bar1,
.bar2,
.bar3 {
width: 25px;
height: 2px;
background-color: var(--clr-black);
margin: 5px 0;
transition: 0.4s;
}
.animation.bar1 {
transform: translate(0, 7.1px) rotate(-45deg);
}
.animation.bar2 {
opacity: 0;
}
.animation.bar3 {
transform: translate(0, -7.1px) rotate(45deg);
}
</style>
<script>
document.querySelector('.bar1').classList.toggle('animation')
document.querySelector('.bar2').classList.toggle('animation')
document.querySelector('.bar3').classList.toggle('animation')
</script>`
I tried the above codes. The hamburger menu is working. But when I click it a text cursor appears at the (bottom) hamburger menu.
I want to remove that cursor.
You could do it like the below snippet. I simplified your code a little bit down the route. Also, later for accessibility, I would suggest you use a button for hamburger-menu instead of a div.
const hamburger = document.querySelector(".hamburger-menu");
hamburger.addEventListener("click", (e) => {
hamburger.classList.toggle("animation");
});
.bar {
width: 25px;
height: 2px;
background-color: black;
margin: 5px 0;
transition: 0.4s;
}
.animation .bar1 {
transform: translate(0, 7.1px) rotate(-45deg);
}
.animation .bar2 {
opacity: 0;
}
.animation .bar3 {
transform: translate(0, -7.1px) rotate(45deg);
}
<div class="hamburger-menu">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
Related
I am starting out designing a website with Python & Flask.
I have a menu bar in the centre of the page, which when click turns to a cross. Upon opening
I want a menu list to appear.
Do I enter the code in the CSS or the JS section of code?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
position: relative;
left: 650px;
top: 50px;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>
You can try something like below in html to toggle as menu . Also improved some CSS.
Use the container with class= "wantToCenter" if want to center the menu else you can remove it
Use decoration according to need . I have shown here is demo only
function myFunction(x) {
var y = document.querySelector(".menu")
x.classList.toggle("change");
y.classList.toggle("menuChange");
}
.wantToCenter {
display: flex;
justify-content: center;
}
.container {
display: inline-block;
cursor: pointer;
/*left: 0px;*/
margin-top: 50px;
/*top: 50px;*/
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
position: relative;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.menu {
display: none
}
.menuChange {
display: block
}
<div class="wantToCenter">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="menu">
<div class="menuItems">Home</div>
<div class="menuItems">Service</div>
<div class="menuItems">Work</div>
</div>
</div>
</div>
On click, I want the clicked card to flip and reveal the backside. Everything is working smoothly, except for the fact that after the first click, two clicks are required to get the desired functionality.
The problem is that I would like this to only work with one click. I am very new to jQuery, so I'm expecting that this is probably a basic issue that I'm overlooking.
Here is the jQuery:
function flip() {
jQuery('.flip').click(function() {
jQuery(this).find('.card').toggleClass('flipped');
});
}
.ot-front {
background-color: blue;
}
.ot-back {
background-color: red;
}
.team-member {
display: inline-flex;
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transition: transform .3s;
transform-style: preserve-3d;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
position: absolute;
backface-visibility: hidden;
}
.card .ot-back {
background: #eee;
transform: rotateY( 180deg);
}
.card.flipped {
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="team-members">
<div class="team-member flip">
<div class="card" onclick="flip()">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
<div class="team-member flip">
<div class="card" onclick="flip()">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
<div class="team-member flip">
<div class="card" onclick="flip()">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
</div>
If you were to implement it like this:
function flip(wrapperContainingElementToFlip) {
wrapperContainingElementToFlip.find('.card').toggleClass('flipped');
}
jQuery('.flip').click(function () {
flip($(this));
});
You will bind the click when the script is loaded.
You could also bind the click eventhandler on page load, by wrapping your code in a page load event handler, like so:
$(document).ready(function() {
//Put your code here
});
By implementing your code as above, when clicking the element, a function will be called. The click event will be bound before calling the flip function, and will therefore execute.
I think this will solve your issue.
It's probably because of the fact, that you wrapped your jQuery into a function.
So for this to work, you need to click once to call a function to work, and then another one, for jQuery function to work.
Try deleting the outer function flip() and see if it's working.
Just remove the outer function. It should look something like this:
$('.flip').click(function(){
$(this).find('.card').toggleClass('flipped');
});
It does work just fine in codepen.
Your logic is doubled. You invoke flip on click and then subscribe to click, and then only do the flipping in the handler. Removing the outer function, the handlers in the HTML (and jQuery):
Array.from(document.querySelectorAll(".card")).forEach(element =>
element.addEventListener("click", () =>
element.classList.toggle('flipped')
)
);
.ot-front {
background-color: blue;
}
.ot-back {
background-color: red;
}
.team-member {
display: inline-flex;
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
-o-transition: -o-transform .3s;
transition: transform .3s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .ot-back {
background: #eee;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
<div class="team-members">
<div class="team-member flip">
<div class="card">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
<div class="team-member flip">
<div class="card">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
<div class="team-member flip">
<div class="card">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
</div>
I can't figure out what is the best way to do this, or just how to do this, so anything can help.
$(document).ready(function() {
$("#button").click(function() {
$('.logo').toggleClass('logo-active');
});
$("#button").click(function() {
$('.text').toggleClass('text-active');
});});
I have this code and JSFiddle and i would like to remove the :hover effect, when the box is scaled to big and the text appears. So when .logo-active is activated, :hover should be disabled. Thank you in advance.
Add transform: scale(1.0); to .logo-active
$(document).ready(function() {
$("#button").click(function() {
$('.logo').toggleClass('logo-active');
});
$("#button").click(function() {
$('.text').toggleClass('text-active');
});
});
.logo {
background: blue;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
position: absolute;
left: 50%;
top: 50%;
transform: scale(0.8);
transition: all 0.5s ease;
}
.logo:hover {
transform: scale(1.0);
cursor: pointer;
}
.logo-active {
background-color: blue;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
position: absolute;
left: 50%;
top: 50%;
transform: scale(1.0);
}
.text {
opacity: 0;
transition: all 0.5s ease;
}
.text-active {
margin-top: -50px;
opacity: 1.0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button" class="logo">
<p class="text">Hello / Hi</p>
</div>
Your logo has an initial scale of 0.8 so adding this to the bottom of the css code will work (tested on your jsfiddle).
.logo-active:hover {
transform: scale(.8);
}
You can create an extra class and toggle it
$(document).ready(function() {
$("#button").click(function() {
$('.logo').toggleClass('logo-active');
$('.logo').toggleClass('logo_hover')
});
$("#button").click(function() {
$('.text').toggleClass('text-active');
});
});
.logo_hover:hover {
transform: scale(1.0);
cursor: pointer;
}
<div id="button" class="logo logo_hover">
<p class="text">Hello / Hi</p>
</div>
See jsFiddle:https://jsfiddle.net/1xsx4pjk/3/
How can I let the button stay hovered (background: red) while my mouse is on the appeared div (.menu)?
https://jsfiddle.net/on5Lfmoo/
HTML
<button class="logo">
a
</button>
<div class="menu">
aaa
</div>
CSS
.menu {
transform: translateX(-250px);
width: 240px;
color: white;
background: rgba(10,10,10,0.2);
height: 100%;
position: absolute;
transition: linear 0.5s;
}
.logo:hover {
background: red;
}
.logo:hover + .menu, .menu:hover {
transform: translateX(0px);
}
You will need to use javascript or jQuery.
Here's a working fiddle of what you were trying to achieve:
https://jsfiddle.net/on5Lfmoo/1/
Here's the code:
$('.logo').mouseenter(function(){
$('.holder').addClass('open');
});
$('.holder').mouseleave(function(){
$('.holder').removeClass('open');
});
.menu {
transform: translateX(-250px);
width: 240px;
color: white;
background: rgba(10,10,10,0.2);
height: 100%;
position: absolute;
transition: linear 0.5s;
}
.open .logo {
background: red;
}
.open .menu {
transform: translateX(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="holder">
<button class="logo">
a
</button>
<div class="menu">
aaa
</div>
</div>
Problem: I have an animated div which is essentially a 2D rendering of a cube, with each face being a new page. However, whenever the page is resized (say on a mobile device or tablet or giant desktop) the left and right sides of the square change position in relation to the edges of the window, and are different with every turn of the "cube". Follow the link below, resize your screen to be smaller and try clicking on the menu items to see what I mean. The top and bottom remain constant, but the left and right are constantly moving off of true center.
Question: How do I get the "cube" face to remain centered no matter which menu item is clicked? Thank you for your help, time and patience!
website: http://studiopowell.net/tp.html
relevant code below:
<style>
.face {
position: absolute;
height: 100%;
width: 97%;
padding: 20px;
margin: 0 auto;
background-color:rgba(20,20,20,.5);
border: solid 1px #ccc;
pointer-events: none;
}
#cube {
position: relative;
margin: 0 auto;
height: 70%;
width: 80%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 2s ease;
transform-style: preserve-3d;
transition: all 2s ease;
pointer-events: none;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
}
canvas {
position: absolute;
top: 0;
left: 0;
max-height: 100%;
max-width:100%;
min-height: 100%;
min-width:100%;
}
</style>
<canvas id="c"></canvas>
<div class="menu"><div id="aboutlink">About</div> <div id="futurelink">Future</div> <div id="pastlink">Past</div> <div id="contactlink">Contact</div></div>
<div class="text">TRANSVERSAL</br>PROJECT</div>
<div id="cube">
<div class="face one"></div>
<div class="face two"></div>
<div class="face three"></div>
<div class="face four"></div>
<div class="face five"></div>
<div class="face six"></div>
</div>
<script src="http//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="http://dat-gui.googlecode.com/git/build/dat.gui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#aboutlink").click(function(){
calcRotation(0);
});
$("#futurelink").click(function(){
calcRotation(90);
});
$("#pastlink").click(function(){
calcRotation(180);
});
$("#contactlink").click(function(){
calcRotation(270);
});
function calcRotation(rot){
$("#cube").css("transform", "rotateY(-" + rot + "deg)");
}
});
</script>