Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 168983e5 authored by peter_rabbit's avatar peter_rabbit
Browse files

nav submenu

parent d947e68a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 227 additions and 105 deletions
public/education/education.js
+ 41
− 24
View file @ 168983e5
......@@ -193,6 +193,7 @@ class GameStudioClub {
{
tag: "div",
class: "title-banner",
id: "game-studio-club", // anchor id
contents: [{ tag: "h2", contents: "Game Studio Club" }],
},
{
......@@ -479,7 +480,7 @@ const VULGARISATION_THEMES = [
},
];
class Vulgarisation {
class Popularization {
render() {
return {
tag: "section",
......@@ -487,6 +488,7 @@ class Vulgarisation {
{
tag: "div",
class: "title-banner",
id: "popularization", // anchor id
contents: [{ tag: "h2", contents: "Ateliers de vulgarisation" }],
},
{
......@@ -580,13 +582,13 @@ class Vulgarisation {
}
}
module.exports = Vulgarisation;
module.exports = Popularization;
},{"../../../../constants":2}],6:[function(require,module,exports){
"use strict";
const GameStudioClub = require("./components/game-studio-club");
const Vulgarisation = require("./components/vugarisation");
const Popularization = require("./components/popularization");
class EducationPage {
constructor(args) {
......@@ -607,7 +609,7 @@ class EducationPage {
avant tout par la pédagogie et le partage de connaissances. Nous proposons blablabla`,
},
new GameStudioClub().render(),
new Vulgarisation().render(),
new Popularization().render(),
],
};
}
......@@ -615,7 +617,7 @@ class EducationPage {
module.exports = EducationPage;
},{"./components/game-studio-club":4,"./components/vugarisation":5}],7:[function(require,module,exports){
},{"./components/game-studio-club":4,"./components/popularization":5}],7:[function(require,module,exports){
"use strict";
"use strict";
......@@ -638,11 +640,44 @@ module.exports = function runPage(PageComponent) {
},{"./lib/object-html-renderer":3,"./template/template":9}],9:[function(require,module,exports){
"use strict";
const NAV_MENU_ITEMS = [
["/public/", "Accueil"],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
"/public/education/",
"Pédagogie",
[
// submenu
["/public/education/#game-studio-club", "Game Studio Club"],
["/public/education/#popularization", "Animations vulgarisation"],
],
],
];
class Template {
constructor(props) {
this.props = props;
}
renderMenu(menuItemsArray, isSubmenu = false) {
const r = {
tag: "ul",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
contents: [{ tag: "a", href, contents: text }].concat(
submenu ? [this.renderMenu(submenu, true)] : []
),
};
}),
};
return r;
}
render() {
return {
tag: "main",
......@@ -652,25 +687,7 @@ class Template {
contents: [
{
tag: "nav",
contents: [
{
tag: "ul",
contents: [
["/public/", "Accueil"],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
["/public/education/", "Pédagogie"],
].map(link => {
const [href, text] = link;
return {
tag: "li",
class:
window.location.pathname === href ? "active" : "",
contents: [{ tag: "a", href, contents: text }],
};
}),
},
],
contents: [this.renderMenu(NAV_MENU_ITEMS)],
},
],
},
......
public/games/games.js
+ 34
− 19
View file @ 168983e5
......@@ -130,11 +130,44 @@ module.exports = function runPage(PageComponent) {
},{"./lib/object-html-renderer":1,"./template/template":5}],5:[function(require,module,exports){
"use strict";
const NAV_MENU_ITEMS = [
["/public/", "Accueil"],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
"/public/education/",
"Pédagogie",
[
// submenu
["/public/education/#game-studio-club", "Game Studio Club"],
["/public/education/#popularization", "Animations vulgarisation"],
],
],
];
class Template {
constructor(props) {
this.props = props;
}
renderMenu(menuItemsArray, isSubmenu = false) {
const r = {
tag: "ul",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
contents: [{ tag: "a", href, contents: text }].concat(
submenu ? [this.renderMenu(submenu, true)] : []
),
};
}),
};
return r;
}
render() {
return {
tag: "main",
......@@ -144,25 +177,7 @@ class Template {
contents: [
{
tag: "nav",
contents: [
{
tag: "ul",
contents: [
["/public/", "Accueil"],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
["/public/education/", "Pédagogie"],
].map(link => {
const [href, text] = link;
return {
tag: "li",
class:
window.location.pathname === href ? "active" : "",
contents: [{ tag: "a", href, contents: text }],
};
}),
},
],
contents: [this.renderMenu(NAV_MENU_ITEMS)],
},
],
},
......
public/main.js
+ 34
− 19
View file @ 168983e5
......@@ -130,11 +130,44 @@ module.exports = function runPage(PageComponent) {
},{"./lib/object-html-renderer":2,"./template/template":5}],5:[function(require,module,exports){
"use strict";
const NAV_MENU_ITEMS = [
["/public/", "Accueil"],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
"/public/education/",
"Pédagogie",
[
// submenu
["/public/education/#game-studio-club", "Game Studio Club"],
["/public/education/#popularization", "Animations vulgarisation"],
],
],
];
class Template {
constructor(props) {
this.props = props;
}
renderMenu(menuItemsArray, isSubmenu = false) {
const r = {
tag: "ul",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
contents: [{ tag: "a", href, contents: text }].concat(
submenu ? [this.renderMenu(submenu, true)] : []
),
};
}),
};
return r;
}
render() {
return {
tag: "main",
......@@ -144,25 +177,7 @@ class Template {
contents: [
{
tag: "nav",
contents: [
{
tag: "ul",
contents: [
["/public/", "Accueil"],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
["/public/education/", "Pédagogie"],
].map(link => {
const [href, text] = link;
return {
tag: "li",
class:
window.location.pathname === href ? "active" : "",
contents: [{ tag: "a", href, contents: text }],
};
}),
},
],
contents: [this.renderMenu(NAV_MENU_ITEMS)],
},
],
},
......
public/software-development/software-development.js
+ 34
− 19
View file @ 168983e5
......@@ -130,11 +130,44 @@ module.exports = function runPage(PageComponent) {
},{"./lib/object-html-renderer":1,"./template/template":5}],5:[function(require,module,exports){
"use strict";
const NAV_MENU_ITEMS = [
["/public/", "Accueil"],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
"/public/education/",
"Pédagogie",
[
// submenu
["/public/education/#game-studio-club", "Game Studio Club"],
["/public/education/#popularization", "Animations vulgarisation"],
],
],
];
class Template {
constructor(props) {
this.props = props;
}
renderMenu(menuItemsArray, isSubmenu = false) {
const r = {
tag: "ul",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
contents: [{ tag: "a", href, contents: text }].concat(
submenu ? [this.renderMenu(submenu, true)] : []
),
};
}),
};
return r;
}
render() {
return {
tag: "main",
......@@ -144,25 +177,7 @@ class Template {
contents: [
{
tag: "nav",
contents: [
{
tag: "ul",
contents: [
["/public/", "Accueil"],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
["/public/education/", "Pédagogie"],
].map(link => {
const [href, text] = link;
return {
tag: "li",
class:
window.location.pathname === href ? "active" : "",
contents: [{ tag: "a", href, contents: text }],
};
}),
},
],
contents: [this.renderMenu(NAV_MENU_ITEMS)],
},
],
},
......
src/pages/education/components/game-studio-club.js
+ 1
− 0
View file @ 168983e5
......@@ -84,6 +84,7 @@ class GameStudioClub {
{
tag: "div",
class: "title-banner",
id: "game-studio-club", // anchor id
contents: [{ tag: "h2", contents: "Game Studio Club" }],
},
{
......
src/pages/education/components/vugarisation.js → src/pages/education/components/popularization.js
+ 3
− 2
View file @ 168983e5
......@@ -46,7 +46,7 @@ const VULGARISATION_THEMES = [
},
];
class Vulgarisation {
class Popularization {
render() {
return {
tag: "section",
......@@ -54,6 +54,7 @@ class Vulgarisation {
{
tag: "div",
class: "title-banner",
id: "popularization", // anchor id
contents: [{ tag: "h2", contents: "Ateliers de vulgarisation" }],
},
{
......@@ -147,4 +148,4 @@ class Vulgarisation {
}
}
module.exports = Vulgarisation;
module.exports = Popularization;
src/pages/education/education.js
+ 2
− 2
View file @ 168983e5
"use strict";
const GameStudioClub = require("./components/game-studio-club");
const Vulgarisation = require("./components/vugarisation");
const Popularization = require("./components/popularization");
class EducationPage {
constructor(args) {
......@@ -22,7 +22,7 @@ class EducationPage {
avant tout par la pédagogie et le partage de connaissances. Nous proposons blablabla`,
},
new GameStudioClub().render(),
new Vulgarisation().render(),
new Popularization().render(),
],
};
}
......
src/style.scss
+ 22
− 0
View file @ 168983e5
......@@ -27,6 +27,7 @@ main {
margin: 0;
list-style-type: none;
li {
position: relative;
a {
display: flex;
padding: 10px 20px;
......@@ -34,6 +35,19 @@ main {
font-weight: 500;
text-decoration: none;
}
.submenu {
visibility: hidden;
position: absolute;
height: auto;
max-height: 0;
transition: max-height .5s;
top: 100%;
left: 50%;
flex-direction: column;
background-image: url("../assets/images/wallpaper_binary.png");
white-space: nowrap;
}
&:hover,
&.active {
background-color: #fff2;
......@@ -41,6 +55,12 @@ main {
color: white;
}
}
&:hover {
.submenu {
visibility: unset;
max-height: 1000px;
}
}
}
}
}
......@@ -54,5 +74,7 @@ main {
}
footer {
width: 100%;
background-color: #fff1;
padding: 20px;
}
}
src/template/template.js
+ 34
− 19
View file @ 168983e5
"use strict";
const NAV_MENU_ITEMS = [
["/public/", "Accueil"],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
"/public/education/",
"Pédagogie",
[
// submenu
["/public/education/#game-studio-club", "Game Studio Club"],
["/public/education/#popularization", "Animations vulgarisation"],
],
],
];
class Template {
constructor(props) {
this.props = props;
}
renderMenu(menuItemsArray, isSubmenu = false) {
const r = {
tag: "ul",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
contents: [{ tag: "a", href, contents: text }].concat(
submenu ? [this.renderMenu(submenu, true)] : []
),
};
}),
};
return r;
}
render() {
return {
tag: "main",
......@@ -14,25 +47,7 @@ class Template {
contents: [
{
tag: "nav",
contents: [
{
tag: "ul",
contents: [
["/public/", "Accueil"],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
["/public/education/", "Pédagogie"],
].map(link => {
const [href, text] = link;
return {
tag: "li",
class:
window.location.pathname === href ? "active" : "",
contents: [{ tag: "a", href, contents: text }],
};
}),
},
],
contents: [this.renderMenu(NAV_MENU_ITEMS)],
},
],
},
......
style/style.css
+ 21
− 0
View file @ 168983e5
......@@ -30,6 +30,9 @@ main header nav ul {
margin: 0;
list-style-type: none;
}
main header nav ul li {
position: relative;
}
main header nav ul li a {
display: flex;
padding: 10px 20px;
......@@ -37,12 +40,28 @@ main header nav ul li a {
font-weight: 500;
text-decoration: none;
}
main header nav ul li .submenu {
visibility: hidden;
position: absolute;
height: auto;
max-height: 0;
transition: max-height 0.5s;
top: 100%;
left: 50%;
flex-direction: column;
background-image: url("../assets/images/wallpaper_binary.png");
white-space: nowrap;
}
main header nav ul li:hover, main header nav ul li.active {
background-color: #fff2;
}
main header nav ul li:hover a, main header nav ul li.active a {
color: white;
}
main header nav ul li:hover .submenu {
visibility: unset;
max-height: 1000px;
}
main #page-container {
background-color: white;
width: 1200px;
......@@ -197,6 +216,8 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
}
main footer {
width: 100%;
background-color: #fff1;
padding: 20px;
}
/*# sourceMappingURL=style.css.map */
style/style.css.map
+ 1
− 1
View file @ 168983e5
{"version":3,"sourceRoot":"","sources":["../src/style.scss","../src/pages/education/education.scss"],"names":[],"mappings":"AAAA;EAII;EACA;;AAJA;EACI;;AAIJ;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;;AAEJ;EAEI;;AACA;EACI;;AAOxB;EACI;EACA;EACA;EACA;;AClDJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;AAAA;EAEI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AACA;AAAA;EAEI;EAKA;EACA;EACA;;AACA;AAAA;EACI;EACA;EACA;;AAEJ;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;ADtFxB;EACI","file":"style.css"}
\ No newline at end of file
{"version":3,"sourceRoot":"","sources":["../src/style.scss","../src/pages/education/education.scss"],"names":[],"mappings":"AAAA;EAII;EACA;;AAJA;EACI;;AAIJ;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EAEI;;AACA;EACI;;AAIJ;EACI;EACA;;AAOxB;EACI;EACA;EACA;EACA;;ACtEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;AAAA;EAEI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AACA;AAAA;EAEI;EAKA;EACA;EACA;;AACA;AAAA;EACI;EACA;EACA;;AAEJ;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;ADlExB;EACI;EACA;EACA","file":"style.css"}
\ No newline at end of file
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

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service