quatuorbellefeuille.com

commit 8c0874d2350188d88ff22d6fb569d027c1b221e3
parent 138a5a12823541416399338370e9fd91f872ade5
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Mon, 28 Dec 2020 16:36:55 +0100

Add dropdown menu with direct links to members

Diffstat:
M
actualités.html
 | 
10
+++++++++-
M
commun.css
 | 
28
++++++++++++++++++++++++++++
M
contact.html
 | 
10
+++++++++-
M
gallerie.html
 | 
10
+++++++++-
M
garet.html
 | 
10
+++++++++-
M
index.html
 | 
10
+++++++++-
M
ivan.html
 | 
10
+++++++++-
M
programmes.html
 | 
10
+++++++++-
M
quatuor.html
 | 
10
+++++++++-
M
sofia.html
 | 
10
+++++++++-
M
vlad.html
 | 
10
+++++++++-

11 files changed, 118 insertions(+), 10 deletions(-)
diff --git a/actualités.html b/actualités.html
@@ -20,7 +20,15 @@
 
       <nav>
         <ol>
-          <li><a href="quatuor.html">Le quatuor</a></li>
+          <li class="dropdown">
+            <a href="quatuor.html">Le quatuor</a>
+            <ul>
+              <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
+              <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
+              <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
+              <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
+            </ul>
+          </li>
           <li class="current"><a href="actualités.html">Actualités</a></li>
           <li><a href="programmes.html">Programmes</a></li>
           <li><a href="gallerie.html">Gallerie</a></li>
diff --git a/commun.css b/commun.css
@@ -68,6 +68,34 @@ nav > ol > li {
     padding: 0.5em 0.1em;
 }
 
+/* TODO fix horizontal padding which misaligns white backgrounds on quatuor page */
+/* TODO highlight current quatuor member */
+nav li.dropdown {
+    position: relative;
+}
+nav li.dropdown ul {
+    display: none;
+    position: absolute;
+    padding-left: 0;
+    width: 100%;
+    background: white;
+    z-index: 1;
+}
+nav li.dropdown:hover ul {
+    display: block;
+    text-align: left;
+}
+nav li:hover ul li {
+    list-style-type: none;
+    padding-inline-start: 10%;
+}
+nav li.dropdown > ul > li:hover {
+    background: lightgrey;
+}
+nav li.dropdown > ul > li a {
+    display: block;       /* Make link span whole containing block. */
+}
+
 .current {
     background-color: white;
 }
diff --git a/contact.html b/contact.html
@@ -20,7 +20,15 @@
 
       <nav>
         <ol>
-          <li><a href="quatuor.html">Le quatuor</a></li>
+          <li class="dropdown">
+            <a href="quatuor.html">Le quatuor</a>
+            <ul>
+              <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
+              <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
+              <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
+              <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
+            </ul>
+          </li>
           <li><a href="actualités.html">Actualités</a></li>
           <li><a href="programmes.html">Programmes</a></li>
           <li><a href="gallerie.html">Gallerie</a></li>
diff --git a/gallerie.html b/gallerie.html
@@ -20,7 +20,15 @@
 
       <nav>
         <ol>
-          <li><a href="quatuor.html">Le quatuor</a></li>
+          <li class="dropdown">
+            <a href="quatuor.html">Le quatuor</a>
+            <ul>
+              <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
+              <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
+              <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
+              <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
+            </ul>
+          </li>
           <li><a href="actualités.html">Actualités</a></li>
           <li><a href="programmes.html">Programmes</a></li>
           <li class="current"><a href="gallerie.html">Gallerie</a></li>
diff --git a/garet.html b/garet.html
@@ -20,7 +20,15 @@
 
       <nav>
         <ol>
-          <li class="current"><a href="quatuor.html">Le quatuor</a></li>
+          <li class="dropdown current">
+            <a href="quatuor.html">Le quatuor</a>
+            <ul>
+              <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
+              <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
+              <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
+              <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
+            </ul>
+          </li>
           <li><a href="actualités.html">Actualités</a></li>
           <li><a href="programmes.html">Programmes</a></li>
           <li><a href="gallerie.html">Gallerie</a></li>
diff --git a/index.html b/index.html
@@ -20,7 +20,15 @@
 
       <nav>
         <ol>
-          <li><a href="quatuor.html">Le quatuor</a></li>
+          <li class="dropdown">
+            <a href="quatuor.html">Le quatuor</a>
+            <ul>
+              <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
+              <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
+              <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
+              <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
+            </ul>
+          </li>
           <li><a href="actualités.html">Actualités</a></li>
           <li><a href="programmes.html">Programmes</a></li>
           <li><a href="gallerie.html">Gallerie</a></li>
diff --git a/ivan.html b/ivan.html
@@ -20,7 +20,15 @@
 
       <nav>
         <ol>
-          <li class="current"><a href="quatuor.html">Le quatuor</a></li>
+          <li class="dropdown current">
+            <a href="quatuor.html">Le quatuor</a>
+            <ul>
+              <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
+              <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
+              <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
+              <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
+            </ul>
+          </li>
           <li><a href="actualités.html">Actualités</a></li>
           <li><a href="programmes.html">Programmes</a></li>
           <li><a href="gallerie.html">Gallerie</a></li>
diff --git a/programmes.html b/programmes.html
@@ -20,7 +20,15 @@
 
       <nav>
         <ol>
-          <li><a href="quatuor.html">Le quatuor</a></li>
+          <li class="dropdown">
+            <a href="quatuor.html">Le quatuor</a>
+            <ul>
+              <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
+              <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
+              <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
+              <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
+            </ul>
+          </li>
           <li><a href="actualités.html">Actualités</a></li>
           <li class="current"><a href="programmes.html">Programmes</a></li>
           <li><a href="gallerie.html">Gallerie</a></li>
diff --git a/quatuor.html b/quatuor.html
@@ -20,7 +20,15 @@
 
       <nav>
         <ol>
-          <li class="current"><a href="quatuor.html">Le quatuor</a></li>
+          <li class="dropdown current">
+            <a href="quatuor.html">Le quatuor</a>
+            <ul>
+              <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
+              <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
+              <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
+              <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
+            </ul>
+          </li>
           <li><a href="actualités.html">Actualités</a></li>
           <li><a href="programmes.html">Programmes</a></li>
           <li><a href="gallerie.html">Gallerie</a></li>
diff --git a/sofia.html b/sofia.html
@@ -20,7 +20,15 @@
 
       <nav>
         <ol>
-          <li class="current"><a href="quatuor.html">Le quatuor</a></li>
+          <li class="dropdown current">
+            <a href="quatuor.html">Le quatuor</a>
+            <ul>
+              <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
+              <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
+              <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
+              <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
+            </ul>
+          </li>
           <li><a href="actualités.html">Actualités</a></li>
           <li><a href="programmes.html">Programmes</a></li>
           <li><a href="gallerie.html">Gallerie</a></li>
diff --git a/vlad.html b/vlad.html
@@ -20,7 +20,15 @@
 
       <nav>
         <ol>
-          <li class="current"><a href="quatuor.html">Le quatuor</a></li>
+          <li class="dropdown current">
+            <a href="quatuor.html">Le quatuor</a>
+            <ul>
+              <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
+              <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
+              <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
+              <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
+            </ul>
+          </li>
           <li><a href="actualités.html">Actualités</a></li>
           <li><a href="programmes.html">Programmes</a></li>
           <li><a href="gallerie.html">Gallerie</a></li>