web-dev-qa-db-fra.com

Menu réactif avec différentes images de fond

J'ai un site Web avec des images d'arrière-plan spéciales sur l'article = home et une image d'arrière-plan différente pour tous les autres articles. J'utilise le code suivant dans le template index.php:

<?php
$active = Jfactory::getApplication()->getMenu()->getActive();

if ($active->alias == 'home') {
?>
<style type="text/css">
<!--
body {
    background-image: url(http://mywebsite.com/templates/img/page_home.jpeg);}
-->
</style>
<?php } else { ?>
<style type="text/css">
<!--
    background-image: url(http://mywebsite.com/templates/img/page_others.jpeg);}
-->
</style>

Cela fonctionne bien sur les ordinateurs de bureau. Dès que la largeur du moniteur est inférieure à celle spécifiée dans ".css @media" et que le bouton-menu réactif est activé, le ...-> getMenu () -> getActive (); ne dit plus le "$ actif-> alias". Comment puis-je demander l'alias de menu réactif?

menuresponsive-web-design
3
Solenthaler

Les futures mises à jour de modèles annuleront probablement les modifications de votre fichier index.php.

Une meilleure façon de procéder (et cela vaut probablement la peine d'essayer si votre méthode initiale ne fonctionne pas systématiquement) consiste à modifier l'élément de menu de votre page d'accueil et à ajouter une classe de page, par exemple. home-page sous l'onglet "Affichage de la page":

Page Class

Vous pouvez ensuite utiliser le home-page Sélecteur CSS dans votre fichier CSS personnalisé pour remplacer l’arrière-plan de la page d’accueil:

body {
  background-image: url(http://mywebsite.com/templates/img/page_home.jpeg);
}
.home-page
  background-image: url(http://mywebsite.com/templates/img/page_others.jpeg);
}

Voir https://joomla.stackexchange.com/a/3878/12 pour plus d'informations sur la création d'un fichier CSS personnalisé pour votre modèle.

2
Neil Robertson

Vous feriez mieux de vérifier si l'élément de menu est celui par défaut (c'est-à-dire la page d'accueil) plutôt que de rechercher un alias de base qui pourrait être facilement modifié dans admin.

<?php  
  $app = JFactory::getApplication();  
  $menu = $app->getMenu();  
  if ($menu->getActive() == $menu->getDefault()) {  
    echo 'This is the front page';  
  }  
?>

Je suis sûr que l’élément de menu par défaut ne change pas avec la largeur de l’écran, c’est-à-dire qu'il reste le même en mode réactif.

Plus de détails peuvent être trouvés sur https://docs.joomla.org/How_to_determine_if_the_user_is_viewing_the_front_page

1
Mikan