user3089480 user3089480 - 4 months ago 20
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!

Answer

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%;
	right:10%;
}

.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;
	overflow:hidden;
	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>
</div>

Comments