[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: Веб-Герой  
Удобное анимационное меню
Воскресенье, 12.08.2012, 18:47 | Сообщение # 1
Сообщений:
68
108


Всем доброго времени суток. Итак, моя первая публикация в качестве разработчика, а не дизайнера. Я представляю Вам уникальное анимационное меню, которое можно поместить с левой стороны сайта, чтобы съэкономить место. Подойдет для сайтов в минималистическом стиле. Также в архиве есть PSD-файл, в котором Вы можете изменить вид и название кнопок.


По установке: сам скрипт максимально просто и удобен.

Подготовим наше css. Вставляем его либо в Вашу страницу css, либо между тегами <head> в <style>.

Code
#menu {opacity:0.7;margin-left:-137px;
-moz-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;}

#menu:hover {margin-left:0px;opacity:1;}
#navig {position:fixed; left:0px; bottom:300px;}




Далее, вставляем на страницу на которой хотим видеть меню после <body> этот код: (у меня это будет "страницы сайта")

Code

<div id="navig">
          <a href="#"><img id="menu" src="http://www.immortal-squad.ru/web-hero/img/button.png" border="0" alt="" /><p></a>

          <a  href="#"><img id="menu" src="http://www.immortal-squad.ru/web-hero/img/button1.png" border="0" alt="" /><p></a>

          <a  href="#"><img id="menu"  src="http://www.immortal-squad.ru/web-hero/img/button2.png" border="0" alt="" /><p>

          <a  href="#"><img id="menu" src="http://www.immortal-squad.ru/web-hero/img/button3.png" border="0" alt="" /><p></a>

          </div>


На этом все. Напоминаю, что с Вами был Веб-Герой. Если у Вас возникли вопросы, то пишите их в комментариях и мы обязательно их разрешим. Спасибо.
  • Страница 1 из 1
  • 1
Поиск: