Background Image

Фиксированное меню (RSS, VK, @mail)

Script

by — Category Script on

Скрипт такого маленького меню до сих пор является актуальным и может использоваться самыми различными способами. В случае с демо страницей, несмотря на иконки RSS и ВК, меню было использовано в виде навигации для перехода по секциям. Вы же можете сделать на своё усмотрение.

Установка достаточно проста.

У нас есть изображение, которое является фоном для размещения наших ссылок. Перекрасить его или изменить форму можно в любом редакторе. Собственно так же как и сами иконки. 

И так, приступим к установке.

CSS

 .fixm-icons { background: url(//madeas.ru/images/demo/fixm-icons.png); height: 216px; width: 53px; position: fixed; top: 300px; left: 0px; } 
a.fixm-rss-ic { background: url(//madeas.ru/images/demo/fixm-icons-glow.png) no-repeat; background-position: -90px 0px; height: 56px; width: 50px; position: absolute; top: 24px; display:block; } 
a.fixm-vk-ic { background: url(//madeas.ru/images/demo/fixm-icons-glow.png) no-repeat; background-position: -90px -56px; height: 58px; width: 50px; position: absolute; top: 82px; left: 0px; display:block; } 
a.fixm-mail-ic { background: url(//madeas.ru/images/demo/fixm-icons-glow.png) no-repeat; background-position: -90px -114px; height: 48px; width: 50px; position: absolute; top: 140px; left: 0px; display:block; } 
a.fixm-rss-ic:hover {background-position: 0px 0px;} 
a.fixm-vk-ic:hover {background-position: 0px -56px;} 
a.fixm-mail-ic:hover {background-position: 0px -114px;}

HTML разметка

<div class="fixm-icons"> 
<a href="http://www.mggp.ru/news/rss" target="_blank" title="RSS подписка" class="fixm-rss-ic"></a> 
<a href="http://vk.com" target="_blank" title="VK.com" class="fixm-vk-ic"></a>
<a href="http://mail.ru" target="_blank" title="mail.ru" class="fixm-mail-ic"></a>
</div>

Ну и всё! На этом установка навигации закончена. 


View demo
Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Вертикальная фиксированная навигация на jQuery

    Вертикальная фиксированная нав...

    Эта боковая навигация даст вам возможность быст...

    View More
    1 467 23:01
    Фиксированная навигация на CSS3 и jQuery

    Фиксированная навигация на CSS...

    Фиксированная навигация, которой пользователь сможет...

    View More
    0 729 12:35
Метки: Fixed, Navigation, меню
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu