Transforming the navigation menu using CSS, HTML, and jQuery

Question

Transforming the navigation menu using CSS, HTML, and jQuery

One challenge I am facing involves creating a menu similar to the one on http://edition.cnn.com/.

I want the clicked button in the menu to receive focus, while the others lose it. Despite trying various methods, I have not been successful. Can someone offer guidance on how to accomplish this?

Another approach I considered: Putting focus in Html.ActionLink menu

Specifically, I wish for the selected button to retain focus after clicking, even after refreshing the page, with other buttons returning to their normal state or reverting back if previously selected.

Any suggestions would be greatly appreciated. Thank you.

javascript jquery html css

Answer 1

Answer №1

CHECK OUT THE FIDDLE DEMO!

Hopefully this solution works for you!

$(function(){
    var jqMenu = $("#nav_menu").menu();

    $("#btn1").click(function(){
        try{
            jqMenu.menu( "focus", null, jqMenu.find("#item1"));
        }
        catch(exc){
            alert("An error occurred: "+exc);
        }
    });
    $("#btn2").click(function(){
        try{
            jqMenu.menu( "focus", null, jqMenu.find("#item2"));
        }
        catch(exc){
            alert("An error occurred: "+exc);
        }
    });
    $("#btn3").click(function(){
        try{
            jqMenu.menu( "focus", null, jqMenu.find("#item3"));
        }
        catch(exc){
            alert("An error occurred: "+exc);
        }
    });
});

Answer 2

CHECK OUT THE FIDDLE DEMO!

Hopefully this solution works for you!

$(function(){
    var jqMenu = $("#nav_menu").menu();

    $("#btn1").click(function(){
        try{
            jqMenu.menu( "focus", null, jqMenu.find("#item1"));
        }
        catch(exc){
            alert("An error occurred: "+exc);
        }
    });
    $("#btn2").click(function(){
        try{
            jqMenu.menu( "focus", null, jqMenu.find("#item2"));
        }
        catch(exc){
            alert("An error occurred: "+exc);
        }
    });
    $("#btn3").click(function(){
        try{
            jqMenu.menu( "focus", null, jqMenu.find("#item3"));
        }
        catch(exc){
            alert("An error occurred: "+exc);
        }
    });
});

Answer 3

Answer №2

It's possible that I may not be completely correct, but it seems like this is what you're referring to...

If your navigation menu is structured as a list, it would look something like this:

<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>

To style these links, you can use the following CSS:

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

If you want to change the style of the entire list item, you can do so like this:

li {
    background-color: green;
}

For more tutorials on styling links, you can visit W3 Schools.

Answer 4

It's possible that I may not be completely correct, but it seems like this is what you're referring to...

If your navigation menu is structured as a list, it would look something like this:

<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>

To style these links, you can use the following CSS:

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

If you want to change the style of the entire list item, you can do so like this:

li {
    background-color: green;
}

For more tutorials on styling links, you can visit W3 Schools.

Answer 5

Answer №3

Your question lacks clarity, so let's take a stab at interpreting it:

Here is an example of the code that you might be looking for:

<nav>
    <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
    </ul>
</nav>

For Javascript (assuming you are using jquery):

$(function() {
    $("nav ul li").click(function() {
        $("nav ul li").not(this).removeClass("active");
        $(this).addClass("active");
    });
});

And here is some sample CSS to go along with it:

nav ul { list-style-type: none; }
nav ul li { float: left; cursor: pointer; padding: 10px; background-color: #eee; }
nav ul li.active { background-color: red; color: white; }
nav ul li:hover:not(.active) { background-color: #ccc; }

You can view a working demo on jsfiddle here: http://jsfiddle.net/6UdkD/1/

Answer 6

Your question lacks clarity, so let's take a stab at interpreting it:

Here is an example of the code that you might be looking for:

<nav>
    <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
    </ul>
</nav>

For Javascript (assuming you are using jquery):

$(function() {
    $("nav ul li").click(function() {
        $("nav ul li").not(this).removeClass("active");
        $(this).addClass("active");
    });
});

And here is some sample CSS to go along with it:

nav ul { list-style-type: none; }
nav ul li { float: left; cursor: pointer; padding: 10px; background-color: #eee; }
nav ul li.active { background-color: red; color: white; }
nav ul li:hover:not(.active) { background-color: #ccc; }

You can view a working demo on jsfiddle here: http://jsfiddle.net/6UdkD/1/

Transforming the navigation menu using CSS, HTML, and jQuery

Answer №1

Answer №2

Answer №3

Similar questions

"Enhancing Code Functionality in React - Seeking Ways to Improve

Text flickering unexpectedly during hover animation in Bootstrap

Guidelines on Transferring Variables to a JavascriptExecutor Script

Reduce XSLTProcessor output by 50%

Invoking Ajax within a for loop

Querying with Codeigniter in Ajax Data table only returns a single row

Having trouble positioning a specific element at the top right of the header navbar in Laravel Bootstrap 5

The dynamic import() syntax is not compatible with the target environment, preventing the use of external type 'module' in a script

Create a new tab without triggering the pop-up blocker by utilizing an iframe's JavaScript event

Insert information into a nested array using Mongoose

Encountering a "Evaluation Failed" error while scraping YouTube data with Puppeteer and Node.js

Exploring Angular modules has shed light on a certain behavior that has left me puzzled - specifically, when diving into JavaScript code that includes the

"Enhancing Collaboration with NextJs Multi-Zones' Unified Header

What is the reason for not receiving a JSON object in the response from my personal node.js/express server?

Tips for selecting array [0] and turning it into a clickable link with JavaScript

What is the process of nesting widgets in kendoui with the PHP wrapper?

When utilizing a computed property that accesses the Vuex state, the v-if directive alone may not function as expected without

Angular: Built-in solution for managing unhandled HTTP errors

Tips for expanding third-party classes in a versatile manner using Typescript

What steps do I need to take to ensure that Phaser implements modifications made in my game.js file?