Could you please explain how to make a WordPress navigation menu that switches the background image when hovered over?

I came across a website with a very interesting navigation style that caught my attention. You can see it here: . What intrigued me the most was how when you hover over each menu item, the main picture changes.

I attempted to incorporate jQuery into the class to achieve a similar effect, but unfortunately, I couldn't get it to work at all.

$(".nav-item1").hover(function){
  $(".bg-nav").css('background','url('images/bg2.jpg')');
}

Is there perhaps a plugin or more advanced jQuery techniques that could help me achieve this functionality?

I would greatly appreciate any guidance on this matter.

Thank you in advance.

javascriptjquerycsswordpressmenu

Answer №1

body {
font-family: verdana,arial,sans-serif;
    font-size: 20px;
}
#nav,#nav ul{
line-height: 50px;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
a{
background-color: #B7AF0E;
    border: 1px solid #B7AF0E;
    color: #FFFFFF;
    display: block;
    padding: 0 5px 0 10px;
    text-decoration: none;
}
a:hover{
background-color:#F8EBA5;
color:#77885B;
}
#nav li{    float: left;
    position: relative;
}
#nav ul {
position:absolute;
display:none;

}
#nav ul li a {
    width: 140px;
    float: left;
    height: auto;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:6em;
margin:0px 0 0 35px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
</style>
<script>
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show();
        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });
}



 $(document).ready(function(){                  
    mainmenu();
});
</script>`<body>
  
<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Gallery</a>
        <ul>
            <li><a href="#">Gallery 1</a>
                <ul>
                <li><a href="#">Gallery 1.1</a></li>
                <li><a href="#">Gallery 1.2</a></li>
                </ul>
            </li>
            <li><a href="#">Gallery 2</a>
                <ul>
                    <li><a href="#">Gallery 2.2</a></li>
                    <li><a href="#">Gallery 2.2</a></li>
                </ul>   
            </li>
            <li><a href="#">Gallery 3</a></li>
        </ul>
    </li>
    <li><a href="#">Portfolio</a>
        <ul>
            <li><a href="#">PHP</a>
                <ul>
                <li><a href="#">Wordpress</li>
                <li><a href="#">Magento</li>
                </ul>
            </li>
            <li><a href="#">ASP.NET</a>
                <ul>    
                    <li><a href="#">Project 1</a></li>
                    <li><a href="#">project 2</a></li>
                </ul>       
            </li>

        </ul>   
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
</body>`

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

What could be causing the extra space around my body on mobile devices?

I am currently delving into the world of responsive design, starting from square one. My aim is to create a minimalist webpage with no side margins. However, when viewing it on an iPhone, there still seems to be a significant white margin on either side. T ...

cssresponsive-design

Updating ngRepeat Array Data in AngularJS using Events

I'm currently in the process of transitioning my jQuery application to AngularJS. One of the tasks I need to accomplish involves updating the Data Array whenever a scroll event occurs. How can I achieve this? Here is the existing jQuery code at Plun ...

javascriptangularjsangularjs-directiveangularjs-ng-repeatangularjs-filter

Assign Monday as the selected day of the week in the MUI Datepicker 6

I am currently using version 6 of the material ui Datepicker and I am trying to configure it so that the week starts on Monday. import React from "react"; import { DatePicker as DatePickerDestop } from "@mui/x-date-pickers/DatePicker"; ...

javascriptreactjsangularmaterial-uimui-x-date-picker

After incorporating an additional element, the li:nth-child(odd) selector is no longer functioning correctly

I previously had a setup where items in a list would have alternate colors using jQuery: $('ul.follows li:nth-child(odd)').addClass('alternate'); Everything was functioning properly until I introduced an a tag before the list items. N ...

jquerycss

Programmatically adding route resolve in Angular using $routeProvider

