Всё для Web Мастера uCoz

Лучшие шаблоны для ucoz, скрипты для ucoz, иконки для uCoz, шапки для uCoz.




Меню сайта

Случайное

Реклама

Немного Тегов
Скрипты для uCoz шаблоны для uCoz Иконки для uCoz Скачать иконки для uCoz Новые шаблоны для uCoz Новые скрипты для uCoz cs шаблоны для uCoz Бесплатная раскрутка сайтов uCoz Всё для Юкоз Шаблоны для юкоз с рабочим конструктором

Помощь сайту
Наши банеры :)

Новое
Новое для uCoz Новое на форуме
+ Скрипт анонимного чата (ajax)
+ The Room Two
+ Wild Blood
+ Botanicula / Ботаникула
+ Король Математики (2013)
+ Кнопка рейтинга + и -
+ отбросы смотреть онлайн
+ Marlinnkalmes
+ проститутки иркутска
+ споры страховыми компаниями
+ купить водку ельцин - Белая Церковь-Полтава-Харьков
+ FedorTuh
Новое для Photoshop Новые Программы
+ Календарь на 2016 год - Прикольная обезьянка с фруктом
+ Фото шаблон - В синем платье у Порше 918
+ Шаблон для фото - Интервью актера
+ PSD шаблон для мужчин - Магнат у себя дома
+ Photoshop шаблон - В гламурной шляпе с цветами
+ Фотошаблон для фото - С новым годом от снегурки
+ Fort Boyard
+ Небольшой электронный помощник
+ Достойный компьютерный помощник
+ Хроники Альбиана: Магическая конвенция (2010) PC
+ Таймер выключения. Версия 2.5
+ Легальная эксплуатация программы 1С

  Интересное

Скачать Делаем фиксированную панель навигации с помощью CSS


Добавлено: 11.02.2010 | Источник: http://vsebudetok.net

Посмотреть ДЕМО

Создадим фиксированную панель навигации для сайта или блога.

Фиксированная панель навигации может быть полезна на разных блогах, в которых обычно длина поста очень большая. Пользователю, чтобы дочитать ее до конца, необходимо использовать скрол. Будет чрезвычайно удобно, если навигация будет неподвижной и всегда на виду.

Базовая структура - 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>

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();
});

});

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


Получить прямую ссылку на Новость!

Как установить Шаблон?!          Как установить Скрипт?!

Сообщить о нерабочей ссылке

Любое копирование и распространение материала, без указания источника ЗАПРЕЩЕНО!

Категория: Скрипты для uCoz | Просмотров: 2077 | Добавил: Vsebudetok

Теги: Скачать Делаем фиксированную панель навигации с помощью CSS, скачать Делаем фиксированную панель навигации с помощью CSS для uCoz бесплатно

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Профиль
Среда
23.07.2025
07:51




Для расширенных возможностей авторизуйтесь или зарегистрируйтесь...


Поиск по сайту

Всё Для uCoz

Для Photoshop

Мини-Чат

Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0



Такая hr :\

Сегодня были:


Категории раздела


Портал Our-Soft™ всё для сайтов uCoz © 2009-2010
Скрипты uCoz | Шаблоны uCoz | Sitemap-forum.xml | Sitemap.xml |
Все материалы принадлежат их Правообладателям. Тут Скрипты и шаблоны для uCoz
PR-CY.ru