Фиксированная панель. Как самому сделать панель с фиксированным положением

Многие видели на сайтах, а в основном, на блогах, панели и кнопки с фиксированным положением. Многие видели, но некоторые не знали, как фиксированную панель реализовать на своем сайте. Кроме того, в Twitter меня очень многие спрашивали, каким плагином я пользовался, чтобы вставить фиксированную панель на свой блог. На самом деле все делается очень просто. Не надо быть профессиональным программистом, чтобы сделать такую панель или кнопку, без использования плагинов.

Фиксированная панель — это такая панель, которая во время прокрутки страницы вверх или вниз остается на своем месте и никуда не сдвигается. Вне зависимости от манипуляций пользователя, фиксированная панель не меняет своего местоположения.

Делается это в несколько шагов. Нам понадобится графический редактор (лучше Adobe Photoshop, хотя вы можете использовать и другие программы, и уже готовые кнопки), также доступ по FTP к файлам вашего сайта. И еще блокнот Notepad++, чтобы редактировать код html и CSS.

1 шаг. Рисуем фиксированную панель.

Для тех, кто знаком с основными приемами работы с графическим редактором Adobe Photoshop не составит труда нарисовать панель с нужным количеством кнопок. Подробности этого рисования я описывать не буду. Это отдельная тема и лучше будет, если вы обратитесь к урокам по Adobe Photoshop, которых в сети очень много. (Мне понравился вот этот урок по созданию панели)

Я нарисовал эту панель без посторонней помощи и вот что у меня получилось.

Потом, поскольку кнопок на фиксированной панели девять, я, средствами Adobe Photoshop раскроил рисунок на девять частей и сохранил для WEB, средствами этого же приложения.

Adobe Photoshop сохраняет раскроенное изображение в папку images и называет картинки по собственному разумению. Поэтому наши кнопки надо переименовать соответственно их прямому назначению. Я назвал их

bottom.png
facebook.png
frendfeed.png
home.png
mail.png
money.png
feed.png
top.png
twitter.png

Залейте эти файлы в папку images, которая находится в папке вашей действующей темы.

Теперь, когда графика готова, можно переходить к размещению ее на сайте.

2 шаг. Вставляем фиксированную панель на страницы сайта.

Наша фиксированная панель, является панелью только для пользователя. На самом деле – это девять абсолютно самостоятельных изображений, которые будут вставлены в сайт средствами css, как фоновые изображения кликабельных боксов (div-ов)

Не пугайтесь. Все просто.

Откройте блокнот Notepad++, создайте файл fixed_panel.html. В этот файл впишите следующее, сделав необходимые изменения в ссылках и тайтлах:

<!-- Боковая нвигация(в файле header.php) -->
<p><a href="#top" id="totop" title="Быстрый переход наверх этой страницы"></a></p>
<p><a href="/" id="tohome" title="Быстрый переход на главную страницу"></a></p>
<p><noindex><a href="ССЫЛКА НА ВАШУ RSS ЛЕНТУ" id="tofeed" title="Подписка на RSS обновления" rel="nofollow" target="_blank"></a></p>
<p><noindex><a href=«http://twitter.com/ВАШ АККАУНТ В TWITTER» id="totwitter" title="Следуйте за мной в сервисе микроблогов Twitter" rel="nofollow" target="_blank"></a></p>
<p><a href="ВАША ССЫЛКА НА БЛОГРОЛЛ" id="tomoney" title="Блогролл — здесь можно выгодно купить сквозную вечную ссылку" target="_blank"></a></p>
<p><noindex><a href=«http://friendfeed.com/ВАШ АККАУНТ НА FRIENDFEED» id="tofriendfeed" title="Подписка на новости блога  через сервис FriendFeed" rel="nofollow" target="_blank"></a></p>
<p><noindex><a href=«http://www.facebook.com/?ref=home#!/profile.php?id=ВАШ id В СОЦИАЛЬНОЙ СЕТИ FACEBOOK» id="tofacebook" title="Станьте другом  во всемирно известном сервисе FaceBook" rel="nofollow" target="_blank"></a></p>
<p><a href="ССЫЛКА НА ВАШУ СТРАНИЦУ КОНТАКТОВ" id="tomail" title="Узнайте контактные данные автора блога"></a></p>
<a href="#bottom" id="tobottom" title="Быстрый переход вниз этой страницы"></a></p>
<!-- /Боковая навигация—>

