Menu icon Foundation
How to set a class to active pages in navigation?

Hi all :) How can I set class="active" on my active navigation points without php in easy way?

I have "index.php" and a "menu.php" (code below)

How can I switch the class="active" for other pages?

http://us-patriots.hol.es/

thank you all for your help :)

navigationmenuclassactivesetPHP

Hi all :) How can I set class="active" on my active navigation points without php in easy way?

I have "index.php" and a "menu.php" (code below)

How can I switch the class="active" for other pages?

http://us-patriots.hol.es/

thank you all for your help :)

Darius Schindler over 5 years ago

is it not possible? or why this silence? :)

EDIT: founded a solution

<section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li<?php echo (basename( $_SERVER['REQUEST_URI'] ) == 'index.php') ? '   class="active triangle"' : ''; ?>><a href="index.php"><b>home</b></a></li> 
      <li<?php echo (basename( $_SERVER['REQUEST_URI'] ) == 'news.php') ? '   class="active triangle"' : ''; ?>><a href="news.php"><b>news</b></a></li> 
      <li<?php echo (basename( $_SERVER['REQUEST_URI'] ) == 'forum.php') ? '   class="active triangle"' : ''; ?>><a href="forum.php"><b>forum</b></a></li> 
      <li<?php echo (basename( $_SERVER['REQUEST_URI'] ) == 'chat.php') ? '   class="active triangle"' : ''; ?>><a href="chat.php"><b>chat</b></a></li> 
      <li<?php echo (basename( $_SERVER['REQUEST_URI'] ) == 'tuts.php') ? '   class="active triangle"' : ''; ?>><a href="tuts.php"><b>tuts</b></a></li> 
      <li<?php echo (basename( $_SERVER['REQUEST_URI'] ) == 'aboutus.php') ? '  class="active triangle"' : ''; ?>><a href="aboutus.php"><b>about_us</b></a></li> 
    </ul>
  </section>

Wellington Cordeiro over 5 years ago

You either add it statically to each file or you use PHP (or a better backend) to dynamically add it.

Darius Schindler over 5 years ago

menu.php


<!-- ##### Navigation bar START ##### -->
 <nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">US-Patriots</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active triangle"><a href="#">home</a></li>
    <li><a href="news.php">news</a></li>
    <li><a href="forum.php">forum</a></li>
    <li><a href="chat.php">chat</a></li>
    <li><a href="tuts.php">tuts</a></li>
    <li><a href="aboutus.php">about us</a></li>
    </ul>
  </section>
</nav>
<!-- ##### Navigation bar END ##### -->

index.php


<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome to US-Patriots!</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>


<?php require('menu.php') ?>

<div class="row fullWidth">
    <img src="img/header.jpg" alt="header-picture">
</div>

<br>

<div class="row">
  <div class="large-12 columns">
    <h3>Wellcome to your CoC journey!</h3>
  </div>
</div>

<div class="row">
  <div class="large-8 columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugiat, consequuntur ut, quae consequatur, veritatis illo, totam officiis voluptatum minima qui maxime culpa corporis amet. Repellat nesciunt quis sed sequi repellendus dolores est dolor. Distinctio fugit dolor porro deserunt totam a, necessitatibus alias rerum. Doloremque architecto, odit sit vero vel ex deleniti, molestiae fugiat consectetur, quibusdam consequuntur quisquam facere animi maxime voluptatem dolore nisi labore quasi aut magnam saepe voluptate beatae perferendis in porro. Minima nihil non a modi. Omnis nisi at nesciunt molestiae doloremque provident, excepturi, facilis, id itaque vero voluptatibus sequi fuga soluta? Ipsam animi saepe perspiciatis ad fuga, velit quos blanditiis rem excepturi libero totam numquam alias voluptates quas itaque odio rerum, vel omnis, harum perferendis porro illo. Recusandae nostrum ipsum sed laudantium voluptate voluptatem, porro excepturi iste suscipit doloribus ullam repellat, perferendis molestias nisi autem perspiciatis eius et dicta. Quae delectus, asperiores dignissimos alias quos necessitatibus.</p>
  </div>
    <div class="large-4 columns">
    <img src="http://dummyimage.com/400x400/000/fff" alt="">
  </div>
</div>

<br>

