Vraag over: class="current" in php menu

Status
Niet open voor verdere reacties.

Martijn31

Gebruiker
Lid geworden
6 sep 2009
Berichten
362
Beste,

Ik heb een aantal pagina's waarin ik het menu include naar 1 pagina genaamd navigatie.php zodat ik alleen in navigatie.php wijzigingen hoef aan te brengen en niet op elke individuele pagina.

class="current"> moet ervoor zorgen dat het balkje van het menu op die plek blijft staan. bevind ik mezelf op: Home, dan moet het menubalkje daar op staan.
PHP:
 <ul id="menu">
              <li class="current">.php<a href="index.php">Home</a></li>
              <li><a href="pagina1.php">pagina1</a></li>
              <li><a href="pagina2.php">pagina2</a></li>
              <li><a href="pagina3.php">pagina3</a></li>
              <li><a href="pagina4.php">pagina4</a></li>
            </ul>
Dit is navigatie.php. Ik weet dat het momenteel alleen html bevat maar er komt nog wat php code bij.

Dit is het stukje dat het menu aanroept in elke pagina
PHP:
      <ul id="menu"> 
            			<?php


include('includes/navigatie.php');
?>
            </ul>
          </div>

hoe zorg ik er nou voor dat het menubalkje blijft staan op de pagina waar ik me op bevind?

Groet Martijn
 
De eerste manier: geef de pagina mee in de url maar dat is niet echt netjes
Voorbeeld: www.example.nl/index.php?page=contact

De tweede manier: zet in de head van iedere pagina het actieve menu-item
Code:
<script>
var menuCurrent = "contact";
</script>

In beide gevallen heb je een stukje Javascript (of jQuery, dat is makkelijker) nodig om de juiste <li> een class="current" te geven.
 
Kun je me toevallig ook uitleggen hoe ik dat stukje jQuerie toepas? ik wil in iedere pagina in de head het actieve menu item plaatsen.

bedankt voor je hulp!
 
Het is niet zoveel code. Dit moet op iedere pagina komen. Uitleg heb ik in de code erbij gezet.
Code:
<!--zet het volgende script vlak boven <head>-->
<script>
// de href van deze pagina
var menuCurrent = "pagina3.php";
</script>
</head>
<body>

<!--elke li heeft GEEN class .current-->
<ul id="menu">
  <li><a href="pagina1.php">pagina 1</a></li>
  <li><a href="pagina2.php">pagina 2</a></li>
  <li><a href="pagina3.php">pagina 3</a></li>
  <li><a href="pagina4.php">pagina 4</a></li>
  <li><a href="pagina5.php">pagina 5</a></li>
</ul>

<!--wat hieronder staat komt helemaal onderaan de pagina-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // zoek actieve href en geef de parent li een class .current
  $('#menu a[href="' + menuCurrent + '"]').parent().addClass('current');
});
</script>
</body>
</html>
Controleer even of jquery.min.js (of jquery.js) mogelijk al in je pagina wordt geladen. In dat geval is die regel niet nodig.

(edit) zet in de head de gehele href zoals je die in het menu hebt staan.
Voorbeeld menu item: <li><a href="/producten/groep8/artikel3.php">Artikel 3</a></li>
Dan wordt dit de variabele: var menuCurrent = "/producten/groep8/artikel3.php";

(edit 2) in het script is nog geen rekening gehouden met parents van een submenu. Ik weet niet of in het menu submenu's worden gebruikt...

Suc6. Have fun.
 
Laatst bewerkt:
Je kunt ook bovenaan elke pagina een variabele $pageID declareren, en elke pagina z'n eigen ID geven. Dus Home = 1, Contact = 2, enz. Dan zet je vervolgens in je navigatie.php de HTML opmaak, en met een simpele if-statement controleer je op welke pagina je bent en zet de code de huidige pagina op 'current' als het ware. Zoals hier bijvoorbeeld:

