So erstellen Sie ein festes Menü (Links kommen von rechts nach links) - HTML & CSS

Question

Ich möchte ein festes Menü erstellen. Die Speisekarte hat drei Bereiche. Wenn Sie den Mauszeiger über einen Bereich bewegen, wird ein Link angezeigt (von links nach rechts). Und die drei Links sind unterschiedlich (Entfernungen). Hier ist meine Demo des Menüs:

ich den ganzen Tag verbracht zu kodieren, aber es funktioniert nicht. Ich hoffe ihr könnt mir helfen.

Vielen Dank im Voraus!

Answer 1

Sie können diese CSS-Eigenschaften hinzufügen:

.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 { 
 
    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>

Answer 2

Um jedem Element eine andere Länge zu geben, müssen Sie drei verschiedene Klassen oder IDs erstellen. (Beide werden den Job)

<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; 
} 

Answer 3

die Breite der separaten Set Artikel s based Prozent statt einer festen Breite verwendet wird, wie folgt aus:

.cs-menu { 
 
\t position: fixed; 
 
\t top: 35%; 
 
\t right:10%; 
 
} 
 

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

 
.cs-menu .item:hover { 
 
     width: calc(100%); 
 
}

<div class="cs-menu"> 
 
\t <div class="item">Link-one</div> 
 
    \t <div class="item">Link-two two</div> 
 
    \t <div class="item">Link-three three three</div> 
 
</div>

Answer 4

Sie Calc und Breite 100% verwenden kann die Breite accoeding auf den String Größe zu machen, und fügen Sie es 10px zu haben etwas Platz von der Grenze

.cs-menu .item:hover { 
    width: calc(100% + 10px); 
    float:right; 
} 

.cs-menu { 
 
\t position: fixed; 
 
\t top: 35%; 
 
\t right:10%; 
 
} 
 

 
.cs-menu .item { 
 
\t border: 1px solid red; 
 
\t width: 40px; 
 
\t background: #ccc; 
 
    transition: width 1s; 
 
    margin: 0 0 0 auto; 
 
} 
 

 
.cs-menu .temp { 
 
    border: 1px solid red; 
 
\t width: 40px; 
 
\t background: green; 
 
} 
 

 
.cs-menu .item:hover { 
 
    width: calc(100% + 10px); 
 
    float:right; 
 
}

<div class="cs-menu"> 
 
\t \t \t <div class="item">Link-one</div> 
 
\t \t \t <div class="item">Link-two two</div> 
 
\t \t \t <div class="item">Link-three three three</div> 
 
</div>

Answer 5

.cs-menu { 
 
    position: fixed; 
 
    top: 35%; 
 
    right: 10%; 
 
} 
 
.cs-menu .item { 
 
    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-menu .temp { 
 
    border: 1px solid red; 
 
    width: 40px; 
 
    background: green; 
 
} 
 
.cs-menu .item: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>