display: inline-block;
font-size: 2em;
padding: 0.75em 1em;
background-color: # 1ce;
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
Menubar will appear when the button is first clicked. Menubar then disappears when the button is clicked a second time. It will appear again when the button is clicked a third time.
Menubar will be wrapped in a card
Menubar will be hidden to the right of the page. It needs a fixed position so users can see it and will have a width of 300px.
.sidebar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 300px;
background-color: # 333;
}
.sidebar ul {
margin: 0;
padding: 0;
}
.sidebar
list-style: none;
}
.sidebar li + li {
border-top: 1px solid white;
}
.sidebar a {
display: block;
padding: 1em 1.5em;
color: #fff;
text-decoration: none;
}
Menubar will move 300px to the right and hide from the screen.
When answering this question, two other questions will arise in your mind:
Let's solve it next:
If the sidebar has a .is-hidden class, the menubar will be hidden. On the other hand, it will appear.
CSS for hidden menubar:
We use the translateX to leave the 300px menubar to the right because the transform is a good attribute for this task.
.sidebar .is-hidden {
transform: translateX (300px);
}
Menubar did not show up immediately. It needs to appear from right to left.
If you know CSS well, you can use the transition . If not, find the answer on Google Italy.
.sidebar {
transition: transform 0.3s ease-out;
}
It will hide in the same way it appears, in the opposite direction. You will not need to write additional CSS.
Is not. As we have, we will add an is-hidden class to the menubar and menubar that will be hidden.
Now that we have solved almost all problems, the only question left is: What happens when one button, two and three times click?
The solutions above seem quite vague. We know the menubar will appear when clicked, but how?
We can answer this question in more detail. But before that, how do you know when the button is clicked?
How to determine when a button is clicked?
If you have a bit of JavaScript knowledge, you can add an event listener to the button and click on the event listener. If you don't know, ask Google .
Before adding the event listener, you need to refer to the button with querySelector .
const button = document.querySelector ('. btn')
button.addEventListener ('click', function () {
console.log ('button is clicked!')
})
When the button is clicked for the first time, we will remove the .is-hidden class for the menubar to appear. To remove the class in JavaScript, we use Element.classList.remove . This means we need to select the menubar first.
const button = document.querySelector ('. btn')
const sidebar = document.querySelector ('. sidebar')
button.addEventListener ('click', function () {
sidebar.classList.remove ('is-hidden')
})
When the button is clicked a second time, we will add the .is-hidden class back to the menubar to hide it.
Unfortunately, we cannot know exactly how many times the button is clicked with an event listener. The best way is to check whether the .is-hidden class has appeared in menubar. If so, then remove, not yet available, then add.
const button = document.querySelector ('. btn')
const sidebar = document.querySelector ('. sidebar')
button.addEventListener ('click', function () {
if (sidebar.classList.contains ('is-hidden')) {
sidebar.classList.remove ('is-hidden')
} else {
sidebar.classList.add ('is-hidden')
}
})
After completing the third step - Arrange coherently solutions. The final step is to refactor and improve the code . Right now this step can be confusing because it requires a lot of effort and experience before it can be determined that your code can be improved.
So, once you complete all three steps, switch to doing something else. By the time you understand JavaScript better and take time to review it, you'll realize that you've forgotten something.
For example, in the above example, you might wonder some problems:
With question number three, if you spend some time searching Google a bit, you'll notice that a toggle method removes the class if it exists. If the class does not exist, the toggle method will add that class.
const button = document.querySelector ('. btn')
const sidebar = document.querySelector ('. sidebar')
button.addEventListener ('click', function () {
sidebar.classList.toggle ('is-hidden')
})
Thinking like a programmer is quite simple. Break down the problem into smaller problems.
When you've finished splitting the problem, look for solutions to those small problems and handle them . Following that path, you will find many small problems that you have never thought of. Please solve those problems too.
When you have finished writing the solution for each small problem, you will have the answer to the original problem. Sometimes, you may take a long time to pair the written solutions for your smaller problems.
After all, the work is not completely done when you create the first solution.There is always room for improvement . However, you have not seen any improvement right now. Temporarily ignore it, solve some other problems and come back later . Then you will definitely see the problem more accurately.
Refer to some more articles:
Having fun!