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

reparation dropdown

Browse source
This commit is contained in:
Julie Blanc 2026-01-12 18:06:17 +01:00
parent 80cc514506
commit 1ad2c41a8e
7 changed files with 105 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

13
assets/css/site-header.css
View file

@ -88,7 +88,12 @@
/* nav */
/*----------------*/
#site-nav a {
/*----------------*/
/* nav */
/*----------------*/
/* #site-nav a {
text-decoration: none;
color: var(--color-txt);
}
@ -115,12 +120,8 @@
#site-nav .nav-level-1_li{
font-weight: 500;
/* padding-right: 30px; */
}
/* .nav-level-1_li.li-dropdown:hover{
border-bottom: solid 1px black;
} */
#site-nav li:hover {
cursor: pointer;
@ -158,4 +159,4 @@ ul li:hover > ul,
font-size: 1.2em;
line-height: 0;
}
} */

92
assets/css/site-nav.css Normal file
View file

@ -0,0 +1,92 @@
#site-nav a {
text-decoration: none;
color: currentColor;
}
#site-nav li{
font-weight: 500;
color: var(--color-txt);
}
.arrow{
--size: 12px;
height: var(--size);
width: var(--size);
position: relative;
top: 2px;
display: inline-block;
svg{
height: var(--size);
width: var(--size);
transform: rotate(0deg);
transform-origin: center;
transition: transform .2s ease-in-out;
fill: var(--color-txt);
}
}
#site-nav .nav-level-1_ul{
display: flex;
gap: calc(var(--padding-inner)*2);
}
#site-nav .nav-level-1_li {
display: block;
/* float: left; */
padding: var(--padding-inner);
position: relative;
text-decoration: none;
&:hover{
color: var(--color);
.arrow svg{
transform: rotate(90deg);
fill: var(--color);
}
}
}
#site-nav li:hover {
cursor: pointer;
}
.nav-level-2_ul {
visibility: hidden;
opacity: 0;
position: absolute;
left: 0;
display: none;
border-top: 1px solid var(--color);
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
margin-top: var(--padding-inner);
min-width: 24ch;
}
.nav-level-1_ul li:hover > .nav-level-2_ul,
.nav-level-2_ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
.nav-level-2_li{
width: 100%;
padding: calc(var(--padding-inner)*0.75) var(--padding-inner);
}
.nav-level-2_li:hover{
background-color: var(--color-light);
}

1
assets/icons/arrow-right.svg
View file

@ -1 +0,0 @@
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z" fill-rule="nonzero"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 544 B

3
assets/icons/search.svg
View file

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 315 B

2
assets/style.css
View file

@ -1,8 +1,10 @@
@import "css/var.css";
@import "css/base.css";
@import "css/site-header.css";
@import "css/site-nav.css";
@import "css/site-footer.css";
@import "css/buttons.css";
@import "css/home.css";

1
components/icons/arrow-dropdown.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 469 B

6
components/site-nav.html
View file

@ -4,21 +4,21 @@
<a class="nav-level-1_link" href="#">À propos</a>
</li>
<li class="nav-level-1_li li-dropdown">
<a class="nav-level-1_link" href="#">Base de connaissance</a>
<a class="nav-level-1_link" href="#">Base de connaissance <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="#">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</a>
<a class="nav-level-1_link" href="#">Livrets <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="#">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</a>
<a class="nav-level-1_link" href="#">Ateliers <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="#">Organiser un atelier</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Kits pédagogiques</a></li>