What are some alternative ways to arrange this main navigation bar?

Check out the website, below the map you'll find an unordered list:

HTML code:

<ul class="play_navigation">
    <li class="active"><a href="#" class="barino_story_bottom">The Story</a></li>
    <li><a href="#" class="barino_video_bottom">The Video</a></li>
    <li><a href="#" class="barino_gallery_bottom">The Gallery</a></li>
    <li><a href="#" class="barino_equipment_bottom">The Equipment</a></li>                          
</ul>

CSS styles:

ul.play_navigation {
    list-style:none;
    padding:0;
}

ul.play_navigation li  {
    display: inline;
}

ul.play_navigation li a {
    color: #00506B;
    font-family: Helvetica,sans-serif;
    font-weight: bold;
    padding-right: 34px;
    text-decoration:none;
    margin-left: 18px;
}

ul.play_navigation li.active {
    background:url(images/play-button.png) no-repeat left;
}

Everything looks good, but I'm facing an issue. The play button isn't clickable as it's currently within an li element. I also need to move the active play button to the link that is clicked by the user. I was thinking of using jQuery to add/remove classes, but with some animation effects. Any suggestions for implementing this?

jqueryhtmlcssxhtml

Answer №1

@Tamer - In order to add a click handler to the specified li element, you can use jQuery like this:

$("li.active").click(function(){

    // Add the actions you want to take when the play button is clicked here

});

Additionally, ensure that your CSS indicates to the user that the play button is clickable by adding the cursor property:

ul.play_navigation li.active {

    background:url(images/play-button.png) no-repeat left;
    cursor: pointer;

}

You have flexibility in how you move the play button based on which link is clicked, but one way to do it is shown below:

$("ul.play_navigation > a").click(function(){

    $("li.active").removeClass("active");
    $(this).parent().addClass("active");

});

Keep in mind that this approach will require adjustments to your CSS:

ul.play_navigation li.active

Would need to be changed to:

.active

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is animation not functioning for SVG path within a clip path on Firefox?

Creating the HTML for a unique effect: <svg class="svg-defs2" version="1.1" xmlns="http://www.w3.org/2000/svg" height="200" width="640"> <defs> <clipPath id="clipping2"> <!--Adjusting the x-coordinate of start will expand ...

cssfirefoxsvg

Optimal methods for refreshing website lists

I've designed an ASP.NET MVC application with a list that displays all the current items from a database. There is also a button that triggers a popup-dialog to create a new entry. The goal is to automatically add the new item to the list once it is c ...

c#htmlajaxlistmodel-view-controller

Tips on creating a script for detecting changes in the table element's rows and columns with the specified data values

I have a div-based drop-down with its value stored in TD[data-value]. I am looking to write a script that will trigger when the TD data-value changes. Here is the format of the TD: <td data-value="some-id"> <div class="dropdown">some elements& ...

javascriptjqueryhtml

Linking children to their parents in a mat tree structure

I'm looking to create a mat tree based on the provided diagram. So far, I've managed to design the icons and boxes, but I'm struggling with drawing the connecting lines. Can anyone assist me with this part? I'm using a mat nested tree ...

cssangulartreeangular-material

Locate all elements by a segment of the identification attribute

Is it feasible to achieve the following: I possess a collection of divs, all having IDs that conclude with '_font', such as 'body_font', 'heading_font', 'tagline_font', and so on. Is there a method to retrieve thes ...

javascriptjquery

Are image collections featuring the <img> tag available?

I am working on a website project and I'm looking for a way to create a gallery with a group of photos. The challenge is that I am using Spring MVC, which means regular js and jquery plugins may not work with my 'img src..' tags. Are there a ...

javascriptjqueryhtmlcss

Applying CDNJS CSS or external CSS to Nodemailer HTML templates with Jade and Express: A Guide

I am attempting to send emails using node mailer. I have a jade template with HTML markup in an external file, which is compiled and rendered correctly. However, the styles inserted through maxcdn or cdnjs are not being applied. In this situation, how can ...

