Included menu op 1 pagina een andere positie geven

Een subclass maken voor de homepagina lijkt mij het makkelijkst.

Als je op alle pagina's relative wilt gebruiken maak je deze cass:

.menu {
   background-color:#ffffff;
   height: 50px;
   width: 500px;
   postition: relative;
}

en voor de homepage maak je een subclass

.menu-menuHomepage {
  postition: absolute;
}

.menu-Homepage neemt alle eigenschappen van .menu over behalve degene die je opnieuw specificeert, in dit geval postion: absolute. Background, height, width etc hoef je dus niet opnieuw te specificeren.

Op je gewone pagina's geef je je menu zo weer:

<div class="menu">hier het menu</div>

en op je homepage zo:

<div class="menu menuHomepage">hier het menu</div>

Je zou ook de body een padding-top kunnen geven op vervolgpagina's en dus op vervolgpagina's de body een class kunnen geven :). De padding-top moet dan overeenkomen met de hoogte van je menu. Als dit een dynamische hoogte is doe je dit via javascript!

Bedankt voor jullie antwoord. Het probleem is een beetje dat ik het menu include op elke pagina. Een sub class gaat dus niet lukken, omdat ik deze niet kan specificeren op 1 pagina. (omdat het menu op elke pagina ingeladen wordt).

Je zou eventueel de div tags buiten de include op de pagina zelf kunnen zetten.

Marlies Maalderink op 31/01/2017 14:05:25

.menu-Homepage neemt alle eigenschappen van .menu over behalve degene die je opnieuw specificeert, in dit geval postion: absolute. Background, height, width etc hoef je dus niet opnieuw te specificeren.

Ik weet niet of je een of andere library/framework gebruikt, maar wat je hier beschrijft is geen normaal gedrag. Bij normaal CSS-gebruik is dit absoluut niet zo.

@Jan
Voeg dit eens toe boven het menu:

<?php
$menu_id = '';
if (isset($_SERVER['SCRIPT_URL']) && $_SERVER['SCRIPT_URL'] === '/') $menu_id = ' id="MENU_HOMEPAGE"';
?>
Stel dat jouw menu in een <ul> staat, dan voeg je het volgende aan die <ul> toe:

<ul class="menu"<?php echo $menu_id; ?>>
<li>link 1</li>
<li>link 2</li>
<li>enz...</li>
</ul>

Je maakt nu in je css een class .menu aan waarin position: relative; staat, en daarnaast maak je een id #MENU_HOMEPAGE aan met position: absolute;

Of het werkt hangt wel af of jouw server $_SERVER['SCRIPT_URL'] ondersteunt. Niet alle servers schijnen dat te doen.

Laat even weten of het gelukt is.