pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dropdown language fleche plus legere

Browse Source
This commit is contained in:
hugogogo
2021-03-14 13:58:13 +01:00
parent b1492bcb7f
commit 3dc683d1c4
2 changed files with 35 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
fr/litterall.html
View File

@@ -26,11 +26,11 @@
<p>fr</p>
</a>
<div class="drop_items">
<a class="drop horizontal" href="./en/litterall_en.html">
<a class="drop horizontal" href="./en/litterall.html">
<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
<p>en</p>
</a>
<a class="drop horizontal" href="./de/litterall_de.html">
<a class="drop horizontal" href="./de/litterall.html">
<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
<p>de</p>
</a>

39
styles/nav.css
View File

@@ -35,10 +35,17 @@ nav a:not(#nav_logo):hover, nav a:not(#nav_logo):focus {
nav .nav_right {
margin-right: 2px;
}
/*---------------------------------------------*/
/*DROPDOWN*/
/*
.dropdown
.drop .drop_title
.drop_title .drop
.drop_items
.drop
.drop
@@ -49,6 +56,7 @@ nav .nav_right .dropdown {
flex-direction: column;
}
nav .nav_right .dropdown .drop {
position: relative;
padding: 0px 20px;
background-color: var(--color-back-base);
}
@@ -60,6 +68,19 @@ nav .nav_right .dropdown .drop_items {
flex-direction: column;
display: none;
}
/* horizontal space between flag and name*/
nav .nav_right .dropdown .drop > * {
margin: auto 3px;
}
/*flag size*/
nav .nav_right .dropdown img.flag {
height: 12px;
}
/*flag size*/
nav .nav_right .dropdown .drop p {
font-size: 1.6em;
}
/*the menu appears when focus on an element inside*/
nav .nav_right .dropdown:focus-within * {
display: flex;
}
@@ -72,11 +93,17 @@ nav .nav_right .dropdown:focus-within:after {
width: 100%;
height: 100%;
}
/* horizontal space between flag and name*/
nav .nav_right .dropdown .drop > * {
margin: auto 5px;
/*the little arrow point down*/
nav .nav_right .dropdown .drop_title:after {
content: "▼"; /* ▲ */
content: "v";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
nav .nav_right .dropdown img.flag {
height: 15px;
/*the little arrow point up*/
nav .nav_right .dropdown .drop_title:focus:after {
transform: rotate(180deg) translateY(20%);
}