IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Menu highlight pro anchor i url

Aktivity
Avatar
maaaca
Člen
Avatar
maaaca:10.10.2018 19:58

Ahoj, mám více stránkový web, kde bych chtěl v menu zvýraznit aktivní položku.

Následující kód mi dobře funguje pro anchory (mujweb.cz/#kon­takt), ale chtěl bych aby reagoval i reagoval na stránku mujweb.cz/o_mne­.html.
Takže když si otevřu stránku mujweb.cz/o_mne­.html, chci aby pokud budu najetý na divu s id="o_mne" bylo v menu zvýrazněno O mně (rozuměj přidat do menu třídu active), když přejedu níž na id="kontakt", zvýrazní se kontakt (kontakt je součást patičky a je společný pro všechny stránky)

(function($) {
  "use strict"; // Start of use strict

  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: (target.offset().top - 70)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

  // Scroll to top button appear
  $(document).scroll(function() {
    var scrollDistance = $(this).scrollTop();
    if (scrollDistance > 100) {
      $('.scroll-to-top').fadeIn();
    } else {
      $('.scroll-to-top').fadeOut();
    }
  });

  // Closes responsive menu when a scroll trigger link is clicked
  $('.js-scroll-trigger').click(function() {
    $('.navbar-collapse').collapse('hide');
  });

  // Activate scrollspy to add active class to navbar items on scroll
  $('body').scrollspy({
    target: '#mainNav',
    offset: 80
  });

  // Collapse Navbar
  var navbarCollapse = function() {
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-shrink");
    } else {
      $("#mainNav").removeClass("navbar-shrink");
    }
  };
  // Collapse now if page is not at top
  navbarCollapse();
  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);

  // Modal popup$(function () {
  $('.portfolio-item').magnificPopup({
    type: 'inline',
    preloader: false,
    focus: '#username',
    modal: true
  });
  $(document).on('click', '.portfolio-modal-dismiss', function(e) {
    e.preventDefault();
    $.magnificPopup.close();
  });

  // Floating label headings for the contact form
  $(function() {
    $("body").on("input propertychange", ".floating-label-form-group", function(e) {
      $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
    }).on("focus", ".floating-label-form-group", function() {
      $(this).addClass("floating-label-form-group-with-focus");
    }).on("blur", ".floating-label-form-group", function() {
      $(this).removeClass("floating-label-form-group-with-focus");
    });
  });

})(jQuery); // End of use strict

Kód je převzatý s jedné bootstrap šablony.

Doufám, že se mi podařilo srozumitelně vyvoslit o co mi jde a někdo poradí :)

Zkusil jsem: Zkusil jsem něco málo pokus omyl bez kýženého úspěchu.

Chci docílit: To už jsem popsal v dotazu...

 
Odpovědět
10.10.2018 19:58
Avatar
maaaca
Člen
Avatar
maaaca:17.10.2018 21:10

Vyřešeno přidáním atributu data-target="#neco" do menu.

 
Nahoru Odpovědět
17.10.2018 21:10
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.