Question

我对CSS很陌生，而且对于如何使这种导航工作有所了解。默认情况下，导航应如下所示：

enter image description here

当联系部分悬停时，它看起来像这样：

enter image description here

当然，它应该以相反的方式起作用：

enter image description here

您可以在此处查看我的标记，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%;
}

那么如何将所有部分集中到一行+隐藏子菜单和地址？此外，子菜单和地址在悬停时滑动，他们不应该这样做。

我希望有人可以帮助我，我真的很感激。谢谢。：）

Answer 1

也许你可以使用像典型的旋转木马系统那样的东西。一个容器，两个菜单都是最大的，并且有一个＆＃34;窗口＆＃34;具有特定宽度的div（此处为页面的一个）并在其中滑动组件。

不要更改菜单宽度，而应更改大容器中的位置。我们可以看到菜单滑动/移动，在此移动过程中，您可以轻松更改标题字体大小。

您可以使用Jquery在页面加载或调整大小时查找和管理最佳菜单宽度。

Sry for my english;）

滑动水平导航

1 个答案: