replace dropdwon with popup
This commit is contained in:
Cody Loyd
parent
43e93bc9d4
commit
0d6d78b21b
|
|
@ -1,15 +0,0 @@
|
||||||
# Dropdown
|
|
||||||
|
|
||||||
Here you'll make your very own dropdown menu using pure CSS.
|
|
||||||
|
|
||||||
Animate the appearance of a list so that it slides down when you hover your mouse over the button. This exercise will need multiple CSS selectors to get it working properly.
|
|
||||||
|
|
||||||
## Desired Outcome
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Self Check
|
|
||||||
- Does the button's background color change when you hover on it?
|
|
||||||
- Does the list smoothly slide down underneath the button when the button is hovered over?
|
|
||||||
- Does the list smoothly slide back up to hiding when the mouse is moved away from the button or a list element?
|
|
||||||
- Does the list appear and disappear when it is supposed to i.e. only when the mouse is over the button or a list element?
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
|
|
@ -1,22 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Dropdown</title>
|
|
||||||
<link rel="stylesheet" href="style.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="dropdown-container">
|
|
||||||
<div class="dropdown-menu">
|
|
||||||
<button>Dropdown</button>
|
|
||||||
<ul>
|
|
||||||
<li>Item 1</a>
|
|
||||||
<li>Item 2</a>
|
|
||||||
<li>Item 3</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-container {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background-color: rgb(108, 238, 255);
|
|
||||||
padding: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
position: absolute;
|
|
||||||
left: -25%;
|
|
||||||
background-color: rgb(189, 188, 188);
|
|
||||||
width: 160px;
|
|
||||||
list-style: none;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SOLUTION */
|
|
||||||
|
|
||||||
/* disclaimer: duplicating the `ul` element here isn't best practice.
|
|
||||||
In your solution you probably put it right inside the existing `ul`,
|
|
||||||
which _is_ the best practice.
|
|
||||||
We separated it out here to make it extra clear what has changed. */
|
|
||||||
|
|
||||||
ul {
|
|
||||||
overflow: hidden;
|
|
||||||
max-height: 0;
|
|
||||||
transition: max-height 0.25s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu:hover ul {
|
|
||||||
max-height: 500px;
|
|
||||||
transition: max-height 0.5s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: rgb(59, 232, 255);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul li:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Dropdown</title>
|
|
||||||
<link rel="stylesheet" href="solution.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="dropdown-container">
|
|
||||||
<div class="dropdown-menu">
|
|
||||||
<button>Dropdown</button>
|
|
||||||
<ul>
|
|
||||||
<li>Item 1</a>
|
|
||||||
<li>Item 2</a>
|
|
||||||
<li>Item 3</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-container {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background-color: rgb(108, 238, 255);
|
|
||||||
padding: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
position: absolute;
|
|
||||||
left: -25%;
|
|
||||||
background-color: rgb(189, 188, 188);
|
|
||||||
width: 160px;
|
|
||||||
list-style: none;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
# Popup
|
||||||
|
|
||||||
|
In this exercise we have set up a simple pop-up dialog for you. It already works! Load up index.html and give it a shot!
|
||||||
|
|
||||||
|
You don't need to worry about the actual functionality here, we've just written a little javascript that adds and removes a `.show` class to the popup and the backdrop. Your task then is to make it _move_, as in the desired-outcome image below.
|
||||||
|
|
||||||
|
### Hints
|
||||||
|
- "modal" is another word for 'pop-up'
|
||||||
|
- In the code we've provided, the popup is sitting in it's final position, so you'll need to change it's initial position, and then use a transition to move it back to the center.
|
||||||
|
- You might want to change the initial opacity from 0% to something like 20% while you're working on it, so you can easily see where it is coming from before you click the button.
|
||||||
|
- Don't overthink this one... it might seem complicated, but it requires just a few lines of code.
|
||||||
|
|
||||||
|
## Desired Outcome
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Self Check
|
||||||
|
|
||||||
|
- The pop-up slides down into position when you click the open button, and slides back up when you click 'close modal'
|
||||||
|
- The opacity fades smoothly in and out when toggling the modal.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
|
|
@ -8,12 +8,15 @@
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="style.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="backdrop"></div>
|
||||||
|
<div class="popup-modal">
|
||||||
|
<h1>Look at me!</h1>
|
||||||
|
<p>I'm a pop up dialog!</p>
|
||||||
|
<button id="close-modal">Close Modal</button>
|
||||||
|
</div>
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
<button id="trigger-modal">Open Modal</button>
|
<button id="trigger-modal">Open Modal</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="popup-modal">
|
|
||||||
<button id="close-modal">Close Modal</button>
|
|
||||||
</div>
|
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
const openButton = document.getElementById('trigger-modal');
|
const openButton = document.getElementById('trigger-modal');
|
||||||
const closeButton = document.getElementById('close-modal');
|
const closeButton = document.getElementById('close-modal');
|
||||||
|
const backdrop = document.getElementById('backdrop')
|
||||||
|
|
||||||
function toggleModal() {
|
function toggleModal() {
|
||||||
const container = document.querySelector('.button-container');
|
|
||||||
const modalDiv = document.querySelector('.popup-modal');
|
const modalDiv = document.querySelector('.popup-modal');
|
||||||
|
const backdrop = document.querySelector('.backdrop')
|
||||||
modalDiv.classList.toggle('show');
|
modalDiv.classList.toggle('show');
|
||||||
container.classList.toggle('show');
|
backdrop.classList.toggle('show');
|
||||||
}
|
}
|
||||||
|
|
||||||
openButton.addEventListener('click', toggleModal);
|
openButton.addEventListener('click', toggleModal);
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #ffffff;
|
||||||
|
opacity: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #0e79dd;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-modal {
|
||||||
|
padding: 32px 64px;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform-origin: center;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.popup-modal p {
|
||||||
|
margin-bottom: 24px
|
||||||
|
}
|
||||||
|
|
||||||
|
.backdrop {
|
||||||
|
pointer-events: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: #000;
|
||||||
|
opacity: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-modal.show {
|
||||||
|
opacity: 100%;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backdrop.show {
|
||||||
|
opacity: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SOLUTION */
|
||||||
|
|
||||||
|
.popup-modal {
|
||||||
|
transition: transform .3s ease-in-out, opacity .4s ease;
|
||||||
|
transform: translate(-50%, -100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-modal.show {
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -8,12 +8,15 @@
|
||||||
<link rel="stylesheet" href="solution.css" />
|
<link rel="stylesheet" href="solution.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="backdrop"></div>
|
||||||
|
<div class="popup-modal">
|
||||||
|
<h1>Look at me!</h1>
|
||||||
|
<p>I'm a pop up dialog!</p>
|
||||||
|
<button id="close-modal">Close Modal</button>
|
||||||
|
</div>
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
<button id="trigger-modal">Open Modal</button>
|
<button id="trigger-modal">Open Modal</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="popup-modal">
|
|
||||||
<button id="close-modal">Close Modal</button>
|
|
||||||
</div>
|
|
||||||
<script src="solution.js"></script>
|
<script src="solution.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
const openButton = document.getElementById('trigger-modal');
|
const openButton = document.getElementById('trigger-modal');
|
||||||
const closeButton = document.getElementById('close-modal');
|
const closeButton = document.getElementById('close-modal');
|
||||||
|
const backdrop = document.getElementById('backdrop')
|
||||||
|
|
||||||
function toggleModal() {
|
function toggleModal() {
|
||||||
const container = document.querySelector('.button-container');
|
|
||||||
const modalDiv = document.querySelector('.popup-modal');
|
const modalDiv = document.querySelector('.popup-modal');
|
||||||
|
const backdrop = document.querySelector('.backdrop')
|
||||||
modalDiv.classList.toggle('show');
|
modalDiv.classList.toggle('show');
|
||||||
container.classList.toggle('show');
|
backdrop.classList.toggle('show');
|
||||||
}
|
}
|
||||||
|
|
||||||
openButton.addEventListener('click', toggleModal);
|
openButton.addEventListener('click', toggleModal);
|
||||||
|
|
@ -12,17 +12,12 @@ body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
opacity: 100%;
|
opacity: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#trigger-modal,
|
button {
|
||||||
.popup-modal {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#trigger-modal {
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #0e79dd;
|
background-color: #0e79dd;
|
||||||
|
|
@ -32,23 +27,37 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-modal {
|
.popup-modal {
|
||||||
width: 30%;
|
padding: 32px 64px;
|
||||||
height: 15%;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
display: flex;
|
position: fixed;
|
||||||
justify-content: center;
|
top: 50%;
|
||||||
align-items: center;
|
left: 50%;
|
||||||
margin-top: 10%;
|
transform-origin: center;
|
||||||
opacity: 0;
|
transform: translate(-50%, -50%);
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.popup-modal p {
|
||||||
|
margin-bottom: 24px
|
||||||
}
|
}
|
||||||
|
|
||||||
#close-modal {
|
.backdrop {
|
||||||
padding: 20px;
|
pointer-events: none;
|
||||||
color: #ffffff;
|
position: fixed;
|
||||||
background-color: #0e79dd;
|
inset: 0;
|
||||||
border: none;
|
background: #000;
|
||||||
border-radius: 5px;
|
opacity: 0%;
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.popup-modal.show {
|
||||||
|
opacity: 100%;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backdrop.show {
|
||||||
|
opacity: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
# Popup
|
|
||||||
|
|
||||||
Popup modals are great for replacing the standard window popups that we often fall back on when we want our users to confirm something, or log in, etc.
|
|
||||||
|
|
||||||
In this exercise, activate a popup modal that will appear when the user clicks on the 'Open Modal' button and disappears when they click on the 'Close Modal' button inside the popup.
|
|
||||||
|
|
||||||
The modal should smoothly fade in and slide up to cover the Open button. The background should darken a little to create a clear distinction between foreground and background, and a little shadow should appear on the buttons when you hover over them.
|
|
||||||
|
|
||||||
When you're done, keep this repo handy! Being able to build a custom modal is a great show-off for your future projects.
|
|
||||||
|
|
||||||
### Hints
|
|
||||||
- There's a little Javascript here. Don't worry about it. It's been set up to add/remove the `show` class to the relevant elements when clicked
|
|
||||||
- Multiple transitions will be required
|
|
||||||
- Pay close attention to the elements being altered with classes being added or removed
|
|
||||||
|
|
||||||
## Desired Outcome
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Self Check
|
|
||||||
|
|
||||||
- The mouse cursor changes to a pointer over the buttons
|
|
||||||
- A drop shadow gets added to the buttons when the mouse hovers over them
|
|
||||||
- The popup modal appears when the Open button is clicked
|
|
||||||
- The background fades to black with 40% opacity when the popup is opened
|
|
||||||
- The popup smoothly slides up to cover the existing Open button
|
|
||||||
- When the Close button is clicked the popup modal slides back down and gradually disappears
|
|
||||||
- When the popup modal is hidden your mouse should not change to the pointer if hovered over an invisible Close button
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
|
|
@ -1,116 +0,0 @@
|
||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-container {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: #ffffff;
|
|
||||||
opacity: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#trigger-modal,
|
|
||||||
.popup-modal {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#trigger-modal {
|
|
||||||
padding: 20px;
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: #0e79dd;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-modal {
|
|
||||||
width: 30%;
|
|
||||||
height: 15%;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 10%;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#close-modal {
|
|
||||||
padding: 20px;
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: #0e79dd;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SOLUTION */
|
|
||||||
|
|
||||||
/*
|
|
||||||
Disclaimer: duplicating selectors here isn't best practice.
|
|
||||||
We separated it out here to make it extra clear what has changed.
|
|
||||||
*/
|
|
||||||
|
|
||||||
.button-container {
|
|
||||||
transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-container.show {
|
|
||||||
background-color: #000000;
|
|
||||||
opacity: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#trigger-modal:hover,
|
|
||||||
#close-modal:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 1px 1px 2px #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Keep this '.popup-modal' selector separate from the main
|
|
||||||
.popup-modal selector, for the reasons outlined above
|
|
||||||
.pop-up-modal.show
|
|
||||||
*/
|
|
||||||
.popup-modal {
|
|
||||||
visibility: hidden;
|
|
||||||
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
|
|
||||||
visibility 0.5s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
The common properties between .popup-modal and .popup-modal.show
|
|
||||||
can easily be added by just adding this selector to the main
|
|
||||||
.popup-modal selector
|
|
||||||
*/
|
|
||||||
.popup-modal.show {
|
|
||||||
width: 30%;
|
|
||||||
height: 15%;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Keep this selector separate from the main '.popup-modal.show'
|
|
||||||
selector.
|
|
||||||
*/
|
|
||||||
.popup-modal.show {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
margin-top: 0;
|
|
||||||
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
|
|
||||||
visibility 0.5s linear;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue