垂直菜单堆叠文本

问题描述：

我创建了一个固定的垂直菜单堆叠文本JSFiddle 垂直菜单堆叠文本

我的每个部分将100％的高度。我不知道这是否是做事的正确方法，但我基本上是用来span元素，并将它们设置为display: block;

<a class="page-scroll" href="#header"> 
    <span> H </span> 
    <span> O </span> 
    <span> M </span> 
    <span> E </span> 
</a>

现在我都有种工作，但看到我处理100每个部分的高度为％，我试图将菜单垂直对齐在容器的中间。我已经尝试在ul上使用此属性，但它不会将整个菜单移动到中间。

我正在考虑使用50％的保证金顶部，但如果我向菜单中添加更多项目，这可能无法正常工作。此外，如果我确实在菜单中添加了更多项目，是否有办法确保整个菜单显示在视口中，因此不会与其他部分重叠？我已更新JSFiddle以说明我的意思。因为我在菜单中添加了另外几个菜单项，test2似乎消失了，因为它不适合视口。有没有办法可以避免这种情况？

任何意见赞赏。

感谢

答

使用Flexbox的吧。你只需要加100％的高度为您.navbar元素，以下设置.navbar-nav：

.navbar-nav { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    flex-wrap: wrap; 
}

https://jsfiddle.net/n4p9hknu/2/

如果有更多的菜单列表项比适合在页面上，flex: wrap将导致他们包到第二列：https://jsfiddle.net/rubgowpa/1/

答

使用柔性

<style> 
.page-scroll{ 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
}

<a class="page-scroll" href="#"> 
    <span> H </span> 
    <span> O </span> 
    <span> M </span> 
    <span> E </span> 
</a>

答

请尝试以下代码.nav.navbar-nav
集0123删除 on .nav.navbar-nav
（可选）添加基于高度的媒体查询以处理菜单在屏幕上的显示，当垂直显示时，菜单选项的大小不足以适应菜单选项。

HTML（不变）：

<div class="navbar navbar-fixed-left"> 
    <ul class="nav navbar-nav"> 
     <li> 
      <a class="page-scroll" href="#header"> 
       <span> H </span> 
       <span> O </span> 
       <span> M </span> 
       <span> E </span> 
      </a> 
     </li> 
     <li> 
      <a class="page-scroll" href="#about"> 
       <span> A </span> 
       <span> B </span> 
       <span> O </span> 
       <span> U </span> 
       <span> T </span> 
      </a> 
     </li> 
     <li> 
      <a class="page-scroll" href="#contact"> 
       <span> C </span> 
       <span> O </span> 
       <span> N </span> 
       <span> T </span> 
       <span> A </span> 
       <span> C </span> 
       <span> T </span> 
      </a> 
     </li> 
    </ul> 
</div> 

<header id="header"> 
    <div class="header-content"> 
    <div class="header-content-inner"> 
     <h1 id="homeHeading"> 
     Some Title 
     </h1> 
    </div> 
    </div> 
</header> 

<section class="bg-primary" id="about"></section>

CSS：

html, body { 
    height: 100%; 
    width: 100%; 
} 

header { 
    background: green; 
    color: white; 
    text-align: center; 
    min-height: 100vh; 
} 

header .header-content { 
    padding: 0 50px; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 100%; 
} 

header .header-content .header-content-inner { 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 1000px; 
} 

header .header-content .header-content-inner h1 { 
    color: #ffffff; 
    font-size: 33px; 
    font-weight: 100; 
    letter-spacing: 2px; 
    line-height: 46px; 
    width: 100%; 
} 

.navbar-fixed-left { 
    border-radius: 0; 
    height: 100%; 
    position: fixed; 
    width: 140px; 
    z-index: 99999; 
} 

.navbar-fixed-left .navbar-nav > li { 
    float: none; 
    width: 139px; 
} 

.navbar-nav > li > a > span { 
    display: inline-block; 
    font-size: 1.2em; 
    padding-bottom: 0; 
    padding-top: 0; 
    text-align: center; 
    color: #ffffff; 
} 

#about { 
    background: blue; 
    height: 100%; 
    min-height: 100%; 
} 

.nav.navbar-nav { 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

@media (min-height: 450px){ 
    .navbar-nav > li > a > span { 
    display: block; 
    } 
}

演示：https://jsfiddle.net/x23yg9ot/5/

你显然需要调整在媒体查询高度条件以满足您的需求。

这种调整可以自动使用JavaScript来完成，像这样：https://jsfiddle.net/x23yg9ot/8/

垂直菜单堆叠文本

相关推荐