jquery fnavi (navix)

education purpose

by Anov Siradj

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="avz-fnavi">
    Hello World !<br/>
    Halo Dunia !
</div>

<br/>

<div id="sub-body">
    <div class="avz-fnavi">a<br/>b<br/>c<br/>d<br/>e</div>
    <p>Another Hello World !</p>
</div>

CSS

#sub-body {
    background:yellow;
    position:relative;
    width:400px;
    height:500px;
}
.avz-fnavi {
position: absolute;
background: #669900;
color: #222;
display: none;
width: 100%;
margin: 0px;
top: 0px;
left: 0px;
right: 0px;
border-bottom: 10px solid #222;
}
.avz-fnavi-ceil {
    z-index:+999;
}
.avz-fnavi-content {
    display:none;
    position:relative;
    color:#222;
}

.avz-fnavi-hadle {
padding: 5px 10px;
display: inline-block;
position: absolute;
right: 15px;
bottom: -30px;
background-color: #222;
font-size: 13px;
font-weight: bold;
font-family:monospace;
cursor: pointer;
color: #ddd;
}

JavaScript

//refference
//http://jsfiddle.net/kMudG/
$.avzFnavi = function() {
    $(".avz-fnavi").each(function(){
        var _c = $(this).html();
        $(this).html("<div class=\"avz-fnavi-content\">"+_c+"</div>");
        $(this).append("<div class=\"avz-fnavi-hadle\">+</div>");
        var _pt = $(this).parent().css("padding-top");
        _pt = _pt.match(/^[0-9]+/);
        _pt = Number(_pt)+10;
        $(this).parent().css({
            "padding-top":_pt+"px"
        });
    }).show();
    $(".avz-fnavi-hadle").on("click",function(){
        if($(this).parent().children(".avz-fnavi-content").css("display") === "none") {
            $(this).parent().children(".avz-fnavi-content").slideDown({
                start:function() {
                    $(this).parent().addClass("avz-fnavi-ceil");
                }
            });
        } else {
            $(this).parent().children(".avz-fnavi-content").slideUp({
                done:function() {
                    $(this).parent().removeClass("avz-fnavi-ceil");
                }
            });
        }
    });
}
$.avzFnavi();