<div class="row">
  <div class="large-4 columns">
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt tenetur iste quasi itaque eius nihil consequatur. Architecto unde, adipisci commodi voluptatum provident aliquid. Ut, laudantium fugit facilis! Ex, exercitationem, sint.</p>
    </div>
  </div> 
  <div class="large-4 columns">
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt tenetur iste quasi itaque eius nihil consequatur. Architecto unde, adipisci commodi voluptatum provident aliquid. Ut, laudantium fugit facilis! Ex, exercitationem, sint.</p>
    </div>
  </div>
  <div class="large-4 columns">
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt tenetur iste quasi itaque eius nihil consequatur. Architecto unde, adipisci commodi voluptatum provident aliquid. Ut, laudantium fugit facilis! Ex, exercitationem, sint.</p>
    </div>
  </div>
</div>


<div class="row">
  <div class="large-12 columns">
    <ul class="small-block-grid-3">
      <li><img src="http://dummyimage.com/400x400/000/fff" alt=""></li>
      <li><img src="http://dummyimage.com/400x400/000/fff" alt=""></li>
      <li><img src="http://dummyimage.com/400x400/000/fff" alt=""></li>
  </ul>
  </div>
</div>

<br>

<div class="row">
  <div class="large-12 columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo provident culpa sit ipsum dolore accusantium nam tempora assumenda ipsa quos, quia ex suscipit animi esse fuga harum quasi eveniet atque adipisci non nemo eius nisi earum. Dolorem, eligendi nostrum vero error labore quos nesciunt asperiores voluptates. Sunt amet dignissimos omnis placeat voluptates veniam eveniet nam ea sequi quo voluptatum saepe itaque, fuga, harum, molestias, reiciendis dolorum. Dignissimos, quas ipsam ipsa libero atque ipsum nobis adipisci repellendus molestias magni. Nostrum, odit. Nulla voluptates atque cum distinctio dolor quos, quis doloribus expedita doloremque. Maxime delectus maiores, perferendis saepe, debitis minima amet enim recusandae placeat obcaecati quaerat aliquid velit quo vitae qui laudantium beatae sed adipisci fugit tenetur dolores sequi aut! Laborum fugiat soluta aliquam sit harum odio unde, nulla sunt praesentium obcaecati fugit, in deleniti nostrum, quas dolores consequuntur. Nisi sit reiciendis quia at laborum alias deserunt magni quam incidunt eum rerum, labore, culpa tempora dolor maiores. Numquam repellendus eos, sequi aliquam omnis. Recusandae inventore asperiores ipsa eum repellat sunt consequuntur optio cupiditate quas sapiente debitis alias quaerat culpa rerum cum consequatur vel labore non praesentium earum, soluta eos. Illo ipsam commodi minus assumenda quisquam, quis voluptatem aut quos, excepturi consectetur, perferendis nam nobis numquam ex tempora dolore, enim eos tenetur. Exercitationem cupiditate magni a id nisi, odit suscipit! Corporis eius recusandae, sequi qui sit, pariatur natus! Magnam, officiis, quae! Eveniet quisquam soluta aut animi consequuntur, velit tempore, reiciendis necessitatibus dolor natus aspernatur praesentium minima totam. Asperiores, veritatis, architecto? Eveniet voluptatibus voluptatum, nemo neque placeat quia velit, unde dolores debitis vitae veniam perspiciatis, eos ab nihil sapiente quisquam vel nisi fugiat adipisci quos nostrum commodi minus tempore iure. Vitae voluptatibus similique omnis quae repellat quia quo, et expedita quas mollitia rerum delectus repellendus nostrum ipsa, iure corporis quibusdam. Facilis ad magni ducimus.</p>
  </div>
</div>

<div class="row">
  <div class="large-12 columns">
    <img src="img/clanburg.png" alt="">
    <img src="img/clanburg.png" alt="">
    <img src="img/clanburg.png" alt="">
  </div>
</div>

<br>

<!-- footer START -->
<div class="row fullWidth footer">

  <div class="large-4 columns">
  <br>
  <u>Our team:</u>
  <ul>
      <li>Ralf</li>
      <li>daerias</li>
      <li>kc</li>
      <li>Conny</li>
    </ul>
  </div>

  <div class="large-4 columns">
  <br>
  <u>Our team:</u>
  <ul>
      <li>Ralf</li>
      <li>daerias</li>
      <li>kc</li>
      <li>Conny</li>
    </ul>
  </div>

  <div class="large-4 columns">
  <br>
  <u>Our team:</u>
  <ul>
      <li>Ralf</li>
      <li>daerias</li>
      <li>kc</li>
      <li>Conny</li>
    </ul>
  </div>
</div>
<!-- footer END -->

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>