Посмотреть
ДЕМО Создадим фиксированную панель навигации для сайта или блога.
Фиксированная панель навигации может быть полезна на разных блогах, в которых обычно длина поста очень большая. Пользователю, чтобы дочитать ее до конца, необходимо использовать скрол. Будет чрезвычайно удобно, если навигация будет неподвижной и всегда на виду.
Базовая структура - HTML/CSS
Базовая структура - HTML/CSS
Для начала необходимо отцентрировать главный контейнер, и в него добавить еще два (sidenav и content).
HTML
Code
<div class="container">
<div id="sidenav><!--Fixed Sidenav Goes Here--></div>
<div id="content"><!--Content Goes Here--></div>
</div>
Зафиксировать навигацию очень просто. Достаточно добавить position: fixed к панели навигации и придать всему контенту float: right.
CSS
Code
.container {
width: 980px;
margin: 0 auto;
overflow: hidden;
background: url(container_stretch.gif);
font-size: 1.2em;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Keeps content to the right side--*/
width: 640px;
padding: 0 20px 20px;
}
К сожалению, position: fixed не работает в IE6. Но есть небольшой хак. Его мы и используем:
Code
*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' );
}
Создаем панель навигации - HTML/CSS
Вначале идет лого, далее заголовок 2-го уровня и навигации в виде неупорядоченного списка.
Code
<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>
Что бы сделать все заголовки 2-го уровня в виде картинки. Надо в CSS:
Code
#sidenav h2 {
text-indent: -99999px; /*--Push the text off of the page--*/
height: 41px;
padding: 0; margin: 15px 0 5px;
background-position: 20px top; /*--Set position of each heading background--*/
}
h2.categories {background: url(h2_categories.gif) no-repeat ;} /*--Background image for "category" heading--*/
h2.sites {background: url(h2_othersites.gif) no-repeat ;} /*--Background image for "other sites" heading--*/
#sidenav ul {
margin: 0; padding: 0 20px 30px 20px;
list-style: none;
background: url(sidenav_hr.gif) no-repeat right bottom; /*--thin break line underneath the navigation--*/
}
#sidenav ul li{
margin: 0; padding: 0;
display: inline; /*--Fixes IE6 bug of double margin--*/
}
#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;
}
Создаем главную панель с контентом - HTML/CSS
Эта часть очень проста. Здесь также использована техника замены заголовка на изображение.
HTML
Code
<div id="content">
<h1>Articles & 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>
CSS
Code
#content h1 {
background: url(h1_home.gif) no-repeat center top; /*--Background image of heading--*/
text-indent: -9999px; /*--Push text off of page--*/
height: 145px;
margin: 0 0 0 -20px; /*--Since the #content has a padding of 20px, we will push this to the left -20px so it can align--*/
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.
Имейте ввиду, если у Вас будет сайдбар с большим количеством ссылок, возможно, Вам стоит отказаться от фиксированной панели. По моему опыту, фиксация оправдывает себя, когда у Вас всего несколько ссылок в панели.
jQuery
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
$(document).ready(function() {
function staticNav() {
var sidenavHeight = $("#sidenav").height(); //Get height of sidenav
var winHeight = $(window).height(); //Get height of viewport
var browserIE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false; //Check for IE6
if (browserIE6) { //if IE6...
$("#sidenav").css({'position' : 'absolute'}); //reset the sidenav to be absolute
} else { //if not IE6...
$("#sidenav").css({'position' : 'fixed'}); //reset the sidenav to be fixed
}
if (sidenavHeight > winHeight) { //If sidenav is taller than viewport...
$("#sidenav").css({'position' : 'static'}); //switch the fixed positioning to static. Say good bye to sticky nav!
}
}
staticNav(); //Execute function on load
$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
staticNav();
});
});
Данный код не используется в демо версии, так как у нас всего несколько ссылок. В случае если у Вас будет много ссылок (и они не будут видны на мониторе), можете вставить код выше в шапку документа.
