Crafting a secretive and subtle side menu that pops out when triggered

My website features a hidden side menu that slides out when the main div is hovered over. The challenge arises when I want the side menu to remain visible when interacting with its elements, while still hiding when both the main div and side menu are not being hovered over. The solution involves adjusting the z-index after sliding out, but this causes issues when trying to hide the side menu upon hover out.

How can I implement a functionality where the side bar slides out when the main div is hovered over, remains visible when interacting with it, and slides back to being hidden when both elements are not hovered over?

Jsfiddle: http://jsfiddle.net/aritro33/RY87e/1/embedded/result/

See below for the code:

HTML:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato">
<div class="profile_card">

    <div class="profile">
        <div class="avatar_image">
             <h1 id="grade">A</h1>

        </div>
        <div class="inner_content">
             <h2 class="name" id="name">Math</h2>
 <span id="desc">
        <p class="description" id="desc_one">Megan Babat </p>
      <p class="description" id="desc_two">Room 207, Raisin Building </p></span>

            <div class="social_links"> <span class="bottom entypo-mail"></span>  <span class=" bottom entypo-phone"></span>
 <span class="bottom entypo-cloud"></span> 
            </div>
        </div>
        <div class = "box">
        <div class="sidemenu1" id="sidemenu1"> <span class="menuicon entypo-plus"></span></div>
            <div class="sidemenu2" id="sidemenu2"> <span class="menuicon entypo-eye"></span></div>
        </div>
    </div>

    </div>
</div>

CSS:

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* styling rules */

JS:

$("#grade").hover(function () {
    document.getElementById("grade").innerHTML = "95";
});

$("#grade").mouseout(function () {
    document.getElementById("grade").innerHTML = "A";
});

$('.profile').hover(function(){
    setInterval(function(){document.getElementById("sidemenu1").style.zIndex="1"; document.getElementById("sidemenu2").style.zIndex="1";}, 150);
});

Answer №1

Consider utilizing the classic Suckerfish along with CSS transition effects for some added pizzazz, eliminating the need for JavaScript:

Check it out on CodePen

Here's the HTML snippet:

<div class="container">
  <div class="main-section">
    <p>Hover for choices</p>
  </div><!--/.main-section-->
  <div class="options">
    <a href="#">Choice 1</a>
    <a href="#">Choice 2</a>
  </div><!--/.options-->
</div><!--/.container-->

And here's the CSS code provided:

.container {
  position: relative;
  width: 200px;
  height: 200px;
}
.main-section {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2; /* concealing menu when not in use */
}
.options {
  width: 100px;
  position: absolute; /* positioned behind primary box */
  top: 0;
  right: 0;
  z-index: 1;
  transition: right .5s ease; /* sleek transition effect */
 }     
.container:hover .options {
   right: -100px; /* display menu upon hovering over main area */
}

Answer №2

To achieve animation effects, you can make use of the animate function in jQuery

Here's an example:

jQuery('#slideMain').hover(function() {
                    // Do something
                }, function() {

                    jQuery.noConflict();
                    jQuery('#slideMain').animate({
                        left: '-202px'
                    }, 800);

                });

Answer №3

Adjust the z-index value in your script to -1.

document.getElementById("sidemenu1").style.zIndex = "-1"; document.getElementById("sidemenu2").style.zIndex = "-1";}, 150);

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

I am encountering a problem with the $invalid property in AngularJS

Hey there, I've got a coding dilemma involving three number inputs, which I will refer to as the first input, second input, and third input for clarity. Here's the setup: <div> <form name="formOpenMax"> <div clas ...

Using jQuery to insert a new string into the .css file

I'm currently working on a jQuery function to make my font size responsive to changes in width. While I am aware of other options like Media Query, I prefer a solution that offers smoother transitions. Using vw or vh units is not the approach I want t ...

What is the best way to center a SVG and a span vertically within an inline unordered list?

My <ul> element contains 2 <li> items with styling using display: inline-block. Unfortunately, the SVG and text inside each <li> are not vertically aligned. I attempted to use vertically-align: middle since they're both inline-block ...

Vertical alignment issue with icons in Bootstrap 5 HTML code

Just starting out with Css and I'm having trouble aligning the google icon vertically in the center with some padding from the bottom. You can see the issue in the attached file. The text is aligned in the center. .g-icon{ background-image: url(" ...

