![](/img/trans.png)
[英]How to make navigation menu stay at the top of the page while scrolling only?
[英]How to make navigation menu stay in place
當用UL(無序列表)構造導航菜單時,我注意到當放大和縮小頁面時,列表項會向右移動,使它們脫節。 如何使他們始終保持在同一地點?
<div id="navigation">
<ul>
<font face="Verdana, Geneva, sans-serif">
<li > <a href="../index.html" > ANA SƏHIFƏ </a> </li>
<li> <a href="../Biography/BiographyAZ.html"> BIOQRAFIYA </a> </li>
<li id="active-li"> <a href="#"> XƏBƏRLƏR VƏ HADISƏLƏR </a></li>
<li><a> KİTABLAR </a></li>
<li> <a> VİDEOLAR </a> </li>
<li> <a id="last-item">FOTOLAR</a> </li>
</font>
</ul>
#navigation {
width: 900px;
margin: 0 auto 0px;
}
div#navigation ul li {
font-size:9px;
list-style:none;
background-color:transparent;
background-color:#FFF;
float: left;
}
div#navigation ul li:hover {
background-color:#9C1A35;
}
div#navigation ul li a {
color:#333333;
text-decoration:none;
display: block;
padding:10px 43px 20px;
}
#navigation ul li a:hover {
color:#fff;
}
ul {
padding:0;
}
#active-li {
background:#9C1A35 !important;
}
#active-li a {
color:#fff !important;
}
#last-item {
padding: 10px 42px 20px 42px !important;
}
div#navigation ul li #active {
background:#9C1A35 !important;
}
div#navigation ul li #active a {
color:#fff;
}
過度縮放時,大多數頁面都會失去其布局。 在瀏覽器中啟用“僅縮放文本”選項時,會發生這種情況。 這是我的建議:
<a>
項的padding-right
和padding-left
減小到一個較低的值(43px對您的菜單來說太大了)。 height
, min-height
和max-height
,並設置overflow:hidden
。 這樣,文本將保留在它的容器框中,並且不會用完。 #navigation { width: 900px; margin: 0 auto 0px; display: inline; }
找出使導航欄保持原位的新方法
<div id="navigation">
<ul>
<font face="Verdana, Geneva, sans-serif">
<li > <a href="../index.html" > ƏSAS SƏHİFƏ </a> </li>
<li> <a href="../Biography/BiographyAZ.html"> BIOQRAFIYA </a> </li>
<li id="active-li"> <a href="#"> XƏBƏRLƏR VƏ HADISƏLƏR </a></li>
<li><a href="../Books/booksAZ.html"> KİTABLAR </a></li>
<li> <a> VİDEOLAR </a> </li>
<li> <a id="last-item">FOTOLAR</a> </li>
</font>
</ul>
</div>
#navigation {
width: 900px;
margin: 0 auto 0px;
}
div#navigation ul li {
font-size:9px;
list-style:none;
background-color:transparent;
background-color:#FFF;
float: left;
width:150px;
height:40px;
text-align:center;
}
div#navigation ul li:hover {
background-color:#9C1A35;
}
div#navigation ul li a {
color:#333333;
text-decoration:none;
display: block;
padding:6px 0px 18px;
border-left:1px thin black;
border-right:1px thin black;
}
#navigation ul li a:hover {
color:#fff;
}
ul {
padding:0;
}
#active-li {
background:#9C1A35 !important;
}
#active-li a {
color:#fff !important;
}
div#navigation ul li #active {
background:#9C1A35 !important;
}
div#navigation ul li #active a {
color:#fff;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.