I'm trying to have the nav links slowly fade in when you open the nav and disappear as soon as you click close on the nav. Currently it shows the links instantly and continues to display while they close.
Maybe jQuery toggle? or is there something in CSS I can do?
Codepen: https://codepen.io/mattmcgilton/pen/GRJVBxz
<div class="col-4 d-flex flex-column align-items-end">
<button id="open-btn" onclick="openNav()">Menu</button>
</div>
<nav class="primary__nav">
<div id="myNav" class="overlay">
close
<div class="container overlay-content">
<ul>
<li>this is text 123</li>
<li>this is text 123</li>
<li>this is text 123</li>
<li>this is text 123</li>
</ul>
</div>
</div>
</nav>
function openNav() {
document.getElementById("myNav").style.width = "100%";
document.getElementById("open-btn").style.display = "none";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("open-btn").style.display = "block";
}
body {
background-color: gray;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
margin-top: 30px;
ul {
padding-left: 0;
li {
padding-bottom: 5rem;
}
}
}
.overlay a {
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
color: red;
display: block;
transition: 0.3s;
letter-spacing: 5px;
#include bodyLight();
}
.overlay .closebtn {
position: absolute;
top: 50px;
right: 70px;
#include bodyBold();
font-size: 12px;
color: black;
}
If I understood your requirement correctly you want have a timer slider in and out? if so you have to set the timer correctly in 'overlay class. At present I have set it for 2 seconds.
function openNav() {
$(".overlay-content").fadeIn(2000);
document.getElementById("myNav").style.width = "100%";
document.getElementById("open-btn").style.display = "none";
}
function closeNav() {
$(".overlay-content").fadeOut(500);
document.getElementById("myNav").style.width = "0%";
document.getElementById("open-btn").style.display = "block";
}
body {
background-color: gray;
}
elementToFadeInAndOut {
animation: fadeInOut 4s linear forwards;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
transition: 2s;
/* here */
}
.overlay-content {
position: relative;
top: 25%;
margin-top: 30px;
display:none;
ul {
padding-left: 0;
li {
padding-bottom: 5rem;
}
}
}
.overlay a {
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
color: red;
display: block;
transition: 0.3s;
letter-spacing: 5px;
#include bodyLight();
}
.overlay .closebtn {
position: absolute;
top: 50px;
right: 70px;
#include bodyBold();
font-size: 12px;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col-4 d-flex flex-column align-items-end">
<button id="open-btn" onclick="openNav()">Menu</button>
</div>
<nav class="primary__nav">
<div id="myNav" class="overlay">
close
<div id="hide" class="container overlay-content">
<ul>
<li>this is text 123</li>
<li>this is text 123</li>
<li>this is text 123</li>
<li>this is text 123</li>
</ul>
</div>
</div>
</nav>
I made a simple fade-in animation which you can attach to any element via a class (element.classList.add("fadeIn")) on opening the nav and removing it (element.classList.remove("fadeIn")) on nav close. For hiding the text immediately, you can make a hidden class which will have display: none and use it in the same way.
.fadeIn{
animation: fadeIn 1s ease-in;
}
#keyframes fadeIn{
from {
opacity:0
}
to {
opacity:1
}
}
Related
So i was building a burger menu responsive navbar. I finished up most of the working but i got stuck at one point. The problem is i have applied the javascript onClick event listener on the div .burger so that it changes the opacity of the .nav-container to 1. Up until to this point this works fine. The problem is this click event only works in some areas on the .burger. Like if clicked on of the lines in it or somewhere to the right. I can't seem to find the problem. Can someone help me with this? Thanks in advance.
Here is my code
function showNav() {
var nav = document.getElementById("nav");
nav.classList.add("show-nav");
}
* {
margin: 0px;
padding: 0;
box-sizing: border;
}
.container {
display: flex;
margin-top: 2%;
}
header {
position: relative;
z-index: 1;
}
.line1,
.line2,
.line3 {
width: 40px;
height: 8px;
background-color: black;
margin-top: 3px;
}
.nav-heading {
flex: 4;
margin-left: 5%;
}
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
}
.nav-container {
position: absolute;
width: 100%;
opacity: 0;
transition: .2s ease-in-out;
transform: translateY(-20%);
transform-origin: left;
ul {
display: flex;
flex-direction: column;
background-color: blue;
width: 100%;
align-items: center;
list-style-type: none;
li {
flex: 1;
padding: 15px;
}
}
}
.show-nav {
opacity: 1;
transform: translateY(20%);
}
<header>
<div class="container">
<div class="nav-heading">
<h1>Navbar</h1>
</div>
<div class="burger" onclick="showNav()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="nav-container" id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
Just put z-index = 1 on .burger.
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
z-index: 1;
}
to bring your menu up front , you can add position:relative + z-index:1; to make sure it stands on top.
You also add the rule cursor: pointer; to show it is a clickable element :)
For the class you add, you could use classList . toggle() , so it shows/hides alternatively.
example
function showNav() {
var nav = document.getElementById("nav");
nav.classList.toggle("show-nav");
}
* {
margin: 0px;
padding: 0;
box-sizing: border;
}
.container {
display: flex;
margin-top: 2%;
}
header {
position: relative;
z-index: 1;
}
.line1,
.line2,
.line3 {
width: 40px;
height: 8px;
background-color: black;
margin-top: 3px;
}
.nav-heading {
flex: 4;
margin-left: 5%;
}
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
cursor: pointer;
position:relative;
z-index:1
}
.nav-container {
position: absolute;
width: 100%;
opacity: 0;
transition: .2s ease-in-out;
transform: translateY(-20%);
transform-origin: left;
}
ul {
display: flex;
flex-direction: column;
background-color: blue;
width: 100%;
align-items: center;
list-style-type: none;
}
li {
flex: 1;
padding: 15px;
}
li a {
color: black;
}
.show-nav {
opacity: 1;
transform: translateY(20%);
}
<header>
<div class="container">
<div class="nav-heading">
<h1>Navbar</h1>
</div>
<div class="burger" onclick="showNav()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="nav-container" id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
Just change the width of
.nav-container {
width: 30%;
}
so it doesn't overlap the burger. In general your CSS structure is not good.
i am trying to animate when i hover a li.. background image will be the zoom out
$(function () {
var image = $('.menu').find('img').attr('src');
$('.menu ul li').mouseover(function () {
var currentImage = $(this).attr('data-img');
$(this).parent().parent().parent().parent().find('img').attr('src', currentImage); })});
::-webkit-scrollbar{display: none; visibility: hidden;}
body{margin: 0; background: burlywood; }
.menu { position: relative; text-align: center; margin: auto; height: 100%; padding-top: 2%; padding-bottom: 10%; z-index: 99;}
.menu li{ display: block; font-size: 1.5rem; font-family: "Raleway SemiBold", Serif, sans-serif; padding-bottom: 20px;}
.menu li+li{margin-top: 30px;}
.menu a{ font-size: 3.5rem;}
.navigationGif{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; animation: menuBG 0.7s ease-in;}
.homeGif{ position: fixed;}
.menu img{ width: 100%; }
#keyframes menuBG { from{ opacity: 0; transform: scale(1.05); }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="navigationGif">
<div class=""> <img src="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="" class="src"> </div> </div>
<div class="menu"> <div class="data"><ul>
<li>Navigation</li>
<li data-img="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink home active"><span>H</span><span>o</span><span>m</span><span>e</span></li>
<li data-img="https://images.unsplash.com/photo-1589986118236-64c32953ab27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink works">Works</li>
<li data-img="https://images.unsplash.com/photo-1589892889837-e0236f8dd22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=753&q=80" class="navLink about">About</li>
<li data-img="https://images.unsplash.com/photo-1558567083-b8cb6bb5f7d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=763&q=80" class="navLink contact">Contact</li></ul> </div></div></div>
Try to reset the animation, also avoid too many parent() call as possible by select closest element or create better class names.
So here I make a small modification to get what you need, by add a class name to the background img that trigger animation, every time you change the hover to other menu item (LI element) it will toggle the class name so the animation will restart each time.
$(function () {
var image = $('.menu').find('img').attr('src');
var lastImage
$('.menu ul li.navLink').mouseover(function () {
var currentImage = $(this).attr('data-img');
$('.navigationGif img').attr('src', currentImage);
if(lastImage !== currentImage) {
$('.navigationGif').removeClass('animation')
setTimeout(() => {
$('.navigationGif').addClass('animation')
}, 10);
lastImage = currentImage
}
})
});
::-webkit-scrollbar {
display: none;
visibility: hidden;
}
body {
margin: 0;
background: burlywood;
}
.menu {
position: relative;
text-align: center;
margin: auto;
height: 100%;
padding-top: 2%;
padding-bottom: 10%;
z-index: 99;
}
.menu li {
display: block;
font-size: 1.5rem;
font-family: "Raleway SemiBold", Serif, sans-serif;
padding-bottom: 20px;
}
.menu li+li {
margin-top: 30px;
}
.menu a {
font-size: 3.5rem;
}
.navigationGif {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.navigationGif.animation {
animation: menuBG 0.7s ease-in;
}
.homeGif {
position: fixed;
}
.menu img {
width: 100%;
}
#keyframes menuBG {
from {
opacity: 0;
transform: scale(1.05);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="navigationGif animation">
<div class=""> <img
src="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
alt="" class="src"> </div>
</div>
<div class="menu">
<div class="data">
<ul>
<li>Navigation</li>
<li
data-img="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
class="navLink home active"><a href=""
class="navItem"><span>H</span><span>o</span><span>m</span><span>e</span></a></li>
<li
data-img="https://images.unsplash.com/photo-1589986118236-64c32953ab27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
class="navLink works">Works</li>
<li
data-img="https://images.unsplash.com/photo-1589892889837-e0236f8dd22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=753&q=80"
class="navLink about">About</li>
<li
data-img="https://images.unsplash.com/photo-1558567083-b8cb6bb5f7d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=763&q=80"
class="navLink contact">Contact</li>
</ul>
</div>
</div>
</div>
This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Do transition: 0.15s; instead of transition: 0.25s; in css file.
I'm "required" to make a webpage:
In a page I want a side menu and when clicking each option it shows in the right some content, but without "loading" another page (this would be the easier way, just making a page for each "option" and then just clicking in each button would lead me to that page with the content in the right).
I found this:
<script type="text/javascript">
function toggle(IDS) {
var sel = document.getElementById('pg').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
}
var status = document.getElementById(IDS).style.display;
if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
else { document.getElementById(IDS).style.display = 'block'; }
return false;
}
</script>
I just added it to the side menu and when each part is clicked it shows what I want :
<div id="sidebar2">
<div>
<h2 class="title">TEXT</h2>
<ul>
<li>TEXT</li>
<li>TEXT2</li>
</ul>
</div>
<div>
And in the content of each "option":
<div id="pg">
<div id="pg0" class="pg">
<h2 class="title">TEXT</h2>
<p><img src="images/test.png" alt=""/></p>
</div>
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p><img src="images/test2.png" alt=""/>HERE GOES THE DIV POPUP BUTTON</p>
</div>
I want a button to open a pop up image. It appears toggle() sets everything inside each div to display:none; and when I click only changes to block the outer part. But if I have a div inside, it remains hidden.
I've tried these two codes for the popup:
<div id="test">
<a href="#" class="JesterBox">
<div id="image1"><img src="bg.jpg"></div>
</a>
Image 1
With the corresponding JesterBox definition in CSS:
.JesterBox div {
visibility: hidden;
position: fixed;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
z-index: 75;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.JesterBox div:before {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 74;
background-color: rgba(0, 0, 0, 0);
transition: all 0.5s ease-out;
}
.JesterBox div img {
position: relative;
z-index: 77;
max-width: 100%;
max-height: 100%;
margin-left: -9999px;
opacity: 0;
transition-property: all, opacity;
transition-duration: 0.5s, 0.2s;
transition-timing-function: ease-in-out, ease-out;
}
.JesterBox div:target { visibility: visible; }
.JesterBox div:target:before { background-color: rgba(0, 0, 0, 0.7); }
.JesterBox div:target img {
margin-left: 0px;
opacity: 1;
}
And this other:
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>
With its corresponding CSS:
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
I can't make it work. How could I make, for example, the 2nd option (the div class="box") work inside the div?
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p>
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>
I have a demo website. how can I get the menu hover effect as in the reference website given below. I have fiddled little bit here, but I didn't get the transition when I hover on the menu item
ref site :- click here
hover on the top menu and see the effect. how do I get that effect ?
see the code here till I have done
HTML
<li>
<div class="header-navigation-item-state-wrapper">
<div class="white">
<h4 class="header-white">Collections</h4>
</div>
<div class="black">
<h4 class="header-black">Collections</h4>
</div>
</div>
</li>
CSS
* {
background:yellow
}
li {
list-style:none;
}
.header-black {
background:#000;
color:#fff;
padding:10px;
display:block
}
.black {
display:none;
}
.header-white {
background:#fff;
color:#000;
padding:10px;
display:block
}
JQuery
$(document).ready(function () {
$("li").mouseenter(function () {
$(".white").css('display', 'none');
$(".black").css('display', 'block');
});
$("li").mouseleave(function () {
$(".white").css('display', 'block');
$(".black").css('display', 'none');
});
})
You can use 3d effect following way.
.menu li {
display: inline-block;
}
.menu li a {
color: #fff;
display: block;
text-decoration: none;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.threed {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.threed:hover .box,
.threed:focus .box {
transform: translateZ(-25px) rotateX(90deg);
}
.box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.white {
transform: rotatex(0deg) translatez(25px);
background: white;
color: black;
}
.black {
transform: rotatex(-90deg) translatez(25px);
color: white;
background: black;
}
.white, .black {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 15px 10px;
pointer-events: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="menu">
<li><a href="/" class="threed">
Home
<span class="box">
<span class="white">Home</span>
<span class="black">Home</span>
</span>
</a></li>
</ul>
You can change as per your requirement.
Hope it helps.