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" />
|
||||
</head>
|
||||
<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">
|
||||
<button id="trigger-modal">Open Modal</button>
|
||||
</div>
|
||||
<div class="popup-modal">
|
||||
<button id="close-modal">Close Modal</button>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
const openButton = document.getElementById('trigger-modal');
|
||||
const closeButton = document.getElementById('close-modal');
|
||||
const backdrop = document.getElementById('backdrop')
|
||||
|
||||
function toggleModal() {
|
||||
const container = document.querySelector('.button-container');
|
||||
const modalDiv = document.querySelector('.popup-modal');
|
||||
const backdrop = document.querySelector('.backdrop')
|
||||
modalDiv.classList.toggle('show');
|
||||
container.classList.toggle('show');
|
||||
backdrop.classList.toggle('show');
|
||||
}
|
||||
|
||||
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" />
|
||||
</head>
|
||||
<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">
|
||||
<button id="trigger-modal">Open Modal</button>
|
||||
</div>
|
||||
<div class="popup-modal">
|
||||
<button id="close-modal">Close Modal</button>
|
||||
</div>
|
||||
<script src="solution.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
const openButton = document.getElementById('trigger-modal');
|
||||
const closeButton = document.getElementById('close-modal');
|
||||
const backdrop = document.getElementById('backdrop')
|
||||
|
||||
function toggleModal() {
|
||||
const container = document.querySelector('.button-container');
|
||||
const modalDiv = document.querySelector('.popup-modal');
|
||||
const backdrop = document.querySelector('.backdrop')
|
||||
modalDiv.classList.toggle('show');
|
||||
container.classList.toggle('show');
|
||||
backdrop.classList.toggle('show');
|
||||
}
|
||||
|
||||
openButton.addEventListener('click', toggleModal);
|
||||
|
|
@ -12,17 +12,12 @@ body {
|
|||
height: 100vh;
|
||||
background-color: #ffffff;
|
||||
opacity: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#trigger-modal,
|
||||
.popup-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#trigger-modal {
|
||||
button {
|
||||
padding: 20px;
|
||||
color: #ffffff;
|
||||
background-color: #0e79dd;
|
||||
|
|
@ -32,23 +27,37 @@ body {
|
|||
}
|
||||
|
||||
.popup-modal {
|
||||
width: 30%;
|
||||
height: 15%;
|
||||
padding: 32px 64px;
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10%;
|
||||
opacity: 0;
|
||||
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
|
||||
}
|
||||
|
||||
#close-modal {
|
||||
padding: 20px;
|
||||
color: #ffffff;
|
||||
background-color: #0e79dd;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-weight: 600;
|
||||
.backdrop {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #000;
|
||||
opacity: 0%;
|
||||
}
|
||||
|
||||
.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