I have been trying to create a fixed menu with three distinct areas that expand when hovered over, revealing different links at varying distances. Unfortunately, my coding attempts have not been successful.
https://i.sstatic.net/DLxMr.png
I have spent hours working on this but haven't made any progress. Any assistance you can provide would be greatly appreciated.
Thank you in advance!
To ensure your text is displayed correctly, you can incorporate the following CSS properties:
.cs-menu .item {
...
white-space: nowrap; // Avoid breaking words
overflow: hidden; // Conceal content if container is too small
padding-left: 40px; // Shift text to the right for hiding when folded
box-sizing: border-box; // Exclude padding from width calculation
}
.cs-menu {
position: fixed;
top: 35%;
right: 10%;
}
.cs-menu .item {
box-sizing: border-box;
width: 40px;
margin: 0 0 0 auto;
border: 1px solid red;
padding-left: 40px;
overflow: hidden;
white-space: nowrap;
background: #ccc;
transition: width 1s;
}
.cs-menu .temp {
width: 40px;
border: 1px solid red;
background: green;
}
.cs-menu .item:hover {
width: 200px;
}<div class="cs-menu">
<div class="item">Link-one</div>
<div class="item">Link-two two</div>
<div class="item">Link-three three three</div>
</div>If you want each item to have a unique length, you will need to define three separate classes or IDs for them (either option will work).
<div class="cs-menu">
<div class="item item1">Link-one</div>
<div class="item item2">Link-two two</div>
<div class="item item3">Link-three three three</div>
.cs-menu .item1:hover {
width: 100px;
}
.cs-menu .item2:hover {
width: 150px;
}
.cs-menu .item3:hover {
width: 200px;
}
To adjust the width based on the string size and create a border space of 10px, you can utilize calc along with setting the width to 100%.
.cs-menu .item:hover {
width: calc(100% + 10px);
float:right;
}
.cs-menu {
position: fixed;
top: 35%;
right:10%;
}
.cs-menu .item {
border: 1px solid red;
width: 40px;
background: #ccc;
transition: width 1s;
margin: 0 0 0 auto;
}
.cs-menu .temp {
border: 1px solid red;
width: 40px;
background: green;
}
.cs-menu .item:hover {
width: calc(100% + 10px);
float:right;
}<div class="cs-menu">
<div class="item">Link-one</div>
<div class="item">Link-two two</div>
<div class="item">Link-three three three</div>
</div>.cs-navigation {
position: fixed;
top: 35%;
right: 10%;
}
.cs-navigation .link {
display: block;
border: 1px solid red;
width: 50px;
max-height: 70px;
background: #ccc;
transition: width 1s;
margin: 0 0 0 auto;
white-space: nowrap;
max-width: 300px;
overflow: hidden;
}
.cs-navigation .temp {
border: 1px solid red;
width: 40px;
background: green;
}
.cs-navigation .link:hover {
width: 300px;
}<div class="cs-menu">
<div class="item">Link-one</div>
<div class="item">Link-two two</div>
<div class="item">Link-three three three</div>
</div>Adjust the width of individual items using percentages instead of fixed widths, as shown below:
.cs-menu {
position: fixed;
top: 35%;
right:10%;
}
.cs-menu .item {
border: 1px solid red;
width: 40px;
padding-left: 40px;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
background: #ccc;
transition: width 1s;
margin: 0 0 0 auto;
}
.cs-menu .item:hover {
width: calc(100%);
}<div class="cs-menu">
<div class="item">Link-one</div>
<div class="item">Link-two two</div>
<div class="item">Link-three three three</div>
</div>I'm looking to enhance my website by adding a call support button with a responsive design feature. The goal is to display the button exclusively in mobile view and replace it with text in other views. Encountering challenges in toggling the visibili ...
product.component.ts import { AngularFireDatabase } from '@angular/fire/database'; import { ProductService } from './../product.service'; import { ActivatedRoute } from '@angular/router'; import { Component, OnInit} from &apo ...
I need to add a "back to top" button on my website and I want to place it in the top left corner, as shown in the image above. Here is the HTML code I am using in my Jekyll site: <body> <a name="top"></a> <a href="#top" id="to ...
I'm currently experimenting with bootstrap for the first time and running into a bit of an issue. I've added two horizontal lines at the top and bottom of my navbar, but there seems to be an unexpected margin at the bottom between the navbar and ...
Hello there, I have a question regarding submitting a form and loading a relevant PHP file into a target div using the same submit button. I have attempted to do this but need some help. <form id='myForm' method="POST" action="processForm.php ...
I've come across an unusual issue - the application is progressively slowing down while running. The first thing that comes to mind is a potential memory leak, but how can one detect it in javascript? Are there any tools available for this purpose? He ...
I have a specific structure on my HTML page: <html> <head></head> <body> <nav> .... navigation menu </nav> <div> <div></div> <div class="to-print"> <h2>Th ...
What is the reason for adding the .focus class to the style of the button? This seems to be preventing the appearance of the button from changing. I found this code on the Bootstrap site, where only the .active class is being toggled, not .focus. <but ...
After designing a Navigation menu component for desktop mode, I also created a separate side drawer component to handle variations in screen size. However, a friend of mine advised that a side drawer menu component may not be necessary. According to them ...
I am in need of a table structure that resembles the following: https://i.sstatic.net/rB2C6.png To achieve this, I am utilizing a basic Bootstrap table along with Angular's *ngFor. Each cell in the table should display a different name from an array ...
I'm encountering alignment issues with a large form that I'm working on. I have two columns at the beginning of the form where some rows occupy half of the width while others take up the full width. However, the problem arises with the alignment ...
Having trouble with a piece of jQuery code :) Here’s the issue: I have an array called var arr. We have a function called get_number() which retrieves each number from the array. We also have a function with a parameter called inner_li_height(numb ...
In an effort to enhance the responsiveness of my app, I am looking for a way to prevent the page from reloading every time a POST request is sent. My current setup includes a dynamically generated form with input fields designed like this: <div class=&q ...
Hey there, I'm a newcomer to web development. For my very first project, I'm working on a resume page. I'm looking to have a fixed left div where I can showcase my skills, and a larger div on the right side for the main body content containi ...
Is it possible to incorporate Bootstrap classes in a React application without actually installing the framework? If so, how can this be achieved and utilized effectively? I would greatly appreciate your assistance with this matter. ...
I came up with a unique idea for a search feature where clicking a "button" would reveal and expand the input box. Instead of using a hidden checkbox, I decided to experiment with using a label because clicking the label could focus on the connected elemen ...
I'm having trouble with the input-group-addon class. My HTML code is dynamically generated using JavaScript and follows the same structure across different pages. However, it works on one page but not on another. I can't seem to figure out why! ...
Is it possible to add an effect like a border or opacity when hovering over an area in an image map? I've tried using classes and applying hover effects with borders or opacity, but nothing seems to work as expected. Here's my code: <img src= ...
Currently, I am trying to implement a functionality where clicking on a button will load a php file. However, despite my efforts, the php file is not loading as intended. Is there a way to associate the php file with the button using an anchor tag? <a ...
Currently I am working on the following page: , where an embedded javascript form called infusionsoft (iframe form) needs to be made responsive at the request of my client. I'm wondering if there is a way to override the css or inject custom styles i ...