Secondary menu

Question

Secondary menu

Is there a way to create a sub navigation menu that only changes once I click a link in the main navigation bar, without refreshing the entire page? Any help would be greatly appreciated.

http://jsfiddle.net/qrn8Q/

Thank you.

HTML Code:

    <header class="header">
    <div class="container">
        <div class="header-primary_container">
            <a class="header_brand" href="#"></a>
            <div class="navigation-primary_right">
                <div class="navigation-primary">
                    <nav class="navigation-primary_links">  
                        <a href="" class="nav_icon selected">Home</a>
                        <a href="" class="nav_icon">Designs</a>
                        <a href="" class="nav_icon">About Us</a>

                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>
<nav class="sub_nav">
    <a href="index.php" class="sub_nav_icon">Home</a>
    <a href="index.php" class="sub_nav_icon">Sign in</a>
    <a href="index.php" class="sub_nav_icon">Sign up</a>
</nav>
</div>

html css navigation

Answer 1

Answer №1

To achieve this, consider using either Ajax or iFrame technologies. By attaching onclick events to the links, you can execute custom JavaScript functions to dynamically load the desired content.

Answer 2

To achieve this, consider using either Ajax or iFrame technologies. By attaching onclick events to the links, you can execute custom JavaScript functions to dynamically load the desired content.

Answer 3

Answer №2

If you want to achieve this functionality using jQuery, you can refer to the following code snippet. It's quite straightforward and easy to understand:

http://example.com/code-snippet

$('.nav_icon').click(function() {
    $('nav.sub_nav:visible').fadeOut(300); // 1
    $('.selected').removeClass('selected'); // 2
    var classKey = $(this).attr('id'); // 3
    $('nav.'+classKey+'_sub_nav').fadeIn(500); // 4
    $(this).addClass('selected'); // 5
    return false; // 6
});

In simple terms: when any of the .nav_icon elements are clicked, it will fade out the visible sub_nav (1), remove the .selected class from the previously selected icon (2), retrieve the id attribute of the clicked item (3), display the corresponding sub_nav by fading it in (4), add the .selected class to the clicked icon (5), and finally prevent the default link behavior with return false; (6).

I hope this explanation helps you get a head start.

Answer 4

If you want to achieve this functionality using jQuery, you can refer to the following code snippet. It's quite straightforward and easy to understand:

http://example.com/code-snippet

$('.nav_icon').click(function() {
    $('nav.sub_nav:visible').fadeOut(300); // 1
    $('.selected').removeClass('selected'); // 2
    var classKey = $(this).attr('id'); // 3
    $('nav.'+classKey+'_sub_nav').fadeIn(500); // 4
    $(this).addClass('selected'); // 5
    return false; // 6
});

In simple terms: when any of the .nav_icon elements are clicked, it will fade out the visible sub_nav (1), remove the .selected class from the previously selected icon (2), retrieve the id attribute of the clicked item (3), display the corresponding sub_nav by fading it in (4), add the .selected class to the clicked icon (5), and finally prevent the default link behavior with return false; (6).

I hope this explanation helps you get a head start.

Secondary menu

Answer №1

Answer №2

Similar questions

Can you suggest a method to align this form to the center?

TinyMCE toolbar missing the "hr" option

Ways to obtain the chosen option from a drop-down menu using jQuery

The alignment for Bootstrap's NAV element within a display:table-cell element seems to be off when viewed on Firefox浪

Adjust the size of an Angular component or directive based on the variable being passed in

PHP query returned no matches

Other browsers, such as Chrome and Firefox, are visible, except for Safari

What is the best way to implement a sub-menu using jQuery?

Enhancing Label and Input Elements with Dynamic CSS through jQuery Values

Open the .exe file using an HTML link in Firefox browser

Tips for positioning input fields and labels in both horizontal and vertical alignment

Ways to adjust the div height to match the span height

Content positioned to the left with a clickable button aligned to the right all in one row

Is it possible to conceal a form field until a previous field has been completed?

The div is not showing the image as expected

Insert Angular HTML tag into TypeScript

What is the best way to check the CSS attributes of a React component with react-testing-library?

Create JavaScript variable from either HTML or database sources

Styling tricks for rotating carousel images using CSS animations

What is the default DTD used if it is not specified in the doctype declaration?