Is it possible to dynamically add Angular's resolve after it has been initially defined in the app? Let's say we have a setup with routes like this: app.config(['$routeProvider', function ($routeProvider) { $routeProvider ...

javascriptangularjsangular-ui-router

Cocos2D-JS is unable to import a json file that has been exported from CocosStudio

Trying to import a json file that was exported from cocosstudio v2.3.2 var myScene = ccs.sceneReader.createNodeWithSceneFile('res/Scene.json'); Found this code in the sample-cocos2d-js-scene-gui-master repository. Encountering an error: Can& ...

javascriptjsoncocos2d-iphonecocos2d-jscocos2d-html5

Tips for expanding the width of Bootstrap modal using animation

Is there a way to resize my Bootstrap 5 modal width and add an animation effect when it expands? I've tried using animate and transition in my style-css but haven't had any success so far. I've looked at other solutions online, but none seem ...

javascriptcssbootstrap-modalbootstrap-5

Alter the design when hovering over a relevant element

How can I change hover styles for specific items in React? Currently, all item styles change at once when hovered. I want to only change the style of the selected div when hovering over the add to cart button. Visit this link import React, { useState } fr ...

javascriptreactjshoverdestructuringonmouseover

What is the best way to create a moving line using EaselJS and TweenJS?

My objective is to animate a line from point A to point B using the Tween function. I am utilizing the EaselJS drawing library and TweenJS for animation. Can I achieve this by using the moveTo function to animate a straight line from point A to point B? ...

javascriptcanvascreatejseaseljstween.js

What is causing the most recent iPhones to have issues with my Javascript code?

After analyzing my webserver logs, it appears that an iOS 14 device is categorizing one of my Javascript files as "injected". This file seems to be operating in a separate environment or namespace. As a result, any AJAX attempts made by the script fail bec ...

javascriptenvironmentinject

Unable to show information within input field

I am attempting to present the value of my variable in a textBox using Jade, but I am encountering issues. I have tried the following options: value="#{startDate}" value="#{{startDate}}" value="{startDate}" value={{startDate}} I am aware that it is func ...

javascripthtmlpug

Having trouble interacting with element - Selenium WebDriver is not allowing the click

I'm attempting to select the Checkout Button. This is what it looks like : https://i.stack.imgur.com/TiMEO.png And here's the HTML snippet for it : <div id="buy-button-next"> <span data-reactroot=""> <div data-cid="buy- ...

javacssseleniumselenium-webdriverxpath

What is the best way to customize the primary Button style in Bootstrap?

Would you like the background-color to change when clicking on the radioButton? .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus { background-color: black !important; color: white !important; } .btn-primary { colo ...

htmlcssangularbootstrap-4angular6

Adjust the size of the image as needed in order to fit within a container of fixed

Is there a clever way to use CSS and/or JavaScript/jQuery to adjust the size of images only when necessary for them to fit within a fixed-height container alongside the remaining content? Upon reviewing the images in the 'new this week' and &apos ...

javascriptjqueryhtmlcss

Analyzing JSON information using an AJAX request from a local file

I have a PHP file on a web server that is executing queries to a MySQL database. Currently, I am testing a site on my local PC which utilizes a JS file with AJAX requests to retrieve JSON data from the mentioned PHP file. My question is whether it is fea ...

javascriptphpmysqlajaxjson

Exploring the Power of Bootstrap 5 and WordPress with the Navbar-Walker

For the first time, I am attempting to incorporate Bootstrap 5.2 into a WordPress site (currently conducting a local test). To achieve this, I am utilizing the wp-bootstrap-walker I stumbled upon at https://github.com/wp-bootstrap/wp-bootstrap-navwalker/ ...

phpwordpresswordpress-themingbootstrap-5

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...

javascripthtmlcssanimation

Developing Reactive Selections with Material-UI is made easy

After spending about 5 hours on a task that I thought would only take 15 minutes, I still can't figure out the solution. The issue is with my React App where I have two dropdowns in the Diagnosis Component for users to select Make and Model of their a ...

javascriptreactjsreact-hooksmaterial-uidropdown

Using Selenium with C# to automate interactions with Google Chrome's drop-down menu

Let me break this down for you. When running tests, I use the three main browsers: Firefox, Chrome, and IE. In one of my lines of code, I extract data from a dropdown menu using the following snippet: new SelectElement(CPC_Main.driver.FindElement(By.XPat ...

c#seleniumdrop-down-menumenu

AngularJS - Swipe to update

I've been trying to use the pull to refresh plugin for Angular JS, but unfortunately it's not working for me. Even though I can see the text, when I try to pull nothing happens! I followed all the steps outlined on this GitHub page: https://githu ...

javascriptangularjs