Skip to content
Snippets Groups Projects
Commit 6a801da4 authored by Thomas Fritsch's avatar Thomas Fritsch
Browse files

ajout exercice navigation 

(affichage news)
parent ecfa31d9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
B-evenements.md
+ 12
− 3
View file @ 6a801da4
......@@ -4,6 +4,7 @@
## Sommaire <!-- omit in toc -->
- [B.1. Rappels](#b1-rappels)
- [B.2. La gestion du menu](#b2-la-gestion-du-menu)
- [B.3. Navigation en JS](#b3-navigation-en-js)
- [Étape suivante](#Étape-suivante)
......@@ -39,10 +40,18 @@ Dans le fichier `main.js` :
4. **Ajoutez la classe CSS "active" sur la balise `<li>` qui contient le lien qui a été cliqué** (utilisez pour cela la propriété [element.parentElement](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement))
5. **Juste avant d'ajouter la classe "active" sur le lien cliqué, effacez les classes CSS du `<li>` du menu qui était précédemment actif** de manière à n'avoir qu'un seul lien actif à la fois<br><img src="./images/pizzaland-nav.gif">
<!--## B.3. Navigation en JS
## B.3. Navigation en JS
Il existe plusieurs façons de gérer la navigation en JS.
On peut afficher/masquer des parties de code HTML déjà
-->
On peut soit générer du code HTML entièrement en JS et l'injecter dans la page (comme on le fait pour la `HomePage`) soit se contenter d'afficher/masquer des portions de la page déjà présentes dans le code html. **C'est cette deuxième technique que l'on va maintenant travailler.**
1. Inspectez le code du fichier `index.html` : vous remarquerez qu'à la fin de la balise `<header>` se trouve une balise masquée (`display:none`) :
```html
<section class="newsContainer" style="display:none">...</section>
```
2. Dans `main.js` rendez cette section visible à l'écran à l'aide de la méthode `setAttribute()`. <br>
*En CSS, pour afficher une balise qui est en `display:none`, on peut remplacer la valeur de `display` par `initial`.*
3. Faites en sorte qu'au clic sur le bouton `<button class="closeButton">` la section soit à nouveau masquée
## Étape suivante
Maintenant que l'on est capable de détecter les actions de l'utilisateur nous allons travailler sur la gestion des formulaires dans le prochain exercice : [C. Les formulaires](./C-formulaires.md).
\ No newline at end of file
css/main.css
+ 137
− 0
View file @ 6a801da4
......@@ -143,4 +143,141 @@ form label input,
form label select,
form label .form-control {
width: 70%;
}
.jumbotron {
padding: 20px 60px;
background-color: #e2e8e9;
background-image: url('../images/bg.png');
background-size: cover;
background-position: center;
animation: fadeIn .8s ease, slide 1.2s cubic-bezier(.190, 1.000, .220, 1.000);
animation-delay: .1s;
animation-fill-mode: both;
overflow: hidden;
position: relative;
}
.jumbotron .closeButton {
position: absolute;
right: 20px;
top: 20px;
width: 40px;
height: 40px;
border: none;
background: none;
transform: rotate(-45deg);
transform-origin: center;
transition: all .3s ease;
}
.jumbotron .closeButton:hover {
transform: scale(1.2) rotate(135deg);
}
.jumbotron .closeButton:before,
.jumbotron .closeButton:after {
content: '';
border-radius: 3px;
position: absolute;
top:50%;
left: 10px;
right: 10px;
border: 2px black solid;
transform-origin: center;
transform: translateY(-2px);
}
.jumbotron .closeButton:after {
transform: translateY(-2px) rotate(90deg);
}
.jumbotron .spicy{
font-size:130%;
background: linear-gradient(-55deg, #cd1a1e 0%,#faa119 40%, #fecf0a 50%, #faa119 60%, #cd1a1e 100%);
background-size: 200% 200%;
white-space: nowrap;
color: #cd1a1e;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.jumbotron .spicy:hover {
animation: slideBg .1s linear infinite;
}
.jumbotron .spicy:hover .spicy-icon{
animation: burn .01s linear infinite;
}
.jumbotron h1, .jumbotron p {
animation: fadeIn .6s ease, slide .4s cubic-bezier(.190, 1.000, .220, 1.000);
animation-delay: .4s;
animation-fill-mode: both;
}
.jumbotron p {
animation-delay: .5s;
}
.jumbotron .spicy-icon {
height:50px;
vertical-align: baseline;
transform-origin: bottom left;
}
@keyframes slideBg {
100% {
background-position: -200% center;
}
}
@keyframes burn {
100% {
transform: skew(-13deg);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide {
0% {
transform: translateX(-300px);
}
}
.is-loading {
position:relative;
min-height: 200px;
}
.is-loading * {
display: none;
}
.is-loading:before {
content: '';
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,.1);
z-index: 1;
}
.is-loading:after {
content: ' ';
position: absolute;
top:50%;
left:50%;
width: 50px;
height: 50px;
border: 1px black solid;
border-top-color: rgba(0,0,0,.3);
z-index: 2;
border-radius: 50%;
animation: rotate .5s linear infinite;
transform-origin: center;
}
@keyframes rotate {
0% {
transform: translate(-50%,-50%) rotate(0deg);
}
100% {
transform: translate(-50%,-50%) rotate(360deg);
}
}
\ No newline at end of file
images/bg.png 0 → 100644
+ 0
− 0
View file @ 6a801da4
images/bg.png

358 KiB

images/hot.svg 0 → 100644
+ 47
− 0
View file @ 6a801da4
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="115.333px" height="136.334px" viewBox="0 0 115.333 136.334" enable-background="new 0 0 115.333 136.334"
xml:space="preserve">
<g id="Calque_1">
<g>
<g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-120.4673" y1="76.7539" x2="-120.2131" y2="-97.4448" gradientTransform="matrix(-0.7645 -0.6446 -0.6446 0.7645 -39.8141 8.3878)">
<stop offset="0.1515" style="stop-color:#EE2A24"/>
<stop offset="0.2463" style="stop-color:#EE3624"/>
<stop offset="0.3931" style="stop-color:#F04E23"/>
<stop offset="0.5734" style="stop-color:#F36D21"/>
<stop offset="0.7803" style="stop-color:#F7901E"/>
<stop offset="1" style="stop-color:#FEBC11"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M2.831,84.858C4.342,67.731,14.158,55.142,24,49c21.133-13.189,40-9,62.571-22.013
c7.435-4.286,17.434-15.991,17.493-24.553c3.27,7.57,6.637,17.843,7.494,25.345c1.748,15.303-7.402,41.189-24.854,63.281
c7.341,0.693,13.481-4.11,17.125-9.022c0.707,8.582-2.574,17.8-6.907,24.122c-15.751,21.64-50.245,40.313-78.135,18.924
C-0.473,108.846,2.831,84.858,2.831,84.858z"/>
</g>
</g>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-102.1831" y1="-9.9224" x2="-165.6147" y2="55.8514" gradientTransform="matrix(-0.7645 -0.6446 -0.6446 0.7645 -39.8141 8.3878)">
<stop offset="0.0182" style="stop-color:#FECF0A"/>
<stop offset="0.3939" style="stop-color:#FDB515"/>
<stop offset="0.5036" style="stop-color:#F9A01B"/>
<stop offset="0.8447" style="stop-color:#F26122"/>
<stop offset="1" style="stop-color:#EF4023"/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M14.9,117.302c-6.221-7.863-8.247-18.927-5.319-27.762c5.003-16.125,20.216-23.054,35.638-26.329
c8.197-1.678,18.29-2.292,26.139-5.168c3.814-1.305,7.715-3.257,10.948-6.349c-0.187,9.336-1.18,20.169-2.869,29.145
c-3.058,15.958-8.719,30.178-22.097,40.147c-12.225,9.135-25.57,7.922-37.489,0.492L14.9,117.302z"/>
</g>
</g>
</g>
<g id="Calque_2">
<circle stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="26.667" cy="89.667" r="3"/>
<circle stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="58.667" cy="89.667" r="3"/>
<path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M50.167,99.25
c0,4.28-3.47,7.75-7.75,7.75s-7.75-3.47-7.75-7.75"/>
</g>
</svg>
index.html
+ 7
− 0
View file @ 6a801da4
......@@ -30,6 +30,13 @@
</ul>
</div>
</nav>
<section class="newsContainer" style="display:none">
<article class="jumbotron">
<button class="closeButton"></button>
<h1>Welcome to PizzaLand !</h1>
<p>Bienvenue sur notre magnifique catalogue de pizzas !</p>
</article>
</section>
</header>
<section class="row marketing">
<div class="col-lg-12">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment