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

burger menu pour page fr litterall

Browse Source
This commit is contained in:
hugogogo
2021-04-22 17:30:54 +02:00
parent b84f3e7b36
commit 2f530ecd33
2 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
fr/litterall.html
View File

@@ -15,6 +15,8 @@
<nav class="navbar sticky"> <nav class="navbar sticky">
<label for="burger" class="burger"></label>
<input type="checkbox" id="burger">
<div class="nav_left"> <div class="nav_left">
<a id="nav_logo" href="index.html" target="_parent"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a> <a id="nav_logo" href="index.html" target="_parent"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./fr/kosmopolit.html" target="_parent"><p>KOSMOPOLIT</p></a> <a href="./fr/kosmopolit.html" target="_parent"><p>KOSMOPOLIT</p></a>

38
styles/media.css
View File

@@ -21,7 +21,6 @@
} }
.navbar .nav_left a { .navbar .nav_left a {
display: none; display: none;
display: flex;
margin-left: 0px; margin-left: 0px;
width: 100%; width: 100%;
} }
@@ -30,11 +29,10 @@
} }
.navbar .nav_right { .navbar .nav_right {
display: none; display: none;
display: flex;
} }
.navbar .nav_left a#nav_logo { .navbar .nav_left a#nav_logo {
display: flex; display: flex;
margin-bottom: 40px; margin-bottom: 0px;
width: auto; width: auto;
} }
.navbar .nav_left { .navbar .nav_left {
@@ -46,7 +44,18 @@
width: 150px; width: 150px;
} }
/*burger menu*/ /*burger menu*/
nav.navbar::before { nav.navbar input#burger {
display: none;
}
nav.navbar .burger {
position: absolute;
right: 0px;
top: 0px;
height: 100%;
width: 50%;
cursor: pointer;
}
nav.navbar .burger::before {
content: ""; content: "";
position: absolute; position: absolute;
right: 20px; right: 20px;
@@ -55,9 +64,8 @@
height: 14px; height: 14px;
border-top: 2px solid lightgrey; border-top: 2px solid lightgrey;
border-bottom: 2px solid lightgrey; border-bottom: 2px solid lightgrey;
cursor: pointer;
} }
nav.navbar::after { nav.navbar .burger::after {
content: ""; content: "";
position: absolute; position: absolute;
right: 20px; right: 20px;
@@ -65,18 +73,16 @@
width: 26px; width: 26px;
height: 2px; height: 2px;
border-top: 2px solid lightgrey; border-top: 2px solid lightgrey;
pointer-events: none;
display: none;
} }
nav.navbar:hover .nav_right { nav.navbar #burger:checked ~ .nav_right {
display: none;
}
nav.navbar:hover .nav_left a {
display: none;
}
nav.navbar:hover .nav_left a#nav_logo {
display: flex; display: flex;
margin-bottom: 0px; }
nav.navbar #burger:checked ~ .nav_left a {
display: flex;
}
nav.navbar #burger:checked ~ .nav_left a#nav_logo {
display: flex;
margin-bottom: 40px;
} }
/*MAIN*/ /*MAIN*/
main { main {