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

Experiencing problems with web page layout when using bootstrap on IE8?

Could it be that the function is returning undefined because console.log is executing before the result is actually returned? Perhaps a promise

Generating an interactive Datepicker using Jquery

What steps are needed to enable the keyboard on a Otree application for mobile devices?

Tips for changing the page URL upon click in a Vue.js application

"Unable to locate the specified file or directory" error message pops up while attempting to save a file

Creating your own personalized menu in PHP

``Changing the value of the radio button does not update the ng-model variable

How to eliminate escape characters in Jquery Post requests

Dealing with rowspan and colspan issues in Internet Explorer

Searching for a point within a specified range using Sequelize

Unusual occurrence with the nth-child selector

Tips for removing duplicate objects from an array

Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

Is there a way to place the icon on the right side of the @mui/Chip component?

Can CSS be used to consistently position content in a specific manner?

Silhouette as the backdrop image

When the menu active item is clicked, the header will automatically scroll to the top

Does aoMap function exclusively with THREE.BufferGeometry?

Selector matching a descendant element in React styling