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> <p>fr</p>
</a> </a>
<div class="drop_items"> <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"> <img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
<p>en</p> <p>en</p>
</a> </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"> <img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
<p>de</p> <p>de</p>
</a> </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 { nav .nav_right {
margin-right: 2px; margin-right: 2px;
} }
/*---------------------------------------------*/
/*DROPDOWN*/ /*DROPDOWN*/
/* /*
.dropdown .dropdown
.drop .drop_title .drop_title .drop
.drop_items .drop_items
.drop .drop
.drop .drop
@@ -49,6 +56,7 @@ nav .nav_right .dropdown {
flex-direction: column; flex-direction: column;
} }
nav .nav_right .dropdown .drop { nav .nav_right .dropdown .drop {
position: relative;
padding: 0px 20px; padding: 0px 20px;
background-color: var(--color-back-base); background-color: var(--color-back-base);
} }
@@ -60,6 +68,19 @@ nav .nav_right .dropdown .drop_items {
flex-direction: column; flex-direction: column;
display: none; 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 * { nav .nav_right .dropdown:focus-within * {
display: flex; display: flex;
} }
@@ -72,11 +93,17 @@ nav .nav_right .dropdown:focus-within:after {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/* horizontal space between flag and name*/ /*the little arrow point down*/
nav .nav_right .dropdown .drop > * { nav .nav_right .dropdown .drop_title:after {
margin: auto 5px; content: "▼"; /* ▲ */
content: "v";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
} }
nav .nav_right .dropdown img.flag { /*the little arrow point up*/
height: 15px; nav .nav_right .dropdown .drop_title:focus:after {
transform: rotate(180deg) translateY(20%);
} }