垂直菜單堆疊文本

我創建了一個固定的垂直菜單堆疊文本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似乎消失了，因爲它不適合視口。有沒有辦法可以避免這種情況？

任何意見讚賞。

感謝

來源

2016-11-05 kate_hudson

使用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/

來源

2016-11-06 01:34:17 Johannes

使用柔性

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

來源

2016-11-05 23:08:25

請嘗試以下代碼.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/

來源

2016-11-05 23:37:54 amdouglas

垂直菜單堆疊文本

回答

相關問題