如何创建固定菜单（链接从右到左） - 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

回答

相关问题