user3089480 user3089480 - 2 months ago 10x
HTML Question

How to create a fixed menu (links come from right to left) - HTML & CSS

I want to create a fixed menu. The menu has three areas. When hover on an area, a link will stretch (from left to right). And the three links are different (distances).
Here is my demo of the menu:

enter image description here

I spent all day to code but It doesn't work. I hope you can help me.

Thank you in advanced!


You can add these CSS properties :

.cs-menu .item {
    white-space: nowrap; // Prevent word break
    overflow: hidden; // Hidden content when container too small
    padding-left: 40px; // Push the text to the right to hide it when folded
    box-sizing: border-box; // don't take padding into account to calculate width

.cs-menu {
	position: fixed;
	top: 35%;

.cs-menu .item {
	border: 1px solid red;
	width: 40px;
	background: #ccc;
	transition: width 1s;
	margin: 0 0 0 auto;
	padding-left: 40px;
	white-space: nowrap;
	box-sizing: border-box;

.cs-menu .temp {
	border: 1px solid red;
	width: 40px;
	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>