I possess a primary menu with several submenus, yet I am encountering difficulty accessing the submenus. My goal is to efficiently navigate and access the appropriate submenu within the main menu

I am facing an issue with my CSS where the sub menu is currently showing from the left side, but I would like it to slide up and down instead.

   .outer
{
    width: 100%;
    text-align: center;
    background-color: Gray;
    padding-top: 20px;
    border-radius: 30px;
}
.g_logo
{
    width: 20%;
    color: White;
    float: left;
    padding-left: 5%;
    font-family:st @Gulim;
    padding-bottom: 10px;
}
.g_home
{
    width: 15%;
    color: Black;
    float: left;
    padding-left: 1%;
    font-family:@Gulim;
}
.g_services
{
    width: 15%;
    color: Black;
    float: left;
    padding-left: 1%;
    font-family: @Gulim;
}
.g_achvmnt
{
    width: 14%;
    color: Black;
    float: left;
    padding-left: 1%;
    font-family: @Gulim;
}
.g_cnct
{
    width: 15%;
    color: Black;
    float: left;
    padding-left: 1%;
    font-family: @Gulim;
}
.clear
{
    clear: both;
}

.g_home_items
{
    margin-left: 28%;
    background-color: Purple;
    float: left;
    width: 15%;
}
.g_services_items
{
    margin-left: 42%;
    background-color: silver;
    float: left;
    width: 15%;
      border-radius:5px;
}
.g_achvmnt_items
{
    margin-left: 57%;
    background-color: Purple;
    float: left;
    width: 15%;
}
.g_cnct_items
{
    margin-left: 72%;
    background-color: AppWorkspace;
    float: left;
    width: 15%;
}

I need help with my Jquery code as well. When I hover over the menu, the sub-menu appears but I cannot access it. Can someone please assist me in fixing this?

                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
                    </script>
                    <script>
                        $(document).ready(function () {
                            $(".g_services_items").hide();
                            $(".g_services").hover(function () {            
                                $(".g_services_items").toggle("slow");
                            });


                        });
                    </script>






 **HTML FILE this is my HTML coed plzzz help me for this**




                    <body>
                        <form id="form1" runat="server">
                        <div class="outer">
                            <div class="g_logo">
                                LOGO
                            </div>
                            <div class="g_home">
                                HOME
                            </div>
                            <div class="g_services">
                                SERVICES
                            </div>
                            <div class="g_achvmnt">
                                ACHIEVMENTS
                            </div>
                            <div class="g_cnct">
                                CONTACT US
                            </div>
                            <div class="clear">
                            </div>
                        </div>

                         <div class="g_services_items">
                            <li class="mega first haschild">
                                <ul class="megamenu level1">
                                    <li class="mega first"><span class="menu-title">T-shirts</span></li>
                                    <li class="mega"><span class="menu-title">Sport shoes</span></li>
                                </ul>
                            </li>
                        </div>

                        </form>
                    </body>
javascriptjquerycss

Answer №1

Without seeing your css code, it's hard to pinpoint the exact issue with your submenu display, but this is a common problem.

The typical scenario is that when you hover over 'services', the sub menu appears, but as soon as you try to click on something within the submenu, it disappears.

To address this problem, consider keeping the submenu visible with the following jQuery script:

  $(document).ready(function () {
       $(".g_services_items").hide();
       $(".g_services, .g_services_items").on("mouseover",function () {
           $(".g_services_items").stop().show("slow");
       });
        $(".g_services, .g_services_items").on("mouseleave",function () {
           $(".g_services_items").stop().hide("slow");
       });
   });

You can see how this solution works in action Here

Here's an explanation of what the code does:

  • Rather than toggle the submenu, it uses show() and hide() methods.
  • The menu will appear when the mouse hovers over 'services' or the submenu itself.
  • The submenu will disappear when the mouse moves away from both 'services' and the submenu.
  • The .stop() function helps prevent animation conflicts by ensuring one animation completes before another begins.

In addition, if your menu is showing up from the left due to specific CSS properties like margin-left and float:left, consider removing those properties and adjusting the positioning with jQuery instead. See an updated example Here

Answer №2

Experimenting with the hide and show functionality, utilizing mouse over and leave events.

    $(".g_services_items").hide();
     $(".g_services").hover(function (e) {            
     $(".g_services_items").show("slow");
                        })
    $(".g_services_items").hover(function () {            
                            $(this).show("slow");
                         }).mouseleave(function(){
                         $(this).hide();
                         })
       });

Check out the demonstration here: LIVE EXAMPLE

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

Unable to modify array state with data from another state

Two state objects are at play here. The first is personnel, which consists of an array of 1-object arrays structured like this: [[{}],[{}],[{}],[{}],...]. The second state object is rowItems, where the goal is to extract all objects from the inner arrays o ...

javascriptarraysreactjsmaterial-uirelay

"Utilizing mouseleave event to trigger an AJAX request in