jquery makes it easy to create interactive hide and show effects

The main concept is to display the element upon clicking and hide it when there is any mouse click event. Below is the HTML code I'm using: <ul> <li> <span class="name">Author 1</span> <span class="affiliation"&g ...

Adjust image to fit inside a compact popup window - Implementing React.js and Bootstrap

Hello, I could really use some help with a problem I'm facing. I am currently working on my personal portfolio website using react.js and bootstrap. I've integrated the react popupbox package, but I noticed that on small screens, my picture is no ...

When the page initially loads, the block appears on top of the upper block and remains in place after the page is refreshed

Upon initial loading, the block appears on top of another block but remains fixed upon page refresh. The same issue occurs in the mobile version of the site and occasionally displays correctly. The website is built on WordPress and optimized using Page Spe ...

Attempting to migrate a HTML website to WordPress has proven to be a challenge as only the content is visible, with the CSS failing to load properly

I'm looking to convert an HTML site into a WordPress site while keeping the same theme intact. Even after adding 'wp_enqueue_style' to the functions.php file, the CSS file is not being recognized by WordPress. functions.php <?php f ...

The "src" attribute is missing from the image on the left side

I'm currently facing an issue with the src attribute in this code: An event updates the src based on a variable retrieved from a form. The image files cannot be renamed, so I must work with their existing names. The problem arises as all file names c ...

What is the best way to use jQuery to transform dates from the format YYYY-MM-DD to DD-MM-YYYY across multiple classes, each with its own unique value

Hello there! I am looking to change the format of dates from YYYY-MM-DD to DD-MM-YYYY in all tags with the same class. The goal is to display only the date without the time for different dates. I attempted to achieve this by using a loop to iterate throug ...

Attempting to remove options in a Multiple Choice scenario by selecting the X icon beside each one

I'm working on a multiple choice quiz and I'd like to add a button or icon resembling X in front of each option (even in front of the radio button), so that when I click on it, only that specific option is deleted. How can I achieve this? For in ...

SliderCarousel - maintaining variable width image in the middle of the carousel

I am working with a collection of variable width images that I want to display in a carousel. After some research, I have decided to use 'carouFredSel' as it appears to be highly customizable. My goal is to always have one image centered horizont ...

Using JQuery to Execute Matching Based on Text Within <A> Elements

After reviewing the resources on Jquery Extract URL from Text and jquery match() variable interpolation - complex regexes, I am still a bit confused. The issue at hand is that I have a webpage with a dropdown menu at the top. Inside the dropdown, there ...

How can jQuery be used to adjust the width and height of an iframe?

After researching a solution on a website, I attempted to implement it but encountered issues. It seems like there may be another script dictating the styling, so I need to add some code directly to the page to override it. This is what I tried: <scri ...

The jQuery function appears to be running multiple times in a loop

For some reason, every value in my JSON object is getting added to the "listOfCountries" array twice. It seems like there might be a loop going through the result object more than once. I could really use some assistance with this issue! var listOfCountri ...

Scrolling vertically without the appearance of a scrollbar

I've searched all over the internet for a solution to my problem, but nothing seems to work for me. I want to keep vertical scrolling ability while hiding the scrollbar from view in the y direction all the time. The challenge is to make my #content-m ...

Sass can be used to create custom color classes for Bootstrap 5.3 that offer

I am currently using a Bootstrap 5.3 theme and I would like to give users the option to change the main color theme from the default blue to something like purple or orange. My idea is to create additional CSS files named "orange-as-primary.css", "purple- ...

Matching an element that contains a specific string in JS/CSS

I'm currently faced with an HTML file that's being generated by an outdated system, making it tricky for me to control the code generation process. The structure of the HTML code is as follows: <table cellpadding=10> <tr> ...

What could be causing the onclick function to not activate on the iOS safari browser?

My Shopify site works perfectly on all browsers except iOS Safari. When users try to click the "add to cart" button on this specific browser, it does not trigger the onclick function. This issue is unique to iOS Safari as the button works fine on desktop a ...

In PHP, you can customize the colors to emphasize different data sets

In my MySQL database connected through PHP, I have data displayed in table format. My goal is to highlight certain data based on age with two conditions: Condition 1: - Color red (#FF7676) for ages greater than 24 Condition 2: - Color yellow (#F8FF00) fo ...