В файлах вашего сайта (блога) сразу после тега <body> присоедините файл fixed_panel.html с помощью директивы include. В WordPress это делается с помощью следующего кода:

<?php include (TEMPLATEPATH . '/fixed_panel.html'); ?>

Залейте файл fixed_panel.html в ту папку, в которой хранятся все файлы вашей действующей темы.

3 шаг. Форматируем фиксированную панель с помощью CSS

Откройте файл, который отвечает за стили вашего сайта. В WordPress – это файл style.css, он находится с папке вашей действующей темы. Вставьте в любое место этого файла следующий блок кода. Не забудте внести изменения:

/*       +++++++++++++++ Боковая Навигация +++++++++++++++     */

#totop {
background : url (images/top.png) no-repeat 0% 0%;
display : block;
float : right;
height : 60px;
margin-right : 40px;
width : 50px;
position : fixed;
top : 102px;
left : 5px;
}
#tohome {
background : url (images/home.png) no-repeat 0% 0%;
display : block;
float : right;
height : 55px;
margin-right : 40px;
width : 50px;
position : fixed;
top : 162px;
left : 5px;
}
#tofeed {
background : url (images/feed.png) no-repeat 0% 0%;
display : block;
float : right;
height : 54px;
margin-right : 40px;
width : 50px;
position : fixed;
top : 217px;
left : 5px;
}
#totwitter{
background : url (images/twitter.png) no-repeat 0% 0%;
display : block;
float : right;
height : 53px;
margin-right : 40px;
width : 50px;
position : fixed;
top : 271px;
left : 5px;
}
#tomoney{
background : url (images/money.png) no-repeat 0% 0%;
display : block;
float : right;
height : 55px;
margin-right : 40px;
width : 50px;
position : fixed;
top : 324px;
left : 5px;
}
#tofriendfeed{
background : url (images/frendfeed.png) no-repeat 0% 0%;
display : block;
float : right;
height : 55px;
margin-right : 40px;
width : 50px;
position : fixed;
top : 379px;
left : 5px;
}
#tofacebook{
background : url (images/facebook.png) no-repeat 0% 0%;
display : block;
float : right;
height : 54px;
margin-right : 40px;
width : 50px;
position : fixed;
top : 434px;
left : 5px;
}
#tomail{
background : url (images/mail.png) no-repeat 0% 0%;
display : block;
float : right;
height : 54px;
margin-right : 40px;
width : 50px;
position : fixed;
top : 488px;
left : 5px;
}
#tobottom {
background : url (images/bottom.png) no-repeat 0% 0%;
display : block;
float : right;
height : 60px;
margin-right : 40px;
width : 50px;
position : fixed;
top : 542px;
left : 5px;
}

В этом коде вы видите девять правил, относящихся к каждой из девяти, созданных вами кнопок. Вам надо вставить эти девять абзацев в свой файл style.css и в каждом из них исправить следующие значения:

height : 60px; /* высота картинки */
width : 50px; /* ширина картинки */
top : 542px; /* расположение верха картинки относительно верха экрана браузера */
left : 5px; /* расположение левого края картинки относительно левой границы экрана браузера */

4 шаг. Расставляем анкоры внутренней навигации.

Осталось прописать анкоры (ссылки) вверху и внизу страницы сайта, чтобы работали кнопки “Вверх страницы” и “Вниз страницы”. Эти кнопки совершенно необходимы на блогах, потому что страницы очень длинные и крутить их вверх и вниз колесом бывает утомительно для пользователя. С помощью этих кнопок мы даем возможность нашим читателям мнгновенно перемещаться в самый верх и самый низ страницы с помощью одного нажатия на соответствующую кнопку.

Делаем это следующим образом:

Для прокрутки страницы вверх, сразу после тега <body> вставляем ссылку:

<a name="top"</a>

Для прокрутки страницы вниз, непосредственно перед тегом </body> пишем:

<a name="bottom"</a>

Если Вы все сделали правильно, то должно работать. Согласен, работа муторная и нудная, но как увеличивается юзабилити сайта! Потрудитесь и ваши посетители скажут вам “Спасибо” и наградят вас еще более частыми заходами на сайт, ставший для них таким удобным и приятным.

Резюме:

Чтобы сделать фиксированную панель, надо произвести четыре шага:

1. Нарисовать фиксированную панель и раскроить ее на отдельные кнопки.

2. Вставить фиксированную панель в страницы сайта с помощью html

3. Задать стили фиксированной панели с помощью css

4. Расставить анкоры для внутренней навигации.

Чтобы опубликовать эту запись на Twitter или в другой социальной сети, можете использовать короткую ссылку: http://www.eavasi.ru/?p=5676

  • Наблюдатель

    Попробовал...

    Естессно, ни хр... не получилось — тема расползлась и развалилась. Еле собрал назад.

    Нет, пусть это специалист мне сделает. У тебя, Жень, кстати, нет знакомого, кто бы согласился помочь?

    1. eavasi

      скинь мне свою тему с картинками панели на почту white-hat@eavasi.ru я постараюсь отдать ее в хорошие руки, чтобы тебе все сделали ))

      1. Наблюдатель

        У меня сейчас установлена Premium — знаешь, когда вся тема натстраивается из админки. Файлов там немерянно...

        Тем не менее, архив тебе скинул. Надеюсь, жду. Об оплате — приватно. Ok' ?

    1. eavasi

      Да, я только обещанную статью напишу и сразу попрошу его поковыряться.

        1. eavasi Автор записи

          Вот, привет! А меня-то ты за что благодаришь?! Ты ведь сам все делал! Хорошо, что получилось. К знакомому обращаться не пришлось. А то он без оплаты работать не любит, а брать деньги с такого человека как Председатель, никогда себе не позволит.

  • Антон

    Давно хочу себе такое сделать на сайте, но даже названия не знал,а с какой стороны к этому подходить тем более не догадывался, теперь знаю =) Спасибо за информацию после НГ сделаю =)

    С наступающим Вас НГ успехов вам! Пусть НГ станет для Вас годом исполнения ваших целей и мечтаний =)

    Во как 😉

    С уважением Антон Егоров.

    1. eavasi Автор записи

      Спасибо за поздравления, Антон!!! Тебя тоже с НГ!!! Всего тебе самого хорошего!!!!

      Я тоже пару лет назад не знал как это сделать и как это называется.

  • Антон

    Кстати на моем нетбуки не все Ваши кнопки видны, две нижние кнопки скрыты =)Экран у меня меньше =)Вы не знаете как сделать чтобы эта панель под разные экраны подогнать можно было?) на большом экране в одном месте, а на маленьком в другом?

    1. eavasi Автор записи

      Подгонять размеры можно только с помощью JavaScript, а это лишняя нагрузка на браузер пользователя.

      Я видел готовые решения, даже в виде плагинов для WordPress.

    1. eavasi Автор записи

      Да с этим не надо бороться. Просто хорошенько обдумать какое-то универсальное решение под любое разрешение монитора. Нарисовать какие-то маленькие картинки для кнопок или расположить не вертикально, а горизонтально. Может быть в два ряда или в несколько столбцов.

      Решение есть всегда.

      С Новым Годом 2011

  • маразм

    здравствуйте все вставил вроде как все работает,НО вот ссылки активны только в начале поста тоесть пролистав до конца пост ссылка на фесйбук или в твинтер уже не работают. в чес может быть ошибка

  • Web31

    За пост спасибо, помогло, но очень много ошибок в коде! Потому и разваливается верстка у других. Комментарии в html сделаны неверно, в ссылках используются только "" такие кавычки, а не 2-ва вида как у вас, тег noindex должен закрываться!

    Исправить, статья та хорошая, люди пользуются)

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

    Ваш e-mail не будет опубликован.