leo/kabano
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Ajout d'un menu responsive

Browse Source
This commit is contained in:
leosw
2025-08-18 17:15:58 +02:00
parent e3de743bb8
commit d744317283
4 changed files with 55 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
views/blocks/d.head.html
View File

@@ -1,6 +1,6 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<link rel="shortcut icon" href="<?=$config['views_url']?>img/favicon.png"> <link rel="shortcut icon" href="<?=$config['views_url']?>img/favicon.png">
<? if (isset($head['css'])) { <? if (isset($head['css'])) {
foreach(explode(";",$head['css']) as $css) { ?> foreach(explode(";",$head['css']) as $css) { ?>

7
views/blocks/d.nav.html
View File

@@ -4,7 +4,8 @@
<img alt="Kabano logo" src="<?=$config['views_url'].'img/'?>header.svg"> <img alt="Kabano logo" src="<?=$config['views_url'].'img/'?>header.svg">
</a> </a>
<nav> <nav>
<ul> <input type="checkbox" id="togglemenu"><label for="togglemenu" class="hamburger on-bar"><i class="icon fas fa-bars"></i></label>
<ul id="menu">
<li class="on-bar has-sub with-subtitle"><a class="on-bar" href="#">Restauration<br> <li class="on-bar has-sub with-subtitle"><a class="on-bar" href="#">Restauration<br>
<span class="subtitle">de refuges pastoraux</span></a> <span class="subtitle">de refuges pastoraux</span></a>
<ul> <ul>
@@ -22,7 +23,7 @@
<li><a href="<?=$config['rel_root_folder']?>community">Contribuer</a></li> <li><a href="<?=$config['rel_root_folder']?>community">Contribuer</a></li>
</ul> </ul>
</li> </li>
<li class="on-bar has-sub"> <li class="on-bar has-sub menu-icon">
<? if ($user->id == 0) { ?> <? if ($user->id == 0) { ?>
<a class="on-bar" href="#"><i class="icon fas fa-user"></i></a> <a class="on-bar" href="#"><i class="icon fas fa-user"></i></a>
<? } elseif ($user->is_avatar_present == 't') { ?> <? } elseif ($user->is_avatar_present == 't') { ?>
@@ -50,7 +51,7 @@
<? } ?> <? } ?>
</ul> </ul>
</li> </li>
<li class="on-bar has-sub"><a class="on-bar" href="#"><i class="icon fas fa-question"></i></a> <li class="on-bar has-sub menu-icon"><a class="on-bar" href="#"><i class="icon fas fa-question"></i></a>
<ul> <ul>
<!--<li><a href="<?=$config['rel_root_folder']?>wiki/help">Aide</a></li>--> <!--<li><a href="<?=$config['rel_root_folder']?>wiki/help">Aide</a></li>-->
<li><a href="<?=$config['rel_root_folder']?>blog">Blog</a></li> <li><a href="<?=$config['rel_root_folder']?>blog">Blog</a></li>

55
views/css/d.index.css
View File

@@ -101,7 +101,7 @@ header {
z-index: 1000; z-index: 1000;
} }
header ul { #menu {
float: right; float: right;
position: relative; position: relative;
} }
@@ -112,7 +112,7 @@ header li {
vertical-align: middle; vertical-align: middle;
} }
header li a { header li a, .hamburger {
color: white; color: white;
padding: 25px 15px 15px; padding: 25px 15px 15px;
height: 20px; height: 20px;
@@ -157,7 +157,9 @@ header .icon.avatar {
header li.has-sub:hover a, header li.has-sub:focus-within a { header li.has-sub:hover a, header li.has-sub:focus-within a {
border-bottom: 6px solid #212121; border-bottom: 6px solid #212121;
} }
header li.has-sub:hover > a {
cursor: default;
}
header li.has-sub:hover > ul, header li.has-sub:focus-within > ul { header li.has-sub:hover > ul, header li.has-sub:focus-within > ul {
display: block; display: block;
} }
@@ -229,8 +231,47 @@ header input:hover, header input:focus-within {
color: #222; color: #222;
} }
.hamburger {
display: none;
float: right;
}
#togglemenu {
display: none;
}
@media (max-width: 800px) {
#menu {
display: none;
background: #212121;
float: inherit;
position: inherit;
}
.hamburger {
display: block;
}
#togglemenu:checked ~ #menu {
display: block;
}
header li {
width: 100%;
}
header li.menu-icon {
width: unset;
}
header li .subtitle {
padding-left: 0px;
}
header li.has-sub ul {
width: 100%;
}
header li.has-sub:hover ul, header li.has-sub:focus-within ul, header li.has-sub:hover ul li, header li.has-sub:focus-within ul li, header li.has-sub:hover ul a, header li.has-sub:focus-within ul a {
background-color: #555;
border: 0;
}
}
#Hcontent { #Hcontent {
width: 850px; max-width: 850px;
margin: 0 auto; margin: 0 auto;
} }
@@ -255,7 +296,7 @@ section {
position: relative; position: relative;
background: white; background: white;
margin: auto; margin: auto;
width: 820px; max-width: 820px;
min-height: calc(100% - 94px); min-height: calc(100% - 94px);
z-index: 10; z-index: 10;
padding: 15px; padding: 15px;
@@ -293,7 +334,7 @@ section p {
footer { footer {
background: #212121; background: #212121;
width: 820px; max-width: 820px;
padding: 15px; padding: 15px;
margin: 15px auto 0 auto; margin: 15px auto 0 auto;
color: #c1c1c1; color: #c1c1c1;
@@ -331,7 +372,7 @@ footer a:hover {
#AScontent { #AScontent {
height: 320px; height: 320px;
width: 850px; max-width: 850px;
margin: auto; margin: auto;
position: relative; position: relative;
} }

4
views/js/d.header.js
View File

@@ -72,11 +72,11 @@ function enlarge() {
$(window).scroll(function() { $(window).scroll(function() {
var position = $(window).scrollTop(); var position = $(window).scrollTop();
if (position>80 && small!=1) { if (position>80 && small!=1 && $('body').width() > 800) {
small = 1; small = 1;
reduce(); reduce();
} }
else if (position<=80 && small!=0) { else if (position<=80 && small!=0 && $('body').width() > 800) {
small = 0; small = 0;
enlarge(); enlarge();
} }