如何創建固定菜單（鏈接從右到左） - HTML＆CSS

我想創建一個固定菜單。該菜單有三個區域。懸停在某個區域時，鏈接將拉伸（從左到右）。這三個鏈接是不同的（距離）。這裏是我的菜單演示：

我花了一整天的代碼，但它不工作。我希望你能幫助我。
如何創建固定菜單（鏈接從右到左） - HTML＆CSS

謝謝先進！

來源

2016-07-24 user3089480

你想TI拉伸從左至右或從右到左，因爲你正被一個有點爭議。 – ZombieChowder

您需要提供一個可以顯示問題的標記的最小示例，而不是明天可能會更改或消失的某個第三方網站。 – Rob

@ ZombieChowder：我需要我的鏈接從右至左拉伸。 – user3089480

您可以添加這些CSS屬性：

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

來源

2016-07-24 13:54:45

感謝您的回答！但有一個問題。當我離開某個區域時，如何刪除填充左側：40px？我添加了這段代碼，但它效果不好： .cs-menu .item：hover { width：200px; padding-left：0; } – user3089480

爲什麼你需要刪除填充？你想要摺疊時顯示內部文本的開始？ –

要賦予每個項目不同的長度，您必須創建三個不同的類或ID。（都將做的工作）

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

來源

2016-07-24 13:51:53 Krandalf

設置單獨的寬度項目■使用％的基礎，而不是固定寬度的，就像這樣：

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

來源

2016-07-24 13:56:23

您可以使用鈣來和寬度100％，讓寬度accoeding字符串大小，並添加到它10px的到從邊境

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

0有一定的空間

來源

2016-07-24 14:00:06

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

來源

2016-07-24 14:03:38

如何創建固定菜單（鏈接從右到左） - HTML＆CSS

回答

相關問題