CSS HTML導航菜單

這個例子在左上方有一個固定的ul導航，它代表4個部分;每個文本都包含一個變量。我想知道如何管理HTML/CSS ，以便無論任何部分被點擊（1-4），該部分的相關文本都會顯示在上面，而不管任何部分中的文本數量。換句話說，無論點擊哪個部分 - 該部分都會被調整到窗口中的相同位置。所以導航菜單是固定的，點擊時相應的文本段被帶到到相同的確切位置和視圖。CSS HTML導航菜單

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 

body 
{ 
    background-color:#F3E2A9; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    font-weight: normal; 
    font-variant: normal; 
    font-style: normal; 
    line-height: 120%; 
    margin:200px 0px 0px 250px; 
    padding:0px 0px 0px 0px; 
    max-width:600px; 
} 


      #navlist 
      { 
      position: fixed; 
      left: 50px; /**/ 
      top: 75px; 
      } 

      #navlist 
      { 
      padding-left: 0; 
      margin-left: 0; 
      border-bottom: 1px solid gray; 
      width: 150px; 
      } 

      #navlist li 
      { 
      list-style: none; 
      margin: 0; 
      padding: 0.25em; 
      border-top: 1px solid gray; 
      } 


#navlist li a 
{ 
line-height: 125%; 
text-decoration: none; 
font-family:Arial,Helvetica,sans-serif; 
font-size:18px; 
font-variant:small-caps; 

font-style: bold; 

} 


     </style> 
    </head> 

    <body> 

     <ul id="navlist"> 
     <li><a href="#1">1</a></li> 
     <li><a href="#2">2</a></li> 
     <li><a href="#3">3</a></li> 
     <li><a href="#4">4</a></li> 



     </ul> 


<a id="1"</a> 
<h2>1</h2> 
<p> 
1Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea. 

</p> 

<a id="2"</a> 
<h2>2</h2> 
<p> 
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea. 

2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea. 
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea. 
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea. 

2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea. 
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea. 

2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea. 
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea. 


</p> 
<a id="3"</a> 
<h2>3</h2> 
<p> 
3Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 
Quis fuisset ut has, in sit vero probo, vim in elit inermis expetendis. At veniam nullam eleifend pri. Mel in nusquam conceptam 

referrentur, eos et natum insolens vituperata. In sea alia eruditi, ceteros vivendo est ad. Wisi dicam atomorum eu duo. Quo 

primis dignissim intellegat ex. 


</p> 
<a id="4"</a> 
<h2>4</h2> 
<p> 
4Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea. 

</p> 
<a id="5"</a> 
<h2>5</h2> 
<p> 
5Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea. 

</p> 

    </body> 
</html>

來源

2014-05-03 Michael

備註：ID [*** should not ***]（http://stackoverflow.com/a/79022/2065702）以數字開頭，因爲只能使用[[id =「1」 ]'在CSS（'＃1'不起作用） –

@ZachSaucier嗯......有趣的是，你真的嘗試過嗎？看到我的回答，我使用（幾乎）與上面完全相同的代碼，使用'＃1'完全沒有問題 - 您可能想詳細說明爲什麼它不起作用，或者它只是不正確的標記。 ..？ – webeno

@webeno 1.這是不正確的標記2.它不能通過使用CSS樣式：'＃1 {...屬性...}'，你沒有做 –

只需添加一個較大的底部邊緣，一個將菜單項被點擊

當

body { 
    /* ... */ 
    margin:200px 0px 2000px 250px; 
    /* ... */ 
}

而且絕對一旦頁面滾動向上重疊的頁面，你可以申請一個頂級填充到h2如此它正好出現在高度你想讓它：

h2 {  
    padding-top:95px 
}

Here is a demo（我清理你的代碼一點點）

來源

2014-05-03 18:04:54 webeno

的評論中指出了該問題的動畫：http://jsfiddle.net/59V5z/1/ – Michael

@邁克爾，你只是再次粘貼我的小提琴... – webeno

webeno - 對不起，我試圖擺弄我的問題和提前張貼的評論 - 然後我不得不轉移到別的東西。但是，如果你看着原來的小提琴： h2 {padding-top：95px } – Michael

CSS HTML導航菜單

回答

相關問題