Fixed Menu Bar on Top of Website
source link: http://siongui.github.io/2012/06/02/fixed-menu-bar-on-top-of-website/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Fixed Menu Bar on Top of Website
June 02, 2012
When we log in Gmail or Facebook, there is a fixed menu bar on top of the web page. How is this being done? The answer comes to my mind after I read the tutorial in [1].
The trick is to use CSS property code position:fixed in your HTML
element. Please refer to the following demo and sample code:
Source Code for Demo (html):
fixed.html | repository | view raw
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed Menu Bar on Top of Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="fixed-top">
<a href="https://siongui.github.io/">this</a>
<a href="https://www.google.com/">Google</a>
<a href="https://www.facebook.com/">Facebook</a>
</div>
<div style="height: 600px; background: blue;"> </div>
<div style="height: 600px; background: yellow;"> </div>
<div style="height: 600px; background: green;"> </div>
<div style="height: 600px; background: gray;"> </div>
</body>
</html>
Source Code for Demo (css):
style.css | repository | view raw
.fixed-top {
position: fixed;
top: 0;
left 0;
background: #66FFFF;
width: 100%;
height: 2em;
line-height: 2em;
word-spacing: 5em;
z-index:100;
}
With the above code, no matter how you scroll the web page, the menu bar is always on top, which is the same as the menu bar on Gmail or Facebook.
References:
[2]CSS Float
[3]CSS position
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK