CSS Side Menu "position:fixed;"

matz0rz · 03-14-2013, 06:21 AM

[RESOLVED] Okay so I've recently started a class for Programmer Analyst. Right now we just started the Web Development module and I'm trying to impress the teacher!

So my goal is to have a Side Navigation menu Menu follow the scroll up and down the screen. I got that working but theirs a problem. When I minimize the browser ("restore down" button between the exit and minimize at the top-right(turns the browser into a smaller box)).

It's clearly an issue with my CSS file, to be more specific:

Code:

position:fixed;
margin-right:10px;

Code:

.sidenav{
	margin-top:10px;
	width:175px;
	margin-right:10px;
	margin-left:850px;
	position: fixed;
	float:right;
	background-color:#000;
	text-align:center;
	border:thick #FFF solid;
	border-radius:30px;
	transition: all 5s ease;
	-webkit-transition: all 5s ease;
	-moz-transition: all 5s ease; 
	-o-transition: all 5s ease; 
	-ms-transition: all 5s ease;
}

So my question is: how can I setup the side nav so it follows the screen up and down; but also stays in the right position. As Shown in image_1 and 2 bellow.
PS: Due tomorrow morning and I'm staying up all night trying to figure it out.

sunfighter · 03-14-2013, 05:41 PM

Using position: fixed; is correct, but it is better to place the fixed object using top/bottom and left/right selectors.
Your margin-left:850px; really makes a lot of empty space if it was followed.
Try this (I have commented out what you don't need):

Code:

.sidenav{
	//margin-top:10px;
	//margin-right:10px;
	//margin-left:850px;
	//float:right;
	position: fixed;
	top: 10px;
	right: 10px;
	width:175px;
....

matz0rz · 03-14-2013, 05:52 PM

Quote:

Originally Posted by sunfighter

Using position: fixed; is correct, but it is better to place the fixed object using top/bottom and left/right selectors.
Your margin-left:850px; really makes a lot of empty space if it was followed.
Try this (I have commented out what you don't need):

Code:

.sidenav{
	//margin-top:10px;
	//margin-right:10px;
	//margin-left:850px;
	//float:right;
	position: fixed;
	top: 10px;
	right: 10px;
	width:175px;
....

Thanks it's a little better but it still isn't perfect when I minimize. Is it possible to make a ".SideNavContainer" and have it stay fixed inside that container? I even got my teacher trying to figure it out at the moment.

ttkim · 03-14-2013, 06:02 PM

I don't think you can put a fixed element inside a container.

Anyway, I've never tried something like this, but theoretically, this should work.

Code:

body {
    margin:0;
    padding:0;
}
#container {
    margin: 0 auto; /* Centering the container */
    width: 80%; /* Giving it a width of 80% */
}
.SideNavContainer {
    position:fixed;
    right: 10%;
}

Code:

<body>
    <div id="container">I am the container</div>
    <div class="SideNavContainer">I am the side nav</div>
</body>

The main container is centered as shown by margin: 0 auto;. The width is 80% so margin-left is 10% and margin-right is 10%.

Then, your .SideNavContainer has a fixed position that is 10% away from the right.

The main container's margin-right = .SideNavContainer's right.

sunfighter · 03-14-2013, 07:49 PM

Quote:

Thanks it's a little better but it still isn't perfect when I minimize.

You might want to change the px's, which are hard coded, to %'s, which shrink when the browser is shrunk down. But that means all px's. As ttkim has shown.

sunfighter · 03-14-2013, 08:14 PM

Play with this:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style type="text/css">
body {
    margin:0;
    padding:0;
}
#container {
    margin: 0 auto;
    width: 90%;
	height: 100%;
	padding-bottom: 10px;
	border: 1px solid blue;
}
.SideNavContainer {
    position:fixed;
    right: 5%;
	top: 10px;
	border: 1px solid red;
	color: white;
	background-color:#000;
	text-align:center;
	border:thick #FFF solid;
	border-radius:30px;
	transition: all 5s ease;
	-webkit-transition: all 5s ease;
	-moz-transition: all 5s ease;
	-o-transition: all 5s ease;
	-ms-transition: all 5s ease
}
#main {
    position:relative;
	right: 1%;
	padding-left: 2%;
	padding-right: 2%;
	margin-left: 2%;
    width: 70%;
	height: 100%;
	border: 1px solid red;
}
</style>
</head>

<body>
<div id="container">I am the container
    <div id="main">
		I am the main body<br />
		I am the main body<br />
		I am the main body<br />
		I am the main body<br />
		I am the main body<br />
		I am the main body<br />
		I am the main body<br />
	</div>
    <div class="SideNavContainer">
		I am the side nav<br />
		I am the side nav<br />
		I am the side nav<br />
		I am the side nav<br />
	</div>
</div>
</body>
</html>

matz0rz · 03-15-2013, 04:12 AM

You are truly a genius! Thank you!

Quote:

Originally Posted by sunfighter

Play with this:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style type="text/css">
body {
    margin:0;
    padding:0;
}
#container {
    margin: 0 auto;
    width: 90%;
	height: 100%;
	padding-bottom: 10px;
	border: 1px solid blue;
}
.SideNavContainer {
    position:fixed;
    right: 5%;
	top: 10px;
	border: 1px solid red;
	color: white;
	background-color:#000;
	text-align:center;
	border:thick #FFF solid;
	border-radius:30px;
	transition: all 5s ease;
	-webkit-transition: all 5s ease;
	-moz-transition: all 5s ease;
	-o-transition: all 5s ease;
	-ms-transition: all 5s ease
}
#main {
    position:relative;
	right: 1%;
	padding-left: 2%;
	padding-right: 2%;
	margin-left: 2%;
    width: 70%;
	height: 100%;
	border: 1px solid red;
}
</style>
</head>

<body>
<div id="container">I am the container
    <div id="main">
		I am the main body<br />
		I am the main body<br />
		I am the main body<br />
		I am the main body<br />
		I am the main body<br />
		I am the main body<br />
		I am the main body<br />
	</div>
    <div class="SideNavContainer">
		I am the side nav<br />
		I am the side nav<br />
		I am the side nav<br />
		I am the side nav<br />
	</div>
</div>
</body>
</html>