mise au point menu animation jquery

This commit is contained in:
Deltacms 2023-02-18 18:23:43 +01:00
parent f367b75010
commit e247c30ed0
5 changed files with 77 additions and 42 deletions

View File

@ -80,32 +80,37 @@ else { echo '<html lang="'.$lang.'">'; }
<div id="main_screenshot">
<?php }} ?>
<!-- Menu dans le fond du site avant la bannière -->
<?php if($this->getData(['theme', 'menu', 'position']) === 'body-first' || $this->getData(['theme', 'menu', 'position']) === 'top' ): ?>
<!-- Détermine si le menu est fixe en haut de page lorsque l'utilisateur n'est pas connecté -->
<?php
if ( $this->getData(['theme', 'menu', 'position']) === 'top'
AND $this->getData(['theme', 'menu', 'fixed']) === true
AND $this->getUser('password') === $this->getInput('DELTA_USER_PASSWORD')
AND $this->getUser('group') > self::GROUP_MEMBER) {
echo '<nav id="navfixedconnected" >';
} else {
echo '<nav id="navfixedlogout" >';
}
?>
<!-- Menu Burger -->
<div id="toggle">
<?php echo $this->getData(['theme','menu','burgerContent']) === 'title' ? '<div class="notranslate" id="burgerText">' . $this->getData(['locale', 'title']) . '</div>' : '' ;?>
<?php echo $this->getData(['theme','menu','burgerContent']) === 'logo' ? '<div class="notranslate" id="burgerLogo"><img src="'. $fileLogo .'" width="'. $widthLogo.'" height="'. $heightLogo .'"></div>' : '' ;?>
<?php echo template::ico('menu',null,null,'2em'); ?></div>
<!-- fin du menu burger -->
<?php
$menuClass = $this->getData(['theme', 'menu', 'position']) === 'top' ? 'class="container-large"' : 'class="container"';
$menuClass = $this->getData(['theme', 'menu', 'wide']) === 'none' ? 'class="container-large"' : 'class="container"';
?>
<div id="menu" <?php echo $menuClass; ?> >
<?php $this->showMenu(); ?>
</div> <!--fin menu -->
<!-- Menu dans en dehors du site ou avant la bannière, au dessus du site -->
<?php if($this->getData(['theme', 'menu', 'position']) === 'body-first' || $this->getData(['theme', 'menu', 'position']) === 'top' ):
// Menu dans le fond du site avant la bannière et bannière limitée au site
$navStyle = '';
if( $this->getData(['theme', 'header', 'position'])==='body' && $this->getData(['theme', 'header', 'wide'])==='container'
&& $this->getData(['theme', 'menu', 'position']) === 'body-first'){
$navStyle = 'style="max-width:'. $this->getData(['theme', 'site', 'width']) . '; display: block; margin: auto;"';
}
?> <!-- Détermine si le menu est fixe en haut de page lorsque l'utilisateur n'est pas connecté --> <?php
if ( $this->getData(['theme', 'menu', 'position']) === 'top'
AND $this->getData(['theme', 'menu', 'fixed']) === true
AND $this->getUser('password') === $this->getInput('DELTA_USER_PASSWORD')
AND $this->getUser('group') > self::GROUP_MEMBER) {
echo '<nav '.$navStyle.' id="navfixedconnected" >';
} else {
echo '<nav '.$navStyle.' id="navfixedlogout" >';
}
?>
<!-- Menu Burger -->
<div id="toggle">
<?php echo $this->getData(['theme','menu','burgerContent']) === 'title' ? '<div class="notranslate" id="burgerText">' . $this->getData(['locale', 'title']) . '</div>' : '' ;?>
<?php echo $this->getData(['theme','menu','burgerContent']) === 'logo' ? '<div class="notranslate" id="burgerLogo"><img src="'. $fileLogo .'" width="'. $widthLogo.'" height="'. $heightLogo .'"></div>' : '' ;?>
<?php echo template::ico('menu',null,null,'2em'); ?></div>
<!-- fin du menu burger -->
<?php
$menuClass = $this->getData(['theme', 'menu', 'position']) === 'top' ? 'class="container-large"' : 'class="container"';
$menuClass = $this->getData(['theme', 'menu', 'wide']) === 'none' ? 'class="container-large"' : 'class="container"';
?>
<div id="menu" <?php echo $menuClass; ?> >
<?php $this->showMenu(); ?>
</div> <!--fin menu -->
</nav>
<?php endif; ?>

View File

