Add dropdown menu with direct links to members

11 files changed, 118 insertions, 10 deletions

diff --git a/actualités.html b/actualités.html
index 03a7513..9f7c484 100644
--- 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
index d26ac63..7eb648b 100644
--- 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
index 7396873..8983d7f 100644
--- 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
index a504ed0..ceb61ba 100644
--- 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
index 92ab192..9ff5660 100644
--- 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
index 32339da..dc1b228 100644
--- 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
index 56e7c1c..637110d 100644
--- 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
index cc207b5..8616875 100644
--- 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
index de5c7f2..bff9736 100644
--- 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
index 3f15127..eae212c 100644
--- 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
index 79d09dd..dec1f1f 100644
--- 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>