Attempting to conceal my default drop-down menu

Question

Attempting to conceal my default drop-down menu

I need to find a way to hide my drop down menu by default, as it currently shows up automatically. The drop down menu in question is under "My Account".

This is the HTML code I'm working with:

<li class="hoverli">
    <a  href="/customer/account">My Account</a>

    <ul class="user-account">
        <li><a href="">edit my account</a></li>
        <li id="wish"><a href="">my wishlist</a></li>
        <li id="gift"><a href="">my gift registry</a></li>
    </ul>
</li>

And here's the corresponding JavaScript:

<script type="text/javascript">
jQuery(function(){
    jQuery(".hoverli").hover(
      function () {
         jQuery('.user-account').slideDown('slow');
      }, 
      function () {
         jQuery('.user-account').slideUp('slow');
      }
    );
}); 
</script>

jquery html css interface

Answer 1

Answer №1

Include a new styling instruction

.website-user {
    visibility: hidden;
}

Alternatively, hide it upon page load using Vanilla JavaScript

window.addEventListener('DOMContentLoaded', (event) => {
  const websiteUser = document.querySelector('.website-user');
  websiteUser.style.display = 'none';
});

Answer 2

Include a new styling instruction

.website-user {
    visibility: hidden;
}

Alternatively, hide it upon page load using Vanilla JavaScript

window.addEventListener('DOMContentLoaded', (event) => {
  const websiteUser = document.querySelector('.website-user');
  websiteUser.style.display = 'none';
});

Answer 3

Answer №2

Is there a need for JavaScript when the same result can be achieved using CSS, like in these illustrated examples:

.user-account {
    display: none;
}

li:hover .user-account {
    display: inline-block;
}

If you desire animation :

.user-account {
    display: none;
    position: relative;
    top : -100%;
    transition: top 2s ease-in-out;
    z-index:0;
}

li:hover .user-account {
    display: inline-block;
    top : -100%;
}

Are there any specific advantages to using JavaScript in these scenarios?

Answer 4

Is there a need for JavaScript when the same result can be achieved using CSS, like in these illustrated examples:

.user-account {
    display: none;
}

li:hover .user-account {
    display: inline-block;
}

If you desire animation :

.user-account {
    display: none;
    position: relative;
    top : -100%;
    transition: top 2s ease-in-out;
    z-index:0;
}

li:hover .user-account {
    display: inline-block;
    top : -100%;
}

Are there any specific advantages to using JavaScript in these scenarios?

Attempting to conceal my default drop-down menu

Answer №1

Answer №2

Similar questions

Is it possible for the `drop-shadow` shadow to be applied only to certain elements?

Transmit information to php script using an html document format

Footer placement not aligning at the bottom using Bootstrap

Creating dynamic animations for your elements with AJAX

Is there a way to obtain the ID of the submit button type?

The AJAX call is not successful

Jquery's mouseclick event selects an excessive number of elements

Ways to include margin right for a table

Having issues with uploading an image through a popup form in PHP

Using AJAX to refresh and display content with jQuery

Creating a custom Jquery function to generate a Div element instead of a Textbox in your web application

Discovering all invisible divs within another div can be achieved by following these steps

Retrieve JSON information from within the Scope

A step-by-step guide on enabling Autoclick for every button on a webpage

CSS "background-position: bottom" Less than ideal performance on Mobile Browsers

Adjusting the width of columns in a table

Customize hover effects for MuiCheckbox

Ensure the bottom div is anchored with a top margin

Always ensure that an element remains at the bottom during the sorting process

The window failed to redirect to the intended URL provided by the Json response