Unique Menu: Challenge when adjusting the width of 5 divs upon hovering while maintaining full site width at 100%

I'm looking to create a sleek custom menu with 5 fields. I want the field under the mouse to expand in width on mouseover, while the other fields shrink in width.

The issue I'm facing is that the transition effect is not smooth and the total width of the menu changes unpredictably when the mouse moves quickly over the menu fields.

Does anyone have a more elegant and functional solution to this problem?

Here is the code I have so far:

function customizeMenu(id) {
  document.getElementById('id-m1').style.width = "17%";
  document.getElementById('id-m2').style.width = "17%";
  document.getElementById('id-m3').style.width = "17%";
  document.getElementById('id-m4').style.width = "17%";
  document.getElementById('id-m5').style.width = "17%";
  document.getElementById(id).style.width = "32%";
  return true;
}

function resetMenu(id) {
  document.getElementById('id-m1').style.width = "20%";
  document.getElementById('id-m2').style.width = "20%";
  document.getElementById('id-m3').style.width = "20%";
  document.getElementById('id-m4').style.width = "20%";
  document.getElementById('id-m5').style.width = "20%";
  return true;
}
.menu-item {
  float: left;
  border: 1px solid white;
  margin: 0px;
  height: 300px;
  background-color: grey;
  justify-content: center;
  transition: width 1s linear;
}

.menu-item:hover {
  cursor: pointer;
}

#id-m1, #id-m2, #id-m3, #id-m4, #id-m5 {
  width: 20%;
}
<div onmouseout="resetMenu()">
  <div class="menu-item" id="id-m1" onmouseover="customizeMenu('id-m1')"> Menu 1</div>
  <div class="menu-item" id="id-m2" onmouseover="customizeMenu('id-m2')"> Menu 2</div>
  <div class="menu-item" id="id-m3" onmouseover="customizeMenu('id-m3')"> Menu 3</div>
  <div class="menu-item" id="id-m4" onmouseover="customizeMenu('id-m4')"> Menu 4</div>
  <div class="menu-item" id="id-m5" onmouseover="customizeMenu('id-m5')"> Menu 5</div>
</div>

Check out the result here.

javascripthtmlcssmenu

Answer №1

According to dantheman, there is no need for javascript in this instance. There are numerous ways to accomplish this task, but here is one solution.

Eliminate javascript and handle everything using CSS. Adjust your CSS as shown below, ensuring that you enclose your divs in a wrapper element. In this case, another div was used as the wrapper.

The concept involves utilizing flex properties to control the widths of elements. The wrapper is set to be flexible, adding space between each element to fit the container (in this instance, .menues), and each .menue0 element determines the stretching and contracting. The percentage value for each flex-basis can be adjusted as desired.

.menues {
  display: flex;
  justify-content: space-between;
}

.menue0 {
  flex-basis: 20%;
  border:1px solid white; 
  height:300px; 
  background-color:grey; 
  cursor:pointer;
  transition: all 0.5s;
}

.menue0:hover {
  flex-basis: 32%;
}
<div class="menues">
  <div class="menue0">Menu 1</div>
  <div class="menue0">Menu 2</div>
  <div class="menue0">Menu 3</div>
  <div class="menue0">Menu 4</div>
  <div class="menue0">Menu 5</div>
</div>

Answer №2

To achieve the desired effect, you can make your container flexible and utilize CSS hover instead of JavaScript:

.menu {
  display: flex;                  /* make parent flex */
}

.menue0 {
  display: flex;
  box-sizing: border-box;        /* include border in width */
  width: 20%; 
  border: 1px solid white;
  margin: 0px;
  height: 300px;
  background-color: grey;
  justify-content: center;
  transition: width 1s linear;
  flex-grow:1;                   /* always take up full width of parent */
}

.menu:hover .menue0 {
  width: 17%;                    /* change children width to 17% on hover */
}

.menu .menue0:hover {
  width: 32%;                    /* change hovered child width to 32% */
}
<div class="menu">
  <div class="menue0" id="id-m1"> Menue 1</div>
  <div class="menue0" id="id-m2"> Menue 2</div>
  <div class="menue0" id="id-m3"> Menue 3</div>
  <div class="menue0" id="id-m4"> Menue 4</div>
  <div class="menue0" id="id-m5"> Menue 5</div>
</div>

Answer №3

From my personal experience, using transition-timing-function: ease-in-out is the most effective approach in such scenarios. Additionally, I have reorganized your code to incorporate flexbox.

