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导航菜单

回答

相关问题