我对 CSS 很陌生，不知道如何使这种导航有效。默认情况下，导航应如下所示:
悬停联系人部分时，它看起来像这样:
当然，反之亦然:
你可以在这里看到我的标记、CSS 和演示:https://jsfiddle.net/xr2jp5r9/ .我也会在这里粘贴 HTML/CSS:
<body>
<div id="navigation-menu">
<div id="portfoolio">
<h4>PORTFOOLIO</h4>
<nav id="portfoolionav">
<ul>
<li>sisearhitektuur</li>
<li>graafiline disain</li>
<li>tootedisain</li>
</ul>
</nav>
</div>
<!--end portfoolio-->
<div id="kontakt">
<h4>KONTAKT</h4>
<p id="kontaktadd">Männiku tee 31a, 11214, Tallinn, Estonia</p>
</div>
<!--end kontakt-->
</div>
<!--end navigation-menu-->
</body>
还有 CSS:
.body
{
background-color: white;
}
#navigation-menu
{
height: 100px;
line-height: 100px;
font-family: 'Lato', sans-serif;
}
#portfoolio
{
position: fixed;
color: white;
text-align: right;
top: 0px;
left: 0px;
width: 50%;
background-color: #3BB6E4;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#portfoolio h4
{
padding-right: 30px;
}
#portfoolio:hover
{
width: 90%;
z-index: 400;
}
#portfoolionav ul
{
list-style-type: none;
}
#portfoolionav li
{
display: inline;
padding: 20px;
}
#kontakt
{
color: white;
text-align: left;
top: 0px;
right: 0px;
width: 50%;
position: fixed;
background-color: #E8940D;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#kontakt h4
{
padding-left: 30px;
}
#kontakt:hover
{
width: 90%;
}
那么如何将所有部分居中显示在一行中并隐藏子菜单和地址？此外，子菜单和地址在悬停时会滑动，他们不应该那样做。
我希望有人能帮助我，我将不胜感激。谢谢。 :)
最佳答案
也许您可以使用类似于典型轮播系统的东西。 一个包含两个最大尺寸菜单的容器，以及一个具有特定宽度(此处为页面宽度)的“窗口”div 和其中的滑动组件。
不要改变菜单的宽度，而是改变它们在大容器中的位置。 我们可以看到菜单滑动/移动，在此移动过程中，您可以轻松更改标题字体大小。
您可以使用 Jquery 在页面加载或调整大小时查找和管理最佳菜单宽度。
对不起我的英语 ;)
关于html - 滑动横向导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30404933/