Edit in JSFiddle

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() {});
    });

});