Автогенерация панели навигации

создает панель навигации. ссылаемся на заголовки на странице.

by Denis Tverdokhlebov

HTML

<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>
    </table>
</div>

CSS

.box-crew {
    height:50px;
    position:fixed;
    right:0;
    top:0;
    width:430px;
}

.box-crew #slide_mnu_ul {
    height:50px;
    margin:0;
    padding:0;
    position:absolute;
    text-align:center;
    top:-100px;
    transition-duration:0.6s;
    width:430px;
    border-radius:0 0 8px 8px;
    background:#000000;
    opacity: 0.7;
}

.box-crew:hover #slide_mnu_ul {
    top:0;
}

li {
    list-style:none;
    color:#FFF;
    cursor:pointer;
    display:inline;
    padding:10px;
}

.link_group_header p {
    height:500px;
    background:#FFE4B5;
}

JavaScript

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