Фиксированная навигация с помощью CSS

Как сделать фиксированную боковую колонку с навигацией по сайту (sidebar) ? Об этом Вы узнаете из этой статьи.

Для начала посмотрим, как это выглядит, на картинке ниже (кликабельна).

sticky_sidenav


А теперь сама реализация.

Делим страницу на два поля:

<div class="container">
	<div id="sidenav><!--Fixed Sidenav Goes Here--></div>
	<div id="content"><!--Content Goes Here--></div>
</div>

Стили для боковой навигации и контента:

.container {
	width: 980px;
	margin: 0 auto;
	overflow: hidden;
	background: url(container_stretch.gif);
	font-size: 1.2em;
	position: relative;
}
#sidenav {
	width: 300px;
	position: fixed;
	float: left;
}
#content {
	float: right;
	width: 640px;
	padding: 0 20px 20px;
}
*html #sidenav {
	position: absolute;
	left: expression( ( 0   ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) )   'px' );
	top: expression( ( 0   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) )   'px' );
}

Теперь содержание этих двух контейнеров:

<div id="sidenav">
	<a href="/"><img src="logo.gif" alt="" /></a>
	<h2 class="categories">Categories</h2>
	<ul>
        	<li><a href="#">Link</a></li>
        	<li><a href="#">Link</a></li>
        </ul>
        <h2 class="sites">Other Sites</h2>
        <ul>
        	<li><a href="#">Link</a></li>
        	<li><a href="#">Link</a></li>
	</ul>
</div>
 
<div id="content">
    <h1>Articles &amp; Resources for Web Designers</h1>
    <h2>Opto tego, distineo luptatum</h2>
    <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero.</p>
</div>

И сами стили для контейнеров:

#sidenav h2 {
	text-indent: -99999px;
	height: 41px;
	padding: 0; margin: 15px 0 5px;
	background-position:  20px top;
}
h2.categories {background: url(h2_categories.gif) no-repeat ;}
h2.sites {background: url(h2_othersites.gif) no-repeat ;}
#sidenav ul {
	margin: 0; padding: 0 20px 30px 20px;
	list-style: none;
	background: url(sidenav_hr.gif) no-repeat right bottom;
}
#sidenav ul li{
	margin: 0; padding:  0;
	display: inline;
}
#sidenav ul li a{
	display: block;
	margin: 0; padding:  5px 0 5px 15px;
	background: url(sidenav_arrow.gif) no-repeat left center;
	text-decoration: none;
	color: #333;
}
#sidenav ul li a:hover {
	color: #999;
}
 
#content h1 {
	background: url(h1_home.gif) no-repeat center top;
	text-indent: -9999px;
	height: 145px;
	margin: 0 0 0 -20px;
	padding: 0;
}
#content h2 {
	color: #7f0708;
	margin: 10px 0;  padding: 10px 0;
	font-size: 2em;
	font-weight: normal;
}
#content p {
	line-height: 1.8em;
	padding: 7px 0;
	margin: 7px 0;
}

А теперь jQuery Fix, который нам поможет для борьбы с 6-ым ie:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 	function staticNav() {
		var sidenavHeight = $("#sidenav").height();
		var winHeight = $(window).height();
		var browserIE6 = (navigator.userAgent.indexOf("MSIE 6")&gt;=0) ? true : false;
 		if (browserIE6) { //if IE6...
			$("#sidenav").css({'position' : 'absolute'});
		} else { //if not IE6...
			$("#sidenav").css({'position' : 'fixed'});
		}
 		if (sidenavHeight > winHeight) {
			$("#sidenav").css({'position' : 'static'});
		}
	}
 	staticNav(); //Execute function on load
 	$(window).resize(function () {
		staticNav();
	});
});
</script>

Как это выглядит, можно посмотреть здесь.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *