Region menu

by Ömer Serkan Aktürk

HTML

<div id="RegionDef">
                        <div id="RegionDefToggle" class="glow_black BorderRadiusTBL5" title="#{msg.shapes}">
                            <div id="RegionDefTArrow"></div>
                        </div>
                        <div id="RegionDefPanel" class="glow_black BorderRadiusTBL10">
                            <div id="RegionTreeStyle" class="RegionTreeStyle BorderRadiusTBL10">
                                <div id="RegionTreeControl" class="BorderRadiusTopLeft10">
                                   <a id="RegionTreeOO" class="LeftPos"  title="Tüm grupları kaldır"></a>
                                    <a id="RegionTreeFC" class="LeftPos"   title="Filtreleri Kaldır"></a>
                                    
                                    <em>
                                        <input id="RegionFilterSearch" name="" type="text" value="" x-webkit-speech="x-webkit-speech" onwebkitspeechchange=" " placeholder="Arama" />
                                    </em>
                                </div>
                                <div id="RegionTreeContent">
                                     boş içerik
                                </div>
                            </div>
                        </div>
                    </div>

CSS

@charset "utf-8";
/*Genel Sayfa D�zenlemeleri Ba�lang��*/
body, html {
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 100%;
}
/*Genel Sayfa D�zenlemeleri Biti�*/

/*Confirm Dialog İşlemleri Başlangıç*/
#confirmDialog,#confirmDialog .jqx-window-content{
    height: auto !important;
}
/*Confirm Dialog İşlemleri Bitiş*/

/*S�k Kullan�lan Class Fonksiyonlar� Ba�lang��*/
.BorderRadius5 {
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
}

.BorderRadius10 {
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
}

.BorderRadiusTop5 {
    border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
}

.BorderRadiusTop10 {
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
}

.BorderRadiusBottom10 {
    border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
}

.BorderRadiusBottomLeft10 {
    border-radius: 0px 0px 0px 10px;
    -moz-border-radius: 0px 0px 0px 10px;
    -webkit-border-radius: 0px 0px 0px 10px;
}
.BorderRadiusTBL5 {
    border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-radius: 5px 0px 0px 5px;
}
.BorderRadiusTBL10 {
    border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
}
.BorderRadiusTopLeft10 {
    border-radius: 10px 0px 0px 0px;
    -moz-border-radius: 10px 0px 0px 0px;
    -webkit-border-radius: 10px 0px 0px 0px;
}

.DivShadow {
    box-shadow: 2px 2px 4px #333333;
    -webkit-box-shadow: 2px 2px 4px #333333;
   ...

JavaScript

var RegionDefToggle=0;
 var baseURL="http://yeni.isvts.com";
  $("#RegionDef").show();
 $("#RegionDefToggle").bind("click", function() {
        if (RegionDefToggle == 0) {
            RegionDefToggle = 1;
            $("#RegionDef").css("right", "-240px");
            $("#RegionDefPanel").show();
            $(this).stop().animate({
                "top": 110
            }, 100);
            $(this).parent().stop().animate({
                "right": 1
            }, 100, function() {
                $("#RegionDefTArrow").css({
                    "background-image": 'url("' + baseURL + '/resources/img/RegionDef/RegionDefArrowRight.png")'
                });
                //var activeTree = getTabTreeType();
                //treeSizeGroup(activeTree);
            });
        } else {
            RegionDefToggle = 0;
            $(this).stop().animate({
                "top": 225
            }, 100);
            $(this).parent().stop().animate({
                "right": -280
            }, 100, function() {
                $("#RegionDefTArrow").css({
                    "background-image": 'url("' + baseURL + '/resources/img/RegionDef/RegionDefArrowLeft.png")'
                });
                $("#RegionDefPanel").hide();
                $("#RegionDef").css("right", "0px");
            });
        }
    });