Jump to content

Add class or do action via JQuery


Michkael
 Share

Recommended Posts

Hi guys,

I am using bootstrap 3.3.7 and I am adding the language menu to the navigation menu.
The item printed is nested as follows: nav>ul>li>a

I now want to have the selected language somehow highlighted and it should not be clickable since it is already the active item.
I have very little experience with JQuery, but I have read you can add an active item this way, could someone please explain that to me?
In the template I am using the menu uses the function scrollspy.

I would like to get something close to what you can see on this website.

Thank you very much

Michael

image.thumb.png.92abcf16bbda13fe96fdbe91ec0d8261.png

Link to comment
Share on other sites

Are we talking about dynamically updating the menu on client side (AJAX driven site) or producing different output from your template? In the template code you simply do not output the a tags for the "current" item to make an entry not clickable. Something like:

foreach($languages as $lang)
	{
	if($user->language == $lang)
		echo "<li class='ActiveClass'>{$lang->title}</li>";
	else
		echo "<li><a href='...'>{$lang->title}</a></li>";
	}

 

  • Like 3
Link to comment
Share on other sites

 

It works perfectly. thank you @Autofahrn!
I don't know why I wanted to use Jquery at all costs ^^

I post How I did it at the end, hopefully it will help someone in the future, don't look at the code, it is pretty ugly ^^
If you criticise it I am open! The website is brightnode.io
First there is the notebook menu and then the mobile version.

 

    <div class="container">
      <nav role="navigation" id="nav-main" class="okayNav">
Spoiler

<ul class="nav navbar-nav">
          <?php if($page->path != "/" && $page->path != "/it/") {?>
            <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link"  href="<?=$homepage->url;?>">Home</a></li>
          <?php }?>
          <?php foreach($children as $child) {
            if($page->path == "/" || $page->path == "/it/") {?>
              <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link"  href="#<?=(str_replace(' ', '-', $child->title));?>"><?=$child->title;?></a></li>
            <?php  } else { ?>
              <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link" onclick="location.href = '<?=$homepage->httpUrl;?>#<?=(str_replace(' ', '-', $child->title));?>'" href="#<?=(str_replace(' ', '-', $child->title));?>"><?=$child->title;?></a></li>
            <?php }
          }?>
          <?php
          $ind = 0;
          foreach($languages as $language) {
            // determine the "local" URL for this language
            $urllang = $page->localUrl($language);
            if($ind >0) {?>
              <li class="dropdown sub-menu"><a class="dropdown-toggle nav-sep">/</a></li>
            <?php }
            $ind = $ind + 1?>
            <!-- output the option tag -->
            <?php if($user->language == $language) {?>
              <li class="dropdown sub-menu active-lang"><a class="dropdown-toggle nav-lang"><?=$language->title;?></a></li>
            <?php } else {?>
              <li class="dropdown sub-menu"><a class="dropdown-toggle nav-lang"  href="<?=$urllang;?>"><?=$language->title;?></a></li>
            <?php }
          } ?>
        </ul>

 

Spoiler

        <!-- Mobile Menu Start -->
        <ul class="wpb-mobile-menu">
        <!-- mobile multilanguage-->
        <li>
          <?php
          $ind = 0;
          $langs = $page->getLanguages();
          foreach($languages as $language) {
              // determine the "local" URL for this language
              $urllang = $page->localUrl($language);?>
              <!-- output the option tag -->
              <?php if($user->language == $language && $ind == 0) {?>
                <a href="<?=$page->localUrl($language);?>"> English </a>
                <ul>
                  <li class="dropdown sub-menu"><a class="dropdown-toggle nav-lang" href="<?=$page->localUrl($langs[1]);?>">Italiano</a></li>
              <?php } elseif($user->language == $language && $ind == 1) {?>
                <a href="<?=$page->localUrl($language);?>"> Italiano </a>
                <ul>
                  <li class="dropdown sub-menu"><a class="dropdown-toggle nav-lang" href="<?php $page->localUrl($langs[0]);?>">English</a></li>
              <?php } $ind = $ind + 1;
          } ?>
          </ul>
        </li>
        <!-- mobile multilanguage END -->
        <?php if($page->path != "/" && $page->path != "/it/") {?>
          <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link"  href="<?=$homepage->url;?>">Home</a></li>
          <?php }?>
        <?php foreach($children as $child) {
          if($page->path == "/" || $page->path == "/it/") {?>
            <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link"  href="#<?=(str_replace(' ', '-', $child->title));?>"><?=$child->title;?></a></li>
          <?php  } else { ?>
            <li class="dropdown sub-menu"><a class="dropdown-toggle nav-link" onclick="location.href = '<?=$homepage->httpUrl;?>#<?=(str_replace(' ', '-', $child->title));?>'" href="#<?=(str_replace(' ', '-', $child->title));?>"><?=$child->title;?></a></li>
          <?php  }
        }?>
        </ul>
      <!-- Mobile Menu End -->

      </nav>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...