Скрипт такого маленького меню до сих пор является актуальным и может использоваться самыми различными способами. В случае с демо страницей, несмотря на иконки 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 |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят:
| Feedback: 0 | |