1. 首頁
  2. 問答
  3. 固定的導航菜單內容在水平放置時不能水平滾動

固定的導航菜單內容在水平放置時不能水平滾動

2014-11-23 49 views
1

僅僅用CSS就可以強制導航菜單滾動頁面內容嗎？如果不是，我該怎麼辦？我希望它被固定在頂部！ 當我添加溢出時：滾動到#menucontainer div，它將一個滾動條放在div的下面，而不是在頁面的底部。固定的導航菜單內容在水平放置時不能水平滾動

謝謝。

這裏是Demo

這裏是代碼：

HTML：

佈局

<div id="menucontainer"> 

    <div id="wrapper"> 

     <ul> 

      <li><a id="Logo" href="#"></a> </li> 
      <li><a href="#">új kérdés</a></li> 
      <li><a href="#">új értékelés</a></li> 
      <li><a id="Message" href="#"></a> </li> 
      <li><a id="Notification" href="#">!</a> </li> 
      <li><a id="Settings" href="#"></a> </li> 
      <li> 
       <form method="get" action="/search" id="search"> 
        <input name="q" type="text" size="40" placeholder="Keresés..." /> 
       </form> 
      </li> 
     </ul> 
    </div> 
</div> 

<div id="Bodywrapper"> 
    <div class="LeftMenu"> 
     <a class="texttype2" href="#"> Kovács József</a> 
     <ul> 
      <li class="texttype1"><a href="#" id="person"> </a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> Üzenetek </a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> Értékeléseim</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> Kérdéseim</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> Exklúzív értékelések</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> Válaszok</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> Értesítések</a></li> 
     </ul> 
    </div> 
    <div class="Trends"> 
     <ul> 
      <li class="texttype1"><a href="#" class="texttype1"> #asdasdasdasds</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> #adasfaf</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> #Hahahahaha</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> #asdasdasdasds</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> #adasfaf</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> #Hahahahaha</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> #asdasdasdasds</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> #adasfaf</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> #Hahahahaha</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> #asdasdasdasds</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> #adasfaf</a></li> 
      <li class="texttype1"><a href="#" class="texttype1"> #Hahahahaha</a></li> 
     </ul> 
    </div> 
    <div id="Contentblock"> </div> 
    <div id="Contentblock"> </div> 
</div>

CSS：

body { 
padding:0px; 
margin:0px; 
background-color:lightgrey;} 


#menucontainer { 
position:fixed; 
width:100%; 
min-width:1280px; 
height:45px; 
background: #3f3f3f; /* Old browsers */ 
background: -moz-linear-gradient(top, #3f3f3f 0%, #000000 91%, #3f3f3f 91%, #33eb31 93%, #33eb31 101%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(91%,#000000), color-stop(91%,#3f3f3f), color-stop(93%,#33eb31), color-stop(101%,#33eb31)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* IE10+ */ 
background: linear-gradient(to bottom, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f3f3f', endColorstr='#33eb31',GradientType=0); /* IE6-9 */ 
-webkit-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64); 
-moz-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64); 
box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64); 
z-index: 2; 
margin: 0px auto;} 

#wrapper { 
font-family: Arial; 
font-weight: bold; 
font-size: 1em; 
max-width:1280px; 
color:#FFF; 
margin:0px auto; 
white-space:nowrap; 
top:-3px; 
position: relative; 
padding-left:40px;} 

#wrapper ul { 
padding:0px; 
margin:0px; } 

#wrapper ul li { 
padding:0px; 
margin:0px; 
line-height:45px; 
height:45px; 
display:inline-block; 
padding-right:20px;} 

#wrapper ul li a { 
text-decoration:none; 
color:#FFF; } 

#wrapper ul li a:hover { 
color: #33eb31; } 

#Logo { 
background-image: url(/logo.png); 
background-size: 30px 30px; 
display: inline-block; 
height: 30px; 
width: 30px; 
min-width: 30px; 
max-width: 30px; 
top: 8px; 
position:relative; } 

#Message { 
position: relative; 
background-image: url(/30x42_standard_mail.png); 
display: inline-block; 
height: 17.5px; 
width: 25px; 
top:2px; 
left: 280px; 
background-size: 25px 17.8px; 
background-repeat: no-repeat;} 

#Message:link { 
    text-decoration: none; 
    background-image: url(/30x42_standard_mail.png); 
} 

#Message:visited { 
    text-decoration: none; 
    background-image: url(/30x42_standard_mail.png); 
} 

