Change the left position of the sliding menu in real-time

I am currently designing a website with a sliding menu feature. By default, the menu is set to -370px on the left, displaying only the "MENU" text initially. When a user hovers over the menu, it expands to the right, allowing them to select different menu items. If the user selects an item that has sub-items, the menu will dynamically adjust its size accordingly. However, I have encountered an issue when the menu slides back to the left. I want the menu to always show only the text "MENU," regardless of the length of the menu items. Currently, only 31px on the right side of the menu are visible.

javascriptjquerycsshtml

Answer №1

Are you in need of a solution like this?

https://jsfiddle.net/CLEAN_SMITH/ur8konej/4/

Javascript:

function adjustWidth(){
var width = document.getElementById("navigation_slideout").offsetWidth;
var offsetWidth = width - (width + width - 35);
document.getElementById('navigation_slideout').style.width = width + "px";
document.getElementById('navigation_slideout').style.left = offsetWidth + "px";
}

CSS

 #navigation_slideout:hover {
  left: -39px !important;
}

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

Trigger a pop-up alert box when the jQuery event $(document).ready is fired within a Smarty template

I'm currently attempting to make a popup message display when the document is fully loaded. Although I have successfully integrated Google Maps on another page, this task seems to be more challenging. Below is the code snippet: <html> < ...

javascriptjquerysmarty

What sets apart the <img> and <Image> layout attributes in NextJS?

While working on custom checkboxes, I came across a unique situation - the only way the positioning of the checkboxes aligns properly is if the classes '.init' and '.hover' are assigned to images, and the class '.done' is disp ...

csscheckboxnext.js

Activate $digest when a variable is modified by a node.js function

I am currently working on developing an application using node-webkit and AngularJS. Everything was going smoothly until I tried to make Angular watch over a "legacy variable" using the method outlined in this answer, which led to an Error: [$rootScope:inp ...

javascriptnode.jsangularjsnode-webkit

Issue: Package 'cairo' not located on EC2 Bitnami MEAN server

Setting up my MEAN application on a Bitnami server has been quite a challenge. During the installation of dependencies, I encountered an error that I just can't seem to resolve. Despite following the instructions provided in the error message, I am st ...

javascriptnode.jsamazon-ec2bitnami

Leveraging HTTP/2 in conjunction with angularJS

As I was exploring ways to improve the performance of my web application, I came across HTTP/2. After learning about its features that can enhance website speed, I decided to implement it. Upon upgrading my browser to the latest version to enable HTTP/2 s ...

javascriptangularjshttp2web-performance

Sorting data by percentages in AngularJS

I am currently facing an issue with sorting percentages in a table column. Despite using methods like parseFloat and other AngularJS (1.5.0) sorting techniques, the percentages are not being sorted as expected. [ {percentage: 8.82} {percentage: 0. ...

javascriptangularjstypescript

Is there a way to modify the appearance of a text box to suit individual preferences?

Is it possible to alter the shape of a text box, creating a rectangle with a portion removed from one side? I have included an example image for reference. I came across clip-path: polygon in CSS, but it seems to only accept four coordinates. Thank you i ...

htmlcsstextbox

Avoid prolonging lines in React Styled Components

I am encountering an issue with the lines between the OR. I need to ensure that they do not extend beyond their specified boundaries. To view the code on codesandbox, please visit HERE EXPECTED OUTPUT CODE const OR = styled.div` display: flex; flex- ...

cssreactjsstyled-components

What are some tips for creating an improved React list container component?

I have a small application that fetches movie data. The component hierarchy is not very complex. The state is stored in App.js and then passed down to the Movies.js component, which simply displays a list of movies in a ul element. Data passing from App.j ...

javascriptreactjs

Tips for utilizing a for loop within an array extracted from a jQuery element for automation

I am looking to streamline the process using a for loop for an array containing 10 image files in the parameters of initialPreview and initialPreviewConfig. My envisioned solution involves the following code snippet: for (i = 0; i < 11; i++) { "< ...

javascriptjquery

How can I retrieve the $index value of an ng-repeat element within a uib-dropdown?

I am currently working on implementing an ng-repeat loop that includes a dropdown menu for each element. I want the dropdown menu to contain functions that operate on the specific element, requiring access to the index of that element. Below is the code sn ...

javascripthtmlangularjsangular-ui-bootstrap

What is the best way to extract multiple children from a shared tag using BeautifulSoup?

My current project involves using BeautifulSoup to scrape thesaurus.com for quick access to synonyms of specific words. However, I've run into an issue where the synonyms are listed with different ids and classes for each word. My workaround is to tar ...

pythonhtmlweb-scrapingbeautifulsoup

Update the Ngrx reducer when the component is present on the page

One dilemma I am facing involves managing two components within a page - an update user form and a history of events. Each component has its own reducer (user and events). My goal is to update the list of events in the store through an API call once the us ...

javascriptangularngrxngrx-effects

What is the best way to combine relative paths or create distinct identifiers for SVG files located within multiple layers of folders

I have a collection of icons exported from "Figma" organized in folders, and I'm using grunt-svgstore to create a sprite sheet. However, the result contains duplicated IDs even after trying 'allowDuplicateItems: false' and 'setUniqueIds ...

javascriptsvgnpmsprite-sheetgrunt-svgstore

Adjust the height seamlessly on the homepage without the need for scrolling, while maintaining a stationary navigation bar and footer

Our latest project is designed specifically for mobile use. The fixed navigation bar is functioning perfectly. We also have a fixed footer with icons at the bottom. (All working well) The challenge we are facing is to make the content between the naviga ...

htmlcss

Transform JSON data into an HTML table display using JavaScript/JQuery

To retrieve the JSON output on the user interface, I use the following function: $("#idvar").click(function(){ var d1 = document.getElementById("dText"); var d2 = document.getElementById("dJson"); var mytext = d1.textContent; alert(mytext); $.po ...

javascriptjqueryjson

Using radio buttons and setting the attribute to 'checked' does not function properly in Internet Explorer 7

Is there a way to automatically check radio buttons when appending in IE7? Despite my code working in all browsers, it seems to fail in IE6 and IE7. I can't figure out why it's not working, even though I've followed the correct steps accord ...

jqueryinternet-explorer-7radio-button

What should we do to resolve the uncommon use of the 'this' es-lint error? Which rule should we disable?

Recently, I encountered an issue with my Nuxt setup that is configured with el-lint and prettier. Every time I try to use 'this' within my template, it throws up an error unexpectedly. 6:15 error Unexpected usage of 'this' vue/this ...

javascriptvue.jseslintnuxt.js

Unable to Retrieve Stripe Connect Account Balance

I've been attempting to retrieve the balance for my connected accounts in Stripe, but every time I make an API call, it keeps returning the platform's account balance instead of the connected account balance. This is happening while in test mode. ...

javascriptnode.jsstripe-payments

Creating a series of neighboring rectangles with D3 that unintentionally produce a distracting shimmering effect

I've created a musical waveform using D3 by positioning rectangles next to each other. Check out the code here: http://jsfiddle.net/s4dML/ var data = [ 0.0534973, /* ...lots and lots of data... */ 0.290771]; data = data.filter(function(datum, index){ ...

javascriptd3.js