2015-04-06 110 views
0

我正在製作一個默認情況下與網站標題內嵌顯示的響應菜單。然而,在移動設備上,菜單需要顯示爲網站標題下方的列表,並通過點擊+或 - 進行切換。除了兩個小問題,我已經完成了所有這些。響應式導航調整

  1. 我似乎無法拿到菜單,顯示相對於文檔流程,使其重疊在頁面上
  2. 我需要的菜單是頁面的整個寬度的文本。

我不確定是否只需要將此菜單放在導航欄之外的自己的div中,或者我只是忘記了一些css規則。它目前設置爲:

<nav> 
<div id="nav-div"> 
    <div id="title"></div> 
    <div id="menu-toggle"></div> 
    <div id="nav-links"> 
    <ul> 
    <li><a href="#">link 1</a></li> 
    <li><a href="#">link 2</a></li> 
    <li><a href="#">link 3</a></li> 
    </ul> 
    </div> 
</div> 
</nav> 

CSS:

#nav-links { 
    position:absolute; 
    width:100%; 
    ul { 

    } 
    li { 
    display:block; 
    float: none; 
    border-bottom: 1px solid black; 
    &:last-child { 
     border-bottom: none; 
    } 
    a { 

    } 
    } 
} 
+2

安置自己的CSS以及請。 – j08691

回答

0

您需要在#nav-links設置topleft性能。如果您也設置right,則不需要width: 100%。也使它position:relative。像這樣:

#nav-div { 
    position: relative; 
    height: 50px; 
} 
#nav-links { 
    position:absolute; 
    left: 0; 
    right: 0; 
    ... 
} 

更改50px無論你的導航欄高度是多少。

+0

是的。我知道它必須是那樣的簡單。 – Blakethepatton

+0

不客氣,高興地幫忙! :) – ndcweb

+0

是的,因爲它是固定的。如果你想留在最上面,你需要定位#nav-links相對於父元素,絕對位置。 – ndcweb

0

我終於實現了這個問題的方法是:

ul { 
    position: absolute; 
    width: 100%; 
    right: 0px; 
    left: 0px; 
    li { 
    width: 100%; 
    a { 
     width: @small-width; //defined with my variables 
     margin: 0px auto; 
     display: block; 
    } 
    } 
}