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.

https://i.sstatic.net/7KJFL.jpg

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

Mongoose Filtering in Rest API: A Comprehensive Guide

Currently, I am utilizing Express to construct an API. Within this API, my objective is to retrieve a list of customers from MongoDB by using Mongoose. The code snippet below showcases the route I have set up (please disregard any paging and limit concerns ...

javascriptnode.jsmongodbexpress

Tips for utilizing an npm package in conjunction with Hugo

I created a basic hugo site with the following command: hugo new site quickstart Within the layouts/_default/baseof.html file, I have included a JavaScript file named script.js. Inside script.js, the code looks like this: import $ from 'jquery' ...

javascriptjquerynpmhugostatic-site

Arranging a flex item below another flex item within a flexbox container

Is there a way to use flexbox to ensure that the 2.5 element is placed below the 2 element instead of beside it on the same row within the flex container? Given the HTML provided, how can I achieve this layout using flexbox? I attempted to accomplish thi ...

htmlcssflexbox

Move your cursor over X or Y to alter the color of Y exclusively

I am currently designing a navigation bar that includes icons followed by the title of their respective pages (for example, an icon of a home followed by the text 'Home'). I would like to change the color of only(!) the icon from black (default) ...

htmlcsshover

Ways to display a jQuery alert when navigating on a webpage

I am looking to enhance my page navigation by implementing a jQuery confirmation message with 'Yes' and 'No' buttons. This way, when I navigate from one page to another, I can decide whether to proceed or stay on the current page. Inst ...

javascriptjquery

Wordpress is experiencing a recurring issue with scripts being loaded multiple times

Currently, I am attempting to load some of my scripts from CDNs such as CDNjs and Google. While the scripts are loading correctly, I have noticed a strange issue where each script seems to generate two or even three HTTP requests (for the same script). You ...

javascriptphpjquerywordpress

How can I retrieve the transformation matrix for a DOM element?

Is there a way to retrieve the transformation matrix of a DOM element similar to how we can do it with canvas context? Does the DOM provide a getTransform() method for this purpose? ...

javascripthtmlwebcanvas

Clustering in an environment requires merging and minifying granules

While Granule is effective for minifying and merging CSS/JS files on a local environment, it presents challenges in clustered environments. The issue arises when each node of the cluster computes its own file during runtime, causing discrepancies when a us ...

javascriptcssyuiminify

Tips for extracting a segment from an Object within an Array

I am looking to extract the datetime value from each element in the array below: [<time pubdate class="dt-updated" datetime="2015-07-09T11:50:32+0000" title="Time posted: 09 Jul 2015, 11:50:32 (UTC)" aria-label="Posted on 09 Jul">09 Jul</time> ...

javascriptarraysobject

Choosing HTML elements within nested DIV tags

In the process of creating a Hangman-style game using javascript/jQuery, I encountered an issue with selecting HTML content from virtual keyboard keys : <div class="square keyboard"> <div class="content"> <div class="table"> ...

javascriptjqueryhtmlcss

Tips for getting the DIV:hover effect to work in Internet Explorer 8

Can someone provide me with the steps to get DIV:Hover functioning in Internet Explorer 8? ...

htmlcss

Submitting HTML forms in SilverStripe using Ajax

I need to transfer data from a basic HTML form to a controller using Ajax, then handle the data and send a response back. Currently, my setup looks like this: HomePage.ss <form method="POST" class="form-horizontal submit-form" onsubmit="return checkf ...

javascriptphpjqueryajaxsilverstripe

Using postMessage with an iframe is causing issues within a React application

I encountered two errors when executing the code below in my React application: try { iframe.src = applicationRoutes.href; iframe.style.width = '0px'; iframe.style.height = '0px'; iframe.style.border = '0px& ...

javascriptreactjsiframe

Mastering the integration of this asmx webservice with jQuery/ajax

Hello, I need some assistance with a webservice that I have. The webservice URL is My goal is to display a list of products from this service (where ObtenerProductosPorId translates to GetProductsById) on an HTML page. I have been researching how to achi ...

jqueryhtmlajaxasmx

jQuery floating sidebar that dynamically adjusts position based on content overflow

I've come across an interesting scenario with a fiddle that I'm working on: http://jsfiddle.net/yFjtt/1/ The main concept is to allow users to scroll past the header and have the sidebar 'stick' in place as they continue scrolling down ...

javascriptjquery

Wordpress: The success and error functions in ajaxSubmit options are failing to trigger

jQuery 1.7.2 jQuery Validate 1.1.0 jQuery Form 3.18 Wordpress 3.4.2 In my current coding environment with the jQuery libraries mentioned above, I'm facing an issue with the jQuery Form JS: I've adapted the code for ajaxSubmit from the developer ...

jquerywordpressforms

What are the steps to design a versatile gallery page that can serve various projects?

Allow me to get straight to the point. What is my goal? I am aiming to develop galleries for various projects. Each project's thumbnail on the main page should open a gallery as a new page. These galleries will all have the same layout but different ...

javascriptphphtmlcssgallery

What could be causing my div element to remain stationary despite the movement functions I have implemented?

I am attempting to move my div element by using key presses to adjust the CSS attributes of the HTML elements. However, despite implementing the necessary code, the mover refuses to budge and nothing appears when I inspect the elements or their attributes. ...

javascript

The Bootstrap modal will not appear when the parent container's position is fixed

I am having an issue with a bootstrap modal that I am using as an instruction guide. My goal is to keep it fixed at the top-right corner of the viewport, so I tried using the fixed position. However, when I do this, the modal turns grey. On the other han ...

javascripthtmlcssbootstrap-modal

Using jQuery, you can dynamically fill a field with data retrieved from two separate fields

Is there a way to automatically populate the 'Full Name' field based on what the user enters in the 'First Name' and 'Last Name' fields? For example, if the user types 'John' and 'Smith', the 'Full Nam ...

jqueryforms