@ -470,6 +470,11 @@ $menuPositionsBody = [
'site' => 'In the site',
'hide' => 'Hidden'
];
$menuPositionsHide = [
'top' => 'Outside the site',
'site' => 'In the site',
'hide' => 'Hidden'
];
$menuRadius = [
'0px' => 'None',
'3px 3px 0px 0px' => 'Very light',

View File

@ -240,7 +240,7 @@ $text['core_theme_view']['menu'][36] = 'Couleur de fond automatique';
$text['core_theme_view']['menu'][37] = 'Largeur minimale d\'un onglet';
$text['core_theme_view']['menu'][38] = 'Largeur minimum des onglets du menu.Le sous-menu a une largeur imposée par celle de l\'onglet parent.';
$text['core_theme_view']['menu'][39] = 'On : tous / Off : avec sous-menu uniquement';
$text['core_theme_view']['menu'][40] = 'Disposition des élèemnts de menu. La largeur du bandeau du menu, elle, s\'adapte automatiquement.';
$text['core_theme_view']['menu'][40] = 'Disposition des items du menu. La largeur du bandeau du menu, elle, s\'adapte automatiquement.';
$text['core_theme_view']['site'][0] = 'Retour';
$text['core_theme_view']['site'][1] = 'Aide';
$text['core_theme_view']['site'][2] = 'Enregistrer';
@ -469,6 +469,11 @@ $menuPositionsBody = [
'site' => 'Dans le site',
'hide' => 'Caché'
];
$menuPositionsHide = [
'top' => 'En-dehors du site',
'site' => 'Dans le site',
'hide' => 'Caché'
];
$menuRadius = [
'0px' => 'Aucun',
'3px 3px 0px 0px' => 'Très léger',

View File

@ -122,12 +122,34 @@ $("input, select").on("change", function() {
break;
}
// Largeur étendue
// Disposition des items du menu
if ($("#themeMenuWide").val() === 'none') {
$("#menu").removeClass();
} else {
$("#menu").addClass("container");
}
// Largeur du menu étendue à la page pour top sinon limitée au site
if ($("#themeMenuPosition").val() === 'top') {
$("nav").removeAttr('style');
} else {
var menuWidth = document.body.clientWidth + 20;
if( <?php echo json_encode($this->getData(['theme', 'header', 'position']) === 'body'); ?> && <?php echo json_encode($this->getData(['theme', 'header', 'wide']) === 'container'); ?>){
menuWidth = "<?php echo $this->getData(['theme', 'site', 'width']); ?>";
$("nav").css("width", menuWidth);
$("nav").css("display", "block");
$("nav").css("margin", "auto");
} else {
$("nav").css("width", menuWidth);
}
}
// Visibilité du select 'disposition' si le menu est en dehors du site
if( $("#themeMenuPosition").val() === 'top' ) {
$(".themeMenuWideWrapper").show();
} else {
$(".themeMenuWideWrapper").hide();
}
// Ajout du css au DOM
$("#themePreview").remove();
@ -136,13 +158,6 @@ $("input, select").on("change", function() {
.attr("id", "themePreview")
.text(css)
.appendTo("head");
if($("#themeMenuPosition").val() === 'site' || $("#themeMenuPosition").val() === 'hide' ) {
$(".themeMenuWideWrapper").hide();
} else {
$(".themeMenuWideWrapper").show();
}
});
// Aperçu pour la largeur minimale des onglets et la largeur du sous-menu

View File

@ -34,17 +34,22 @@ echo template::formOpen('themeMenuForm'); ?>
<div class="row">
<div class="col6">
<?php
if ( $this->getData(['theme', 'header', 'position']) == "site")
{ echo template::select('themeMenuPosition', $menuPositionsSite, [
if( $this->getData(['theme', 'header', 'position']) == "site"){
echo template::select('themeMenuPosition', $menuPositionsSite, [
'label' => $text['core_theme_view']['menu'][4],
'selected' => $this->getData(['theme', 'menu', 'position'])
]);
} elseif( $this->getData(['theme', 'header', 'position']) == "body"){
echo template::select('themeMenuPosition', $menuPositionsBody, [
'label' => $text['core_theme_view']['menu'][4],
'selected' => $this->getData(['theme', 'menu', 'position'])
]);
}else{
echo template::select('themeMenuPosition', $menuPositionsBody, [
'label' => $text['core_theme_view']['menu'][4],
'selected' => $this->getData(['theme', 'menu', 'position'])
]); }
?>
echo template::select('themeMenuPosition', $menuPositionsHide, [
'label' => $text['core_theme_view']['menu'][4],
'selected' => $this->getData(['theme', 'menu', 'position'])
]);
}?>
</div>
<div class="col6 themeMenuWideWrapper">
<?php echo template::select('themeMenuWide', $containerWides, [