jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-21 14:41:49 +03:00
parent 4ae129054e
commit ab9ab64bd5
476 changed files with 3370 additions and 532 deletions
Download patch file Download diff file Expand all files Collapse all files

71
2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md Normal file
View file

@ -0,0 +1,71 @@
# HTML/CSS
First let's create HTML/CSS.
A menu is a standalone graphical component on the page, so its better to put it into a single DOM element.
A list of menu items can be layed out as a list `ul/li`.
Here's the example structure:
```html
<div class="menu">
<span class="title">Sweeties (click me)!</span>
<ul>
<li>Cake</li>
<li>Donut</li>
<li>Honey</li>
</ul>
</div>
```
We use `<span>` for the title, because `<div>` has an implicit `display:block` on it, and it will occupy 100% of the horizontal width.
Like this:
```html autorun height=50
<div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>
```
So if we set `onclick` on it, then it will catch clicks to the right of the text.
...but `<span>` has an implicit `display: inline`, so it occupies exactly enough place to fit all the text:
```html autorun height=50
<span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>
```
# Toggling the menu
Toggling the menu should change the arrow and show/hide the menu list.
All these changes are perfectly handled by CSS. In JavaScript we should label the current state of the menu by adding/removing the class `.open`.
Without it, the menu will be closed:
```css
.menu ul {
margin: 0;
list-style: none;
padding-left: 20px;
display: none;
}
.menu .title::before {
content: '▶ ';
font-size: 80%;
color: green;
}
```
...And with `.open` the arrow changes and the list shows up:
```css
.menu.open .title::before {
content: '▼ ';
}
.menu.open ul {
display: block;
}
```

57
2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.menu ul {
margin: 0;
list-style: none;
padding-left: 20px;
display: none;
}
.menu .title {
font-size: 18px;
cursor: pointer;
}
.menu .title::before {
content: '▶ ';
font-size: 80%;
color: green;
}
.menu.open .title::before {
content: '▼ ';
}
.menu.open ul {
display: block;
}
</style>
</head>
<body>
<div id="sweeties" class="menu">
<span class="title">Sweeties (click me)!</span>
<ul>
<li>Cake</li>
<li>Donut</li>
<li>Honey</li>
</ul>
</div>
<script>
let menuElem = document.getElementById('sweeties');
let titleElem = menuElem.querySelector('.title');
titleElem.onclick = function() {
menuElem.classList.toggle('open');
};
</script>
</body>
</html>

16
2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
▶ ▼ Sweeties (click me)!
<ul>
<li>Cake</li>
<li>Donut</li>
<li>Honey</li>
</ul>
</body>
</html>

11
2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md Normal file
View file

@ -0,0 +1,11 @@
importance: 5
---
# Create a menu sliding menu
Create a menu that opens/collapses on click:
[iframe border=1 height=100 src="solution"]
P.S. HTML/CSS of the source document is to be modified.