menu burer croix pour toutes les langues et espace cliquable des boutons plus equilibres

This commit is contained in:
hugogogo
2021-04-23 16:26:40 +02:00
parent a9ddd81b1b
commit 7e20d74faf
11 changed files with 46 additions and 25 deletions

View File

@@ -14,7 +14,9 @@
<body> <body>
<nav class="navbar sticky"> <nav class="navbar sticky">
<label for="burger" class="burger"></label><input type="checkbox" id="burger">
<input type="checkbox" id="burger">
<label for="burger" class="burger"></label>
<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="./de/kosmopolit.html" target="_parent"><p>KOSMOPOLIT</p></a> <a href="./de/kosmopolit.html" target="_parent"><p>KOSMOPOLIT</p></a>

View File

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

View File

@@ -15,7 +15,8 @@
<nav class="navbar sticky"> <nav class="navbar sticky">
<label for="burger" class="burger"></label><input type="checkbox" id="burger"> <input type="checkbox" id="burger">
<label for="burger" class="burger"></label>
<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="./de/kosmopolit.html" target="_parent"><p>KOSMOPOLIT</p></a> <a href="./de/kosmopolit.html" target="_parent"><p>KOSMOPOLIT</p></a>

View File

@@ -15,7 +15,8 @@
<nav class="navbar sticky"> <nav class="navbar sticky">
<label for="burger" class="burger"></label><input type="checkbox" id="burger"> <input type="checkbox" id="burger">
<label for="burger" class="burger"></label>
<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="./de/kosmopolit.html" target="_parent"><p>KOSMOPOLIT</p></a> <a href="./de/kosmopolit.html" target="_parent"><p>KOSMOPOLIT</p></a>

View File

@@ -14,7 +14,9 @@
<body> <body>
<nav class="navbar sticky"> <nav class="navbar sticky">
<label for="burger" class="burger"></label><input type="checkbox" id="burger">
<input type="checkbox" id="burger">
<label for="burger" class="burger"></label>
<div class="nav_left"> <div class="nav_left">
<a id="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a> <a id="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./en/kosmopolit.html" ><p>KOSMOPOLIT</p></a> <a href="./en/kosmopolit.html" ><p>KOSMOPOLIT</p></a>

View File

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

View File

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

View File

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

View File

@@ -14,7 +14,9 @@
<body> <body>
<nav class="navbar sticky"> <nav class="navbar sticky">
<label for="burger" class="burger"></label><input type="checkbox" id="burger">
<input type="checkbox" id="burger">
<label for="burger" class="burger"></label>
<div class="nav_left"> <div class="nav_left">
<a id="nav_logo" href="index.html" ><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a> <a id="nav_logo" href="index.html" ><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./en/kosmopolit.html" ><p>KOSMOPOLIT</p></a> <a href="./en/kosmopolit.html" ><p>KOSMOPOLIT</p></a>

View File

@@ -19,29 +19,35 @@
flex-direction: column; flex-direction: column;
height: auto; height: auto;
} }
.navbar .nav_left a { .navbar .nav_left {
display: none; flex-direction: column;
margin-left: 0px; height: auto;
width: 100%; width: 100%;
} }
.navbar .nav_left a p {
margin-left: 20px;
}
.navbar .nav_right {
display: none;
}
.navbar .nav_left a#nav_logo { .navbar .nav_left a#nav_logo {
display: flex; display: flex;
margin-bottom: 0px; margin-bottom: 0px;
margin-left: 0px;
width: auto; width: auto;
} }
.navbar .nav_left { .navbar .nav_left > a:not(#nav_logo) {
flex-direction: column; display: none;
height: auto; margin-left: 0px;
width: 100%;
height: 50px;
}
.navbar .nav_left > a p {
margin-left: 20px;
} }
.navbar .nav_right { .navbar .nav_right {
margin: 20px 0px 20px 27px; height: auto;
width: 150px; width: 100%;
display: none;
margin-left: 28px;
}
.navbar .nav_right > a {
height: 50px;
margin: 0px;
} }
/*burger menu*/ /*burger menu*/
nav.navbar input#burger { nav.navbar input#burger {
@@ -51,7 +57,7 @@
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 0px; top: 0px;
height: 100%; height: var(--nav-height);
width: 50%; width: 50%;
cursor: pointer; cursor: pointer;
} }
@@ -84,7 +90,6 @@
display: flex; display: flex;
} }
nav.navbar #burger:checked ~ .nav_left a:not(#nav_logo) { nav.navbar #burger:checked ~ .nav_left a:not(#nav_logo) {
height: 50px;
} }
nav.navbar #burger:checked ~ .nav_left a#nav_logo { nav.navbar #burger:checked ~ .nav_left a#nav_logo {
display: flex; display: flex;

View File

@@ -91,3 +91,7 @@ body#body_navbar {
} }
/*menu burger responsive*/
nav.navbar input#burger {
display: none;
}