Всем доброе время суток.
Давайте приступим к "Установке", и начнем мы с установки "Меню - Text Effect".
Так заходим на ту страницу которую будете устанавливать и ставим код между <head> и </head>
Код
<link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
после чего идем в этой же странице и между <body> и </body> ставим следущий код:
Код
<a class="menu-icon" href="#"><i class="icon-reorder"></i></a> // вывод иконки при нажатии на которую вылазит "Меню - Text Effect"
<ul class="side-menu">
<h2 class="title">МЕНЮ САЙТА</h2>
<li class="link"><a href="#">Google</a></li>
<li class="link"><a href="#">Twitter</a></li>
<li class="link"><a href="#">Facebook</a></li>
<li class="link"><a href="#">I can</a></li>
<li class="link"><a href="#">VKontakte</a></li>
<li class="link"><a href="#">Game-PS</a></li>
</ul>
и в завершении ставим перед </body>:
Код
<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/init.js"></script>
Вот и все собственно говоря. Теперь давайте при ступим к Установке "Меню - Metro Effects", и так ставим между <head> и </head>:
Код
<link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
после чего идём в этой же странице и между <body> и </body> ставим следущий код:
Код
<a class="menu-icon" href="#"><i class="fa fa-bars"></i></a> // вывод иконки при нажатии на которую вылазит "Меню - Text Effect"
<ul class="side-menu">
<h2 class="title">МЕНЮ САЙТА</h2>
<li class="row">
<ul>
<li class="metro red half"><a href="#"><i class="fa fa-google"></i></a></li>
<li class="metro light-blue"><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
</li>
<li class="row">
<ul>
<li class="metro blue half"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="metro green half"><a href="#"><i class="fa fa-android"></i></a></li>
</ul>
</li>
<li class="row">
<ul>
<li class="metro pink half"><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li class="metro orange half"><a href="#"><i class="fa fa-github"></i></a></li>
</ul>
</li>
<li class="row">
<ul>
<li class="metro light-blue full"><a href="#"><i class="fa fa-skype"></i></a></li>
</ul>
</li>
</ul>
и в завершении ставим перед </body>:
Код
<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/init.js"></script>
Вот и все устаановлено, нет не каких проблем просто меняяем так как Вам нада и ставим туда куда Вам нада!
ДЕМО 2 ПРИМЕРОВ В АРХИВЕ 
