javascript - How to keep close a sub-menu under homepage?

admin管理员组

文章数量:1022736

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

I am facing an issue in the Avada vertical menu when the homepage is opened. Please note that all "Home", "Company profile" and "Servizi" link to the same page (the homepage).

The sub-menu under "Servizi" is already opened while I would prefer it was closed by default, and that it could be opened simply by hovering "servizi", as it works properly when you try hovering "Servizi" from both "Clienti" and "Contatti".

I am pretty sure there is an option in Avada/WP to do that, or otherwise by adding some JS code, but I really have no idea how to do it!

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

I am facing an issue in the Avada vertical menu when the homepage is opened. Please note that all "Home", "Company profile" and "Servizi" link to the same page (the homepage).

The sub-menu under "Servizi" is already opened while I would prefer it was closed by default, and that it could be opened simply by hovering "servizi", as it works properly when you try hovering "Servizi" from both "Clienti" and "Contatti".

I am pretty sure there is an option in Avada/WP to do that, or otherwise by adding some JS code, but I really have no idea how to do it!

• javascript
• css
• sub-menu

Share Improve this question edited May 6, 2019 at 11:40 norman.lol 3,24133 gold badges3030 silver badges3535 bronze badges asked May 6, 2019 at 7:11 Tommaso CerciTommaso Cerci 1544 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

To do that, you have to set hidden attribute to the sub menu.

CSS

#wrapper .fusion-vertical-menu-widget.left .menu .sub-menu {
    display: none;
}

to toggle display on the menu on hover over servizi, you can add jQuery hover to the menu item.

jQuery

var subMenu = jQuery("#wrapper .fusion-vertical-menu-widget.left .menu .sub-menu");

jQuery("#menu-item-12049").hover(function(){
   subMenu.show();
  }, function(){
   subMenu.hide();
});

Note: You should change the class values to more appropriate values, these are just extracted from what I saw, but probably a good idea to get better css selectors

So, now it works perfectly as I would like when you hover "servizi"! The only problem is for the sub-menu single pages, where the sub-menu should remain opened always, like it did before

This is the code used currently in avada theme options:

<script>
jQuery(document).ready(function($){
var subMenu = jQuery("#wrapper .fusion-vertical-menu-widget.left .menu .sub-menu");
jQuery("#menu-item-12049").hover(function(){
subMenu.show();
}, function(){
subMenu.hide();
});
});
</script>

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

I am facing an issue in the Avada vertical menu when the homepage is opened. Please note that all "Home", "Company profile" and "Servizi" link to the same page (the homepage).

The sub-menu under "Servizi" is already opened while I would prefer it was closed by default, and that it could be opened simply by hovering "servizi", as it works properly when you try hovering "Servizi" from both "Clienti" and "Contatti".

I am pretty sure there is an option in Avada/WP to do that, or otherwise by adding some JS code, but I really have no idea how to do it!

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

I am facing an issue in the Avada vertical menu when the homepage is opened. Please note that all "Home", "Company profile" and "Servizi" link to the same page (the homepage).

The sub-menu under "Servizi" is already opened while I would prefer it was closed by default, and that it could be opened simply by hovering "servizi", as it works properly when you try hovering "Servizi" from both "Clienti" and "Contatti".

I am pretty sure there is an option in Avada/WP to do that, or otherwise by adding some JS code, but I really have no idea how to do it!

• javascript
• css
• sub-menu

Share Improve this question edited May 6, 2019 at 11:40 norman.lol 3,24133 gold badges3030 silver badges3535 bronze badges asked May 6, 2019 at 7:11 Tommaso CerciTommaso Cerci 1544 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

To do that, you have to set hidden attribute to the sub menu.

CSS

#wrapper .fusion-vertical-menu-widget.left .menu .sub-menu {
    display: none;
}

to toggle display on the menu on hover over servizi, you can add jQuery hover to the menu item.

jQuery

var subMenu = jQuery("#wrapper .fusion-vertical-menu-widget.left .menu .sub-menu");

jQuery("#menu-item-12049").hover(function(){
   subMenu.show();
  }, function(){
   subMenu.hide();
});

Note: You should change the class values to more appropriate values, these are just extracted from what I saw, but probably a good idea to get better css selectors

So, now it works perfectly as I would like when you hover "servizi"! The only problem is for the sub-menu single pages, where the sub-menu should remain opened always, like it did before

This is the code used currently in avada theme options:

<script>
jQuery(document).ready(function($){
var subMenu = jQuery("#wrapper .fusion-vertical-menu-widget.left .menu .sub-menu");
jQuery("#menu-item-12049").hover(function(){
subMenu.show();
}, function(){
subMenu.hide();
});
});
</script>

本文标签： javascriptHow to keep close a submenu under homepage