Показать сообщение отдельно
  #4 (permalink)  
Старый 12.10.2015, 12:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Генератор панели навигации
malefikus13,
курсор вправо вверх и нажать на любой заголовок в выпавшем меню, остальное добавить по вкусу.
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Панель навигации по заголовкам в таблице - jsFiddle demo by malefikus13</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
 <style type='text/css'>
 .box-crew{height:50px;position:fixed;right:0;top:0;width:430px}
 .box-crew #slide_mnu_ul{margin:0;padding:0;position:absolute;text-align:center;top:-100px;transition-duration:0.6s;width:100%;border-radius:6px;background:#6A5ACD}
 .box-crew:hover #slide_mnu_ul{top:0}
 li{list-style:none;color:#FFF;cursor:pointer}
 .link_group_header p{height:500px;background:#FFE4B5}
 </style>
<script>
(function($) {
    $.fn.scrollTo = function(speed, easing, callback) {
        $("body,html").animate({
            scrollTop: this.offset().top
        }, speed, easing, callback);
        return this
    }
})(jQuery);
$(function() {
    var p = $(".link_group_header p");
    if (p.length) {
        var div = $("<div/>", {
            "class": "box-crew"
        }).appendTo("#object_data_body");
        var ul = $("<ul/>", {
            "id": "slide_mnu_ul"
        }).appendTo(div);
        p.each(function(index, el) {
            var li = $("<li/>", {
                text: $(el).text(),
                click: function() {
                    $(el).scrollTo(500)
                }
            }).appendTo(ul)
        })
    }
});
</script>
</head>
<body>
  <div id="object_data_body">
    <table>
        <tr class="link_group_header"><td colspan="3"><p>Заголовок 1</p></td></tr>
        <tr class="link_group_header"><td colspan="2"><p>Заголовок 2</p></td></tr>
        <tr class="link_group_header"><td colspan="2"><p>Заголовок 3</p></td></tr>
        <tr class="link_group_header"><td colspan="2"><p>Заголовок 4</p></td></tr>
    </table>
</div>

</body>

</html>
Ответить с цитированием