但是這時又會產生另外一個問題是, 加上那屬性後儘管視窗變小, 但選單會不動如山, 也就是無法顯示的部分會消失, 這樣會造成當選單太長, 解析度太低視窗太小時, 部分的按鈕會消失
這時解決的方法是做出一個可以隨著視窗大小伸縮的ul li選單 並包含次選單.
HTML
<!DOCTYPE html>
<title>Full-width justified nav</title>
<h1>Full-width justified nav</h1>
<ol>
<li>Home
<li class=hover>Section two
<li>Section three
<li class=active>Another section
<li>A section with a longer name
<li>Section six
<li>This is section seven
<li>Section 8
</ol>
CSS
ol {
display: table;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
color: #222;
text-align: center;
white-space: nowrap;
background-color: #f1f1f1;
background-image: linear-gradient(#f8f8f8,rgba(248,248,248,0));
box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 0 0 2px rgba(255,255,255,.5);
cursor: pointer;
}
li {
overflow: hidden;
display: table-cell;
padding: 10px;
text-overflow: ellipsis;
border: 1px solid #ddd;
border-bottom-color: #ccc;
border-right: 0;
}
li:first-child {
border-radius: .2em 0 0 .2em;
}
li:last-child {
border-right: 1px solid #ddd;
}
li:hover, .hover {
color: #000;
background-color: #fcfcfc;
}
li.active {
color: #fff;
background-color: #0c63bc;
border-color: #0c63bc;
}
.active + li {
border-left-color: #0c63bc;
}
沒有留言:
張貼留言