Vérifier le site et décider ensuite du style CSS?

StackOverflow https://stackoverflow.com/questions/616902

  •  03-07-2019
  •  | 
  •  

Question

Je souhaite avoir un barreau similaire en haut, comme ici: http://www.keltainenporssi.fi/ La couleur du site actuel est en rouge, alors que les autres sites sont en noir.

Comment atteindriez-vous mon objectif? Peut-être par php?

La syntaxe dans le pseudo-code peut être 

if $site = A
    use-styleA
if $site = B
    use-styleB
else
    use-FinalStyle
Était-ce utile?

La solution

Approche non dynamique:

Vous pouvez utiliser une règle CSS pour chaque site, comme suit: 

/* site-one.css */
#top-nav li.site-one a {
    color: red;
}

/* site-two.css */
#top-nav li.site-two a {
    color: red;
}

/* site-three.css */
#top-nav li.site-three a {
    color: red;
}

HTML: 

<ul id="top-nav">
    <li class="page-one"><a href="pages/one">Page one</a></li>
    <li class="page-two"><a href="pages/two">Page two</a></li>
    <li class="page-three"><a href="pages/three">Page three</a></li>
</ul>

Autres conseils

Il est courant d’utiliser un script côté serveur, tel que PHP, pour faire cela. Par exemple: 

<?PHP

echo '<ul id="top-nav">';

foreach($page as $pageId => $text) {
    echo '<li';
    if($curPage == $pageId)
        echo ' class="active"';
    echo '>';
    echo '<a href="pages/' . htmlspecialchars($pageId) . '">';
    echo htmlspecialchars($text);
    echo '</a>';
    echo '</li>';
}

echo '</ul>';

?>

Cela produirait une sortie du type: (Formaté pour la lisibilité) 

<ul id="top-nav">
    <li><a href="pages/home">Home</a></li>
    <li class="active"><a href="pages/one">Page one</a></li>
    <li><a href="pages/two">Page two</a></li>
</ul>

Vous pouvez avoir un seul fichier CSS pour la barre que tous les domaines vont récupérer. Assurez-vous d’ajouter! Des règles importantes sur ce css afin que ses règles ne soient pas écrasées par rien d’autre. Sinon, protégez la barre dans un "espace de noms". en ajoutant un identifiant sur la liste / div ou ce que vous utiliserez pour le mettre en œuvre.

Oui, vous pouvez affecter la classe de l'élément d'ancrage en fonction du site actuel.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top