Всем доброго времени суток. Итак, моя первая публикация в качестве разработчика, а не дизайнера. Я представляю Вам уникальное анимационное меню, которое можно поместить с левой стороны сайта, чтобы съэкономить место. Подойдет для сайтов в минималистическом стиле. Также в архиве есть
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>
На этом все. Напоминаю, что с Вами был Веб-Герой. Если у Вас возникли вопросы, то пишите их в комментариях и мы обязательно их разрешим. Спасибо.