javascripthtmlnode.jsemailexpress

Efficient arrow function usage in jQuery map functionality

Looking to implement an arrow function in jQuery's map function. However, after trying the following code snippet, titlesText ends up being the correct length but with empty strings: let titles = $(panelBody).find('h4'); let titlesText = $(t ...

javascriptjqueryarrow-functionsmap-function

Simple steps to generate a static header in list view on asp.net

I'm struggling to keep my header fixed while scrolling and can't seem to figure it out. Below is my ListView Code: <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="FormSectionSubSectionItemRelID" OnSele ...

cssasp.netlistview

Resolving Problems with setInterval in jQuery Ajax Calls on Chrome

Seeking assistance in returning the value of a specific URL periodically using jQuery and setInterval. Below is my current code snippet: $("form").submit(function() { setInterval(function(){ $('#upload_progress').load(&ap ...

javascriptjqueryajax

Altering webpage content through the use of Ajax

I need a solution for dynamically updating web page content using JavaScript AJAX. One idea I had was to store different div layouts in separate files, like so: BasicDiv.div: <div> <p>Some Text</p> <button> A Button </ ...

javascripthtmlajax

Restrict the duplication of div elements with JQuery

Here is the structure I'm working with: <div class="checkmark-outer"> <div class="checkmark-33"> <div class="fa-stack fa-1x checkmark-icon"> <i class="fa fa-circle fa-stack-2x icon-background"></i> ...

javascriptjqueryhtmlcsslimit

Head over to the registration page if your login attempt is unsuccessful

I am currently working on developing a basic login page. The process involves users signing up on the register page first, and then attempting to log in. If the login credentials match with the database, they are directed to the homepage. However, if the u ...

javascriptphphtmlmysqldatabase

The Angular service successfully provides a value, yet it fails to appear on the webpage

Currently, I am starting to dive into Angular from the ground up. One of my recent tasks involved creating a component called 'mylink' along with a corresponding service. In my attempt to retrieve a string value from the service using 'obse ...

htmlangulartypescript

Unable to choose radio button again

Check out this fun web quiz I created! I'm having some trouble with the back button functionality. Whenever a user clicks back, I want to restore their previous choice but for some reason it's not working as expected. Take a look at my go_back ...

javascriptjqueryjsonhtmlradio-button

Problems with Nested Loops in JavaScript

I have a nested loop structure that looks like this: var len = bolumlerUnique.length; function sendSections() { for (i = 0; i < bolumlerUnique.length; i++) { elementSections = $("[sectionid=" + bolumlerUnique[i] + "]:checked"); cons ...

javascriptjqueryfor-loop

Implementing beforeSend and complete in all instances of ajaxForm throughout the entire application as a universal

Is there a way to use the beforeSend and complete functions on all ajaxForms within a project without having to repeatedly insert the same code throughout the entire project? I have managed to achieve this by adding the following code for each form indivi ...

javascriptjqueryajaxajaxform

I am seeking guidance on how to update the HTML content being viewed in the browser when a user changes the selected option within a <select> element in ASP.NET

Hello, I'm just starting to learn about web development and ASP.Net. Can anyone help me figure out how to dynamically change the HTML content displayed in the browser when the user selects a different option from a <select> element? @*DropDown: ...

htmlasp.netasp.net-mvcrazor

Progress Bar HTML with PHP

Looking for a way to enhance user experience on a website form that utilizes PHP for data submission? How about incorporating a progress bar that visually indicates the form is processing in order to prevent users from clicking the button multiple times af ...

phphtmlcss

Looking for a carousel slider with thumbnails that allows you to customize the position of the thumbnails? Let me

I am currently using bxslider for my sliders on the website. However, I am facing an issue where the thumbnails are overlapping the main image and I am unable to adjust their position. You can check out the live site at or navigate to any gallery from t ...

jqueryajaxbxslider