Kevin Powell - Community•2mo ago

navbar sub-menu doesn't function properly

I'm working on a website and in hizmetler.php page I have three section (2nd photo). When I click a title in that menu, the div related to that title shows and other divs hide. I want to add the same function to the sub-menu in navbar (1st photo). If I'm in hizmetler.php page, the navbar sub-menu works. But if I am another page when i click a title in that menu it takes me to hizmetler.php but to the default not the related div. And when I try to go there from index.php it doesn't go to even hizmetler.php. I am not that good at javascript/jquery so any help would be really appreciated. This is navbar code:

<header>
    <a href="index.php" class="logo">
        <img src="assets/img/logo.png" alt="logo" height="50">
    </a>

    <input type="checkbox" id="menu-bar">
    <label for="menu-bar">Menü</label>

    <nav class="navbar">
        <ul>
            <li><a href="hizmetler.php">HİZMETLERİMİZ</a>
                <ul>
                    <li><a href="hizmetler.php" class="service-title" data-target="#section-one">ÇATI</a></li>
                    <li><a href="hizmetler.php" class="service-title" data-target="#section-two">ÇELİK</a></li>
                    <li><a href="hizmetler.php" class="service-title" data-target="#section-three">DİĞER</a></li>
                </ul>
            </li>
            <li><a href="#">REFERANSLARIMIZ</a></li>
            <li><a href="#">GALERİ</a></li>
            <li><a href="iletisim.php">İLETİŞİM</a></li>
        </ul>
    </nav>
</header>

<header>
    <a href="index.php" class="logo">
        <img src="assets/img/logo.png" alt="logo" height="50">
    </a>

    <input type="checkbox" id="menu-bar">
    <label for="menu-bar">Menü</label>

    <nav class="navbar">
        <ul>
            <li><a href="hizmetler.php">HİZMETLERİMİZ</a>
                <ul>
                    <li><a href="hizmetler.php" class="service-title" data-target="#section-one">ÇATI</a></li>
                    <li><a href="hizmetler.php" class="service-title" data-target="#section-two">ÇELİK</a></li>
                    <li><a href="hizmetler.php" class="service-title" data-target="#section-three">DİĞER</a></li>
                </ul>
            </li>
            <li><a href="#">REFERANSLARIMIZ</a></li>
            <li><a href="#">GALERİ</a></li>
            <li><a href="iletisim.php">İLETİŞİM</a></li>
        </ul>
    </nav>
</header>

1 Reply

ceyda•2mo ago

This is the menu and divs in hizmetler.php:

<div class="titles">
    <div class="service-title active" data-target="#section-one">
        <p>ÇATI</p>
    </div>
    <div class="service-title" data-target="#section-two">
        <p>ÇELİK</p>
    </div>
    <div class="service-title" data-target="#section-three">
        <p>DİĞER</p>
    </div>
</div>

<div class="services">
    <div id="section-one">
      ...
    </div>
    <div class="section-two">
      ...
    </div>
    <div class="section-three">
      ...
    </div>
</div>

<div class="titles">
    <div class="service-title active" data-target="#section-one">
        <p>ÇATI</p>
    </div>
    <div class="service-title" data-target="#section-two">
        <p>ÇELİK</p>
    </div>
    <div class="service-title" data-target="#section-three">
        <p>DİĞER</p>
    </div>
</div>

<div class="services">
    <div id="section-one">
      ...
    </div>
    <div class="section-two">
      ...
    </div>
    <div class="section-three">
      ...
    </div>
</div>

And this is the jquery:

$(document).ready(function() {

    $('#section-one').show();
    $('#section-two').hide();
    $('#section-three').hide();

    $('.service-title:not(li *)').click(function() {
        var target = $(this).data('target');
        $(target).show().siblings('div').hide();
        $(this).addClass('active').siblings().removeClass('active');
    });

    $('.navbar ul li ul li a').click(function(e) {
        e.preventDefault();

        var target = $(this).data('target');
        $(target).show().siblings('div').hide();

        $('.service-title[data-target="' + target + '"]:not(li *)').addClass('active').siblings().removeClass('active');
    });
});

$(document).ready(function() {

    $('#section-one').show();
    $('#section-two').hide();
    $('#section-three').hide();

    $('.service-title:not(li *)').click(function() {
        var target = $(this).data('target');
        $(target).show().siblings('div').hide();
        $(this).addClass('active').siblings().removeClass('active');
    });

    $('.navbar ul li ul li a').click(function(e) {
        e.preventDefault();

        var target = $(this).data('target');
        $(target).show().siblings('div').hide();

        $('.service-title[data-target="' + target + '"]:not(li *)').addClass('active').siblings().removeClass('active');
    });
});

Gaming

Programming

navbar sub-menu doesn't function properly