#Message:hover { 
    text-decoration: none; 
    background-image: url(/30x42_hover_mail.png); 
} 
#Message:active { 
    color: white; 
    text-decoration: none; 
    background-image: url(/30x42_hover_mail.png); 
} 

#Notification { 
position: relative; 
display: inline-block; 
/*height: 17.5px; 
width: 5px;*/ 
top: 3px; 
left: 270px; 
/*background-image: url(/30x10not_normal.png); 
background-size: 5px 17.5px; 
background-repeat:no-repeat;*/ 
font-family: Arial; 
font-weight: bold; 
font-size: 1.55em; 
width: 20px; 
text-align:center; } 


#Notification a { 
text-decoration:none; 
color:#FFF; } 

#Notification a:hover { 
color: #33eb31; } 

#Settings { 
position: relative; 
display: inline-block; 
height: 22px; 
width: 22px; 
left: 253px; 
top: 5px; 
background-image: url(/30x30_standard_Controlpanel.png); 
background-size: 22px 22px; 
background-repeat:no-repeat; } 

#Settings:link { 
    text-decoration: none; 
} 

#Settings:visited { 
    text-decoration: none; 
} 

#Settings:hover { 
    text-decoration: none; 
    background-image: url(/30x30_hover_Controlpanel.png); 
} 
#Settings:active { 
    color: #33eb31; 
    text-decoration: none; 
    background-image: url(/30x30_hover_Controlpanel.png); 
} 

#search { } 

#search input[type="text"] { 
background: url(/search-dark.png) no-repeat 10px 6px #444; 
border: 0 none; 
font: bold 12px Arial,Helvetica,Sans-serif; 
color: white; 
width: 150px; 
padding: 6px 15px 6px 35px; 
-webkit-border-radius: 2px; 
-moz-border-radius: 2px; 
border-radius: 2px; 
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
-webkit-transition: all 0.7s ease 0s; 
-moz-transition: all 0.7s ease 0s; 
-o-transition: all 0.7s ease 0s; 
transition: all 0.7s ease 0s; 
     top: -3px; 
     left: 280px; 
    position:relative; 
    display:inline-block; 
    clear:both; } 

#Bodywrapper { 
margin: 0px auto; 
position: relative; 
max-width: 1280px; 
top: 0px; 
left: 0px; 
min-width:inherit; 
    padding-top:40px; } 

.LeftMenu { 
font-family:Arial; 
position:relative; 
margin: 0px auto; 
display:inline-block; 
max-width:1024px; } 

.texttype1 { 
font-family:Arial; 
font-size:1em; 
text-decoration:none; 
color:black; 
list-style-type:none; 
line-height: 24px; 
margin: 0px auto; } 

.texttype1 ul li { 
list-style-type:none;} 

.texttype2 { 
font-family:Arial; 
font-size:1.1em; 
text-decoration:none; 
color:black; 
list-style-type:none; 
line-height: 24px; 
left: 110px; 
top: 40px; 
position:relative; 
font-weight:bold; 
margin: 0px auto;} 

#person { 
background-image: url(/person.png); 
background-size: 40px 40px; 
display: inline-block; 
height: 40px; 
width: 40px; 
min-width: 40px; 
max-width: 40px; 
position:relative; } 

.Trends { 
font-family:Arial; 
position:relative; 
margin: 0px auto; 
display:block; 
max-width:1280px; } 

#Contentblock { 
background-color:white; 
border-radius:1px; 
height:auto; 
min-height: 300px; 
width: 800px; 
left: 290px; 
position:relative; 
display:block; 
padding: 20px; 
top: -200px; }

來源

2014-11-23 András Dzsida Szente

+0

嘗試使用'fixed' [position]（https://developer.mozilla.org/en-US/docs/Web/CSS/position） – hon2a 2014-11-23 11:26:04

+0

我正在使用它導致出現無法水平滾動菜單的問題 – 2014-11-23 11:41:22

+0

啊，好的。您需要避免「固定」，然後使用不同的方法將元素保留在頂部。 – hon2a 2014-11-23 11:44:19

回答

0

，因爲你已經在#menucontainer規則指定position:fixed導航原地踏步。

如果刪除此選項，滾動導航將點亮其餘內容。

演示在http://jsfiddle.net/q4f8nzqj/1/

來源

2014-11-23 11:27:25

+0

正好，但我希望它被固定在頂部，這就是爲什麼我使用固定:) – 2014-11-23 11:30:32

相關問題

 相關問題