Could an ajax request be initiated from a mouseleave event? My goal is to send the string 'Y' when the mouse exits the li element in order to update the database. Do you think this is feasible? (function(){ $('li#myId').mouseenter(f ...

jqueryajax

Creating an image rollover effect when hovering between two images

I am currently working with React and trying to change 2 images by hovering over them. Here is what I have accomplished so far: Card.js <div className="image-wrapper"> <img src={sprites.front_default} className="image" a ...

cssreactjsimagehoverrollover

Creating distinctively tinted vertices for every subdivision step is simple with the following technique

I am currently working on an application that utilizes different standard geometries, such as box geometry. The application can apply up to 5 levels of subdivision on the original geometry. I am facing challenges in coding a color-coding system for the ver ...

javascriptthree.js3dgeometryvertices

In order for Angular jQuery click events to properly function, they must be triggered by a

My admin panel is built using jQuery and Bootstrap, and it functions properly when used outside of the Angular framework. However, after integrating jQuery and Bootstrap into an Angular project and configuring them, I noticed that I had to double click on ...

jqueryangulartypescriptevent-handlingdom-events

Trigger function in React after the page finishes loading

I have a scenario where I need to display images onDrop within one of my components. To ensure a smooth drop experience, I am considering preloading the images using the following approach: componentDidMount(){ this.props.photos.forEach(picture => ...

javascriptreactjs

Arrange three div elements to create a layout that is optimized for different screen sizes

Is there a way to align these 3 divs as follows: pickup on the left, phone in the middle, and delivery on the right? I've browsed through similar alignment issues on Stack Overflow, but none of the solutions seem to work for my specific code. It' ...

htmlcssalignmentcenter

jQuery user interface Dialog buttons

Is it possible to access the button within a click event handler when creating a dialog with buttons like: buttons: { 'button text': function(){ // do something }, In this ...

jqueryjquery-ui

The scale configuration for scale: x is not valid for creating a time scale chart using chart.js

I am currently utilizing VueJS and attempting to integrate a time scale chart using Chart.js. However, I encountered the following error: Invalid scale configuration for scale: x Below is my configuration : First, I have a component named Chart.vue with ...

javascriptvue.jschart.js

Creating a basic popup with jQuery: A step-by-step guide

Currently in the process of creating a webpage. Wondering how to create a popup window with an email label and text box when clicking on the mail div? ...

javascriptjquerycssajaxpopup

Post request sent from jQuery to Node.js using the POST method

I can't seem to figure out what's going wrong, as my AJAX call using jQuery isn't passing values to my Node Express App. The console log output is showing "{}" Interestingly, when I tried using curl, it worked perfectly fine unlike the jQue ...

jquerynode.jsexpress

Problematic PHP/AJAX: How come my getAttribute function is only selecting the initial line within the foreach loop?

My goal here is to display a list of users, each with a button that sends unique IDs to the database. The issue I'm facing is that the code only works for the first user in the list and not the rest. I suspect this is because every list item has the s ...

phpjqueryarraysajax

Javascript does not have the capability to interact directly with HTML code

I am facing an issue with my JSP code that is supposed to validate password and confirm password before submitting the form to a Java servlet. The problem is, even though I have written the validation script, it does not show alert messages or focus on t ...

javascriptjavahtmljsp

"Utilizing jQuery to Connect with Google's Services

I'm trying to figure out how this Google code works. Here's what I have: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

jqueryuser-interfacegoogle-code

Posting JSON data in MVC4 to upload a large amount of data into the database

When I upload Bulk Entries in my Database using JSON, I encounter a problem with the last table column as it is showing null entries. Below are my controller model and JSON data. What could be wrong with this code? This is my Controller public void ESBul ...

jqueryasp.net-mvcjsonasp.net-mvc-4

If the first <select> option is chosen, then a second <select> validation is necessary

Is it possible to make the second selection required for validation only if the 'yes' option is selected in the first one? <div class="form-group" ng-class="{ 'has-error' : articleEditForm.pnp.$invalid && !articleEditForm.pn ...

javascriptangularjsvalidationselect

increasing the size of the drop-down menu width

I have been struggling to adjust the width of my dropdown list box on my page. Despite my efforts, I cannot seem to make it bigger. Here is the code snippet causing me trouble: <div class="form-group row"> <div class="col-sm-1&quo ...

cssasp.netbootstrap-4

Is there a way to make a button on a single div only affect that specific div

I have a PHP query that echoes a div for each row in the table. I want the div to slide up and then, when the user clicks the "read more" button, the div slides down. However, since it is echoed in a loop, all the divs have the same IDs and classes. I wo ...

javascriptjqueryhtmlcss

What methods can Cypress use to validate content containing hyperlinks?

My current task is to develop an automation test that confirms the presence/display of content containing a hyperlink embedded within text. Please refer to the screenshot I have provided for better understanding, as it illustrates the specific content encl ...

javascripttestingautomationautomated-testscypress

"Cross-origin resource sharing problem while working with NodeJs, Express, and React on

Currently, I am working on a small project where I am using NodeJs and Express for the backend and React for the client side. In order to tackle CORS policy issues, I have implemented the "cors" npm package on the server side, but unfortunately, it doesn& ...

javascriptnode.jsreactjsexpresscors