Top floating navigation.

ZeroHacker · 06-13-2010, 07:40 PM

Hi. I am new to this and wondering if somebody could point me in the right direction. I hope this is in the right section but if not please feel free to move it.

I am looking to have a navigation menu at the top of a website that stays at the top even if you scroll down.

Here is a link to the type of thing I am looking for: http://videolightbox.com/

As you can see the navigation menu stays in one place and the rest of the page appears to move behind it. Needless to say I want to be able to put my own links and the icons/links for other languages can stay. I would prefer, if possible, to have one script that I would call upon on every page that I use it.

Thank you in advance.

optimus203 · 06-14-2010, 12:22 AM

This site is using the following bolded CSS declarations to achieve the fixed navigation:

#mainheader {
position: fixed;
top: 0;
left: 0;
z-index: 10;
background-image: url(../img/header-bg.png);
margin-left: 0px;
background-repeat: repeat-x;
margin-top: 0px;
padding: 0px;
height: 61px;
color: white;
width: 100%;
}

ZeroHacker · 06-14-2010, 04:31 PM

Thanks for that, but it doesn't help me.

As I said I'm new to all this so I don't know how to implement that.

It would be better (for me) if somebody could make a sample page(s) (with or without external css, whichever way is best) and post it here.

Thank you and I'm sorry if I'm being a pain.

Excavator · 06-14-2010, 04:51 PM

Hello ZeroHacker,
I use a similar top menu on a lot of my HTML/CSS example pages. Have a look at the source code and CSS on http://nopeople.com/CSS/h_ul_menu-wi...ges/index.html

Quote:

I would prefer, if possible, to have one script that I would call upon on every page that I use it.

After you get your top menu working the way you want it would be easy to make it a .php include. Here's a simple tutorial for that - http://www.tizag.com/phpT/include.php

Excavator · 06-14-2010, 05:03 PM

Copy/Paste this bit into a new .html document and see if that's what you're looking for -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="" content="authored by http://www.nopeople.com/design" />
<title>top menu demo</title>
<style type="text/css">
html, body {
	background: #9C9;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align: center;
	color: #000;
}
* {
	margin: 0;
	padding: 0;
}
#hdr {
	width: 100%; 
	min-width: 900px;
	line-height: 48px;
	overflow: auto;
	text-align: center;
	background:#999;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
	#back {	
		width: 60%;
		float: left;
		display: block;
		color: #fff; 
	}
ul#links {
	margin: 0 0 0 60%;
	list-style: none;
}
ul#links li {
	padding:0 15px;
	display:inline;
}
	ul#links li a {color: #fff;}
		#hdr a:hover, #hdr a:active {color: #f00;}
#container {
	height: 1000px; /*for demo only*/
	width: 900px;
	margin: 60px auto;
	border: 2px solid #f00;
}
</style>
</head>
<body>
        <div id="hdr">
            <a href="http://nopeople.com/design/CSS tips/index.html" id="back">Back to CSS Tips</a>
                        <ul id="links">
                            <li><a href="#preview" rel="" id="anchor1" class="anchorLink">PREVIEW</a></li>
                            <li><a href="#html" rel="" id="anchor2" class="anchorLink">MARKUP</a></li>
                            <li><a href="#css" rel="" id="anchor3" class="anchorLink">CSS</a></li>
                        </ul>
		<!--end hdr--></div>  
    <div id="container">
    	<h1>Your website goes here</h1>
    <!--end container--></div>
</body>
</html>