PHP:
<nav>
    <ul>
        <li class="brand"><a>My Brand</a></li>
        <li <?php if ($pageID == 0) {echo 'class="active"';} ?> ><a href="index.php">Home</a></li>
        <li <?php if ($pageID == 1) {echo 'class="active"';} ?> ><a href="about.php">About</a></li>
        <li <?php if ($pageID == 2) {echo 'class="active"';} ?> ><a href="contact.php">Contact</a></li>
        <li <?php if ($pageID == 3) {echo 'class="active"';} ?> ><a href="login.php">Login</a></li>
    </ul>
</nav>
 
RE: Je kunt ook bovenaan elke pagina een variabele $pageID declareren, en elke pagina z'n eigen ID geven. Dus Home = 1, Contact = 2, enz.
Werkt prima maar erg lastig bij onderhoud zoals het invoegen, verwijderen en volgorde wijzigen van pagina's.

Dit stukje script is anders als je ook submenu's wilt gebruiken.
Zowel het actieve menu-item als ook de parent menu-item hiervan krijgen een class current
Code:
$(document).ready(function() {
  var li = $('#menu a[href="' + menuCurrent + '"]').parent();
  li.addClass('current');
  li.closest('#menu > li').addClass('current');
});
 
Laatst bewerkt:
Hallo,

Bedankt voor jullie Hulp! Ik heb het stukje jQuery op iedere pagina toegepast. Ook het ik iedere pagina een naam gegeven. Het menu werkt nu zoals het moet. Ik ben het menu zelf aan het schrijven. Stel dat ik submenu's toe wil passen is dat veel werk? kan je daar iets over vertellen bron?

Bedankt voor het meedenken Venga, maar de code van bron is vrij simpel en effectief!

Groet Martijn31
 
De html van een submenu is vrij eenvoudig. Je zet in een <li> een nieuwe <ul> met daarin de submenu <li> items.
Als voorbeeld de volgende html (bestand index.html) en css ((bestand style.css)
Code:
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu met submenu</title>
<link rel="stylesheet" href="style.css">
<script>var menuCurrent = "artikel23.php";</script>
</head>
<body>
<nav>
  <ul id="topmenu" class="menu">
    <li><a href="pagina1.php">Pagina 1</a></li>
    <li><a href="pagina2.php">Pagina 2</a>
      <ul>
        <li><a href="artikel21.php">Artikel 2/1</a></li>
        <li><a href="artikel22.php">Artikel 2/2</a></li>
        <li><a href="artikel23.php">Artikel 2/3</a></li>
        <li><a href="artikel24.php">Artikel 2/4</a></li>
      </ul>
    </li>
    <li><a href="pagina3.php">Pagina 3</a></li>
    <li><a href="pagina4.php">Pagina 4</a></li>
  </ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.menu a[href="' + menuCurrent + '"]').parent()
    .addClass('current')
    .closest('.menu > li').addClass('current');
});
</script>
</body>
</html>

style.css

/* demo, deze 3 regels niet nodig voor menu */
html {height:100%}
body {height:100%;margin:0;font:normal 14px sans-serif;background:#ddd}
nav  {display:block;width:500px;height:200px;margin:50px auto;background:#fff}

/* begin menu niet wijzigen */
.menu,.menu ul,.menu li,.menu a{margin:0;padding:0;border:0;box-sizing:border-box}
.menu{float:left;position:relative;z-index:597;list-style:none}
.menu li{float:left;width:auto}
.menu a{display:block;padding:6px 12px;font-size:14px;line-height:1;white-space:nowrap}
.menu a,.menu a:hover,.menu a:active,.menu a:focus{text-decoration:none;outline:0}
.menu li:hover{position:relative;z-index:599;cursor:pointer}
.menu ul{position:absolute;top:100%;left:0;visibility:hidden;z-index:598;list-style:none}
.menu ul li{float:none}
.menu li:hover>ul{visibility:visible}
/* einde menu niet wijzigen */

/* hieronder jouw menu opmaak */
#topmenu {
  width: 100%;
}
#topmenu,
#topmenu a,
#topmenu a:focus {
  color:#fff;
  background: #aaf;
}
#topmenu li:hover > a,
#topmenu li > a:active,
#topmenu li.current > a {
  color:#669;
  background: #fcc;
}

(edit) aangepast zodat het universeler is

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan