jQuery(function ($) { $(function(){ $('body').prepend('<style>\n\ .projectPages{position:fixed; z-index:5000; top:30px; left:-320px; width:320px; padding:5px 20px 5px 0; border-radius:0 5px 5px 0; font:bold 11px/1.2 Verdana; background:#3B5998; box-shadow:0 0 10px #000;}\n\ .projectPages a{display:block; padding:4px 0 4px 10px; color:#FFF; text-shadow:1px 1px 0 #283E68; text-decoration:none!important;}\n\ .projectPages a:hover{background:#4467AE;}\n\ .projectPages b{color:#F00;}\n\ .projectPages i{color:#0F0;}\n\ .projectPagesHr{margin:2px 0; border-top:1px solid #283E68;}\n\ </style>\n\ <div class="projectPages">\n\ <div><a href="index.html">Главная страница <i>Edited</i></a></div>\n\ <div><a href="login.html">Авторизация <b>New</b></a></div>\n\ <div class="projectPagesHr"></div>\n\ <div><a href="profile.html">Профиль пользователя</a></div>\n\ <div><a href="settings.html">Настройки пользователя</a></div>\n\ <div class="projectPagesHr"></div>\n\ <div><a href="news-list.html">Список новостей</a></div>\n\ <div><a href="news-item.html">Отдельная новость</a></div>\n\ <div class="projectPagesHr"></div>\n\ <div><a href="contacts.html">Контакты</a></div>\n\ <div><a href="feedback.html">Форма обратной связи</a></div>\n\ <div style="position:absolute; top:0; right:0; width:20px; height:100%; text-align:center; color:#FFF; font-size:16px; border-radius:0 5px 5px 0; background:#4467AE;">»</div>\n\ </div>'); }()) $('.projectPages').hover(function() { $('.projectPages').animate({ left: 0 }, 200, function() {}); }, function () { $('.projectPages').animate({ left: -320 }, 200, function() {}); }); });