html5 底部固定菜单,CSS：如何实现顶部、底部的固定菜单

顶部固定菜单

#top-menu {

position: fixed;

z-index: 10;

left: 0;

right: 0;

top: 0;

background-color:rgba(255,255,0,0.5); /*透明效果*/

}

#top-menu li {

float: left;

list-style: none;

}

#top-menu a {

display: block;

padding: 5px 25px 7px 25px;

width: 4em;

text-align: center;

-webkit-transition: .5s all ease-out;

-moz-transition: .5s all ease-out;

transition: .5s all ease-out;

border-top: 3px solid white;

color: #aaa;

text-decoration: none;

}

#top-menu a:hover {

color: #000;

}

#top-menu li.active a {

border-top: 3px solid #333;

color: red;

}

#foo {

position: absolute;

top: 400px;

}

#bar {

position: absolute;

top: 800px;

}

#baz {

position: absolute;

top: 1200px;

}

• Top

• Foo

• Bar

• Baz

Foo

Bar

Baz

主要实现在#top-menu。

效果：

底部固定菜单

和上面的类似：

#top-menu {

position: fixed;

z-index: 10;

left: 0;

right: 0;

bottom: 0;

width: 100%;

background-color:rgba(255,255,0,0.5);

margin:0; /*很重要*/

}

#top-menu li {

float: left;

list-style: none;

}

#top-menu a {

display: block;

padding: 10px 25px 5px 25px;

width: 4em;

text-align: center;

-webkit-transition: .5s all ease-out;

-moz-transition: .5s all ease-out;

transition: .5s all ease-out;

border-bottom: 3px solid cyan;

color: #aaa;

text-decoration: none;

}

#top-menu a:hover {

color: #000;

}

#top-menu li.active a {

border-bottom: 3px solid #333;

color: red;

}

#foo {

margin-top: 400px;

}

#bar {

margin-top: 400px;

}

#baz {

margin-top: 400px;

}

• Top

• Foo

• Bar

• Baz

Foo

Bar

Baz

效果：

ul默认是有margin的，如果#top-menu不定义margin:0;，会变成：