studio-variable/botascopia-webiste-static
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

menu

Browse source
This commit is contained in:
Julie Blanc 2026-02-27 20:33:56 +01:00
parent 25cdb3bd0b
commit 31e1b729f3
28 changed files with 925 additions and 426 deletions
Download patch file Download diff file Expand all files Collapse all files

0
components/icons/x-lg.svg → components/icons/close.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 308 B

After

Width:  |  Height:  |  Size: 308 B

Before After
Before After

1
components/icons/menu.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 28 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="28" height="20" style="fill:none;"/><clipPath id="_clip1"><rect id="Artboard11" serif:id="Artboard1" x="0" y="0" width="28" height="20"/></clipPath><g clip-path="url(#_clip1)"><rect x="0" y="0" width="28.111" height="2.222"/><rect x="0" y="8.889" width="28.111" height="2.222"/><rect x="0" y="17.778" width="28.111" height="2.222"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 822 B

2
components/search.html
View file

@ -4,7 +4,7 @@
<label for="search-toggle">
<span class="search__icon search__icon--open"><include src="/components/icons/search.svg"></include></span>
<span class="search__icon search__icon--close"><include src="/components/icons/x-lg.svg"></include></span>
<span class="search__icon search__icon--close"><include src="/components/icons/close.svg"></include></span>
</label>
<div class="search__input-group">

10
components/site-header.html
View file

@ -7,8 +7,16 @@
</a>
<include src="/components/search.html"></include>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">
<span class="menu__icon menu__icon--open"><include src="/components/icons/menu.svg"></include></span>
<span class="menu__icon menu__icon--close"><include src="/components/icons/close.svg"></include></span>
</label>
<include src="/components/site-nav.html"></include>
<button id="btn__connexion">Connexion</button>
</header>

44
components/site-nav.html
View file

@ -1,39 +1,53 @@
<nav id="site-nav">
<ul class="nav-level-1_ul">
<li class="nav-level-1_li li-dropdown">
<a class="nav-level-1_link" href="#">Le projet <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
<ul class="nav-level-2_ul">
<li class="nav-level-2_li"><a class="nav-level-2_link" href="/a-propos.html">À propos</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="/a-propos.html#equipe">Équipe</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Communauté</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Publications</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Crédits et partenaires</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contact</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="/cgu.html">Mentions légales</a></li>
</ul>
</li>
<input type="radio" name="nav" id="nav-1">
<label class="nav-level-1_link" for="nav-1">Le projet <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
<ul class="nav-level-2_ul">
<li class="nav-level-2_li"><a class="nav-level-2_link" href="/a-propos.html">À propos</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="/a-propos.html#equipe">Équipe</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Communauté</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Publications</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Crédits et partenaires</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contact</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="/cgu.html">Mentions légales</a></li>
</ul>
</li>
<li class="nav-level-1_li li-dropdown">
<a class="nav-level-1_link" href="#">Base de connaissance <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
<input type="radio" name="nav" id="nav-2">
<label class="nav-level-1_link" for="nav-2">Base de connaissance <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
<ul class="nav-level-2_ul">
<li class="nav-level-2_li"><a class="nav-level-2_link" href="/species-list.html">Explorer les espèces</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contribuer à la base de connaissance</a></li>
</ul>
</li>
<li class="nav-level-1_li li-dropdown">
<a class="nav-level-1_link" href="#">Livrets <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
<input type="radio" name="nav" id="nav-3">
<label class="nav-level-1_link" for="nav-3">Livrets <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
<ul class="nav-level-2_ul">
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Créer un livret</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Consulter les livrets</a></li>
</ul>
</li>
<li class="nav-level-1_li li-dropdown">
<a class="nav-level-1_link" href="#">Ateliers <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
<input type="radio" name="nav" id="nav-4">
<label class="nav-level-1_link" for="nav-4">Ateliers <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
<ul class="nav-level-2_ul">
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Organiser un atelier</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Kits pédagogiques</a></li>
</ul>
</li>
</ul>
<button id="btn__connexion">Connexion</button>
<figure class="img-menu">
<img src="/assets/images/Cerisier.jpg">
</figure>
</nav>