.menu {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.menu-item {
  height: 50px;
  flex-grow: 1.5;
  background-color: gray;
  border: 1px solid white;
  transition:flex-grow 1s ease-in-out;
}
.menu-item:hover {
  flex-grow: 2;
}
<div class="menu">
  <div class="menu-item"> Menu 1</div>
  <div class="menu-item"> Menu 2</div>
  <div class="menu-item"> Menu 3</div>
  <div class="menu-item"> Menu 4</div>
  <div class="menu-item"> Menu 5</div>
</div>

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

Baconjs exclusively retrieves the final debounce value

Below is a code snippet that showcases my current implementation: let watcher; const streamWatcher = bacon.fromBinder(sink => { watcher = chokidar.watch(root, { ignored: /(^|[\/\\])\../ }); watcher.on('all&a ...

javascriptnode.jseventsfrpbacon.js

Retrieve the text that has been chosen and have it displayed with lines

I'm attempting to extract the selected text and format it with line breaks for a VSCODE Extension. const document = editor.document; const selection = editor.selection; const position = editor.selection.end; const word = document.getTe ...

javascripttypescriptvisual-studio-codevscode-extensionsvscode-debugger

Retrieving the value of a TextField from Material-UI upon submission

Is it possible to capture the value from a TextField input and display a message conditionally using onSubmit instead of onChange? I have tried implementing this functionality dynamically with onChange, but now I would like to achieve the same result wit ...

javascriptreactjsmaterial-ui

Ways to customize the selected item's color in md-select using Angular Material?

Currently, I am utilizing the dark theme in angular-material 1.0.4. The appearance of the select element is different when an item is selected: https://i.sstatic.net/FRU0r.png Comparatively, this is how it appears with the default theme applied: https:/ ...

cssangularjsmaterial-designangular-material

Utilize ngx-filter-pipe to Streamline Filtering of Multiple Values

Need assistance with filtering an array using ngx-filter-pipe. I have managed to filter based on a single value condition, but I am unsure how to filter based on multiple values in an array. Any guidance would be appreciated. Angular <input type="text ...

javascriptangulartypescript

Problem with Submitting Form using Search Bar

I've tried everything, but I can't seem to get this search form to submit. <div id="search_bar_container" style="z-index:99999"> <div class="container"> <form action="tour-list-search-results.php" method="post" name="searc ...

javascripthtmlcss

Transferring callback variables from an Express GET request to a forked process in Node.js

I encountered an issue while trying to transfer the callback variables from app.get() to a forked process. The error message I received was: TypeError: Converting circular structure to JSON The primary goal behind this endeavor is to enable a main node w ...

javascriptnode.jsexpress

What is the best way to design a shape (a quadrilateral with rounded edges) using CSS?

Struggling with creating a widget in React Js that has an image as the background? The image is designed to be dynamic, changing color and size based on the device. I've attempted using inline SVG and SVG within an img tag but can't seem to contr ...

htmlcssreactjssvgcss-shapes

Sleek descending motion effect

I have created a simple function, but it is not animating smoothly and seems to lag... I am using it for a div sized at 1600x700 pixels on page load $(document).ready(function(){ $('#slider').slideDown(500); }); Is there any way to ensure s ...

javascriptjquery

How can I adjust the positioning of labels in Semantic UI React?

Has anyone successfully changed the label position from right side to left? I attempted using float: left but it didn't have any effect. import {Radio } from "semantic-ui-react" <Radio label="in progress" toggle /> https://i.sstatic.net/hNGb6. ...

javascriptcssreactjssemantic-ui

Is there a way to modify the document title using .ready()?

As I work with nested layouts in Ruby on Rails, one particular layout requires me to extract a string from a div and use it as the title of the document. What is the proper method (if there is one) to accomplish this task? <script type="text/javascri ...

javascriptjqueryruby-on-rails

Interact with HTML style attribute using JavaScript

Is there a way to retrieve a specific CSS property from the style attribute of an HTML element, without considering the stylesheet or computed properties? For example: <div style="float:right"></div> function fetchStyleValue(element, propert ...

javascriptjqueryhtmlcss

Attention all beginners: there is an issue with the navigation bar where the section below is overlapping it. Additionally, assistance is needed in understanding how to set limits for

Greetings to all. I'm encountering an issue while setting up my first Bootstrap Nav bar. Although I've managed to make it work, the section right below it is overlapping the navbar (I can only see the navbar if I use a z-index of -1, but then the ...

htmljquerycssbootstrap-4navbar

Can the load API in jQuery be utilized to load fragments using a class selector instead of an id?

I've been working on enhancing a website's dashboard by incorporating more widgets onto the page. Interestingly, these widgets are already present on another page within the same domain. After some research, I discovered that utilizing the load A ...

javascriptjqueryhtmlajax

Do JavaScript Promises operate asynchronously?

Can we clarify if JavaScript Promise is asynchronous? I've been researching Promise and async programming, particularly with ajax requests. If Promise isn't inherently async, how can we make it so? For instance, consider a function that encapsul ...

javascriptasynchronouspromise

React Native application fails to return any values from an asynchronous operation in App function

Completely new to React Native, this is my first attempt at coding. I'm struggling with returning jsx from my App() function due to an asynchronous operation within it. Here's the code that I believe clearly demonstrates my issue: import React fr ...

javascriptreactjsreact-native

When invoked by a client-side JS function through XHR, Express fails to render the page in the browser

I'm utilizing Express to pre-process some data from the browser by triggering it through a JS XHR call. However, the issue arises when the browser fails to display the page rendered by Node/Express on the server. This is not a matter of file paths or ...

javascriptnode.jsexpressejs

The form validation feature in NestJS using Class Validator appears to be malfunctioning

Hey everyone, I've been working on validating incoming form data using the class validator package and DTO. Here's my DTO: import { IsString, IsPhoneNumber, IsEnum, MinLength } from 'class-validator'; export class CreateAgentDto { @ ...

javascriptnode.jsexpressnestjs

Error encountered when attempting to generate a hyperlink

Whenever I try to assign hyperlinks to each image name, I keep encountering an undefined imgitem error in the hyperlink(s). Could it be that I am incorrectly placing the <a> tags? echo '<td width="11%" class="imagetd">'; if (empty($a ...

phphtml

"User-friendly Material-UI input field paired with a clear label

Seeking guidance on creating a text field with a label using the material-ui library. I am searching for something similar to this example: https://github.com/callemall/material-ui/blob/master/src/TextField/TextFieldLabel.jsx Unfortunately, I have been ...

javascriptreactjsmaterial-ui