• Directory Trees With PHP And jQuery

    Directory Trees With PHP And jQuery, you have to go through the steps which are described below.

    Step 1 : First you have to create index.php file and copy code of that file from below.
    Step 2 : Now you have to create jMenu.js file and copy code of that file from below.
    Step 3 : Now you have to create jquery.color.js file and copy code of that file from below.
    Step 4 : Now you have to create style.css file and copy code of that file from below.

    Code :

    File : Example like “index.php”

    1
    2
    3
    4
    5
    6
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     
    <!-- CSS For The Menu -->
    	<link href="style.css" rel="stylesheet" />
     
    <!-- Menu Start -->
    1
    2
    3
    
    <!-- End Menu -->
     
    <!-- Add jQuery From the Google AJAX Libraries --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script><!-- jQuery Color Plugin --><script type="text/javascript" src="jquery.color.js"></script><!-- Import The jQuery Script --><script type="text/javascript" src="jMenu.js"></script>

    File : Example like “jMenu.js”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    
    $(function() {
        // hide all the sub-menus
        $("span.toggle").next().hide();
     
        // add a link nudging animation effect to each link
        $("#jQ-menu a, #jQ-menu span.toggle").hover(function() {
            $(this).stop().animate( {
                fontSize:"17px",
                paddingLeft:"10px",
                color:"black"
            }, 300);
        }, function() {
            $(this).stop().animate( {
                fontSize:"14px",
                paddingLeft:"0",
                color:"#808080"
            }, 300);
        });
     
        // set the cursor of the toggling span elements
        $("span.toggle").css("cursor", "pointer");
     
        // prepend a plus sign to signify that the sub-menus aren't expanded
        $("span.toggle").prepend("+ ");
     
        // add a click function that toggles the sub-menu when the corresponding
        // span element is clicked
        $("span.toggle").click(function() {
            $(this).next().toggle(1000);
     
            // switch the plus to a minus sign or vice-versa
            var v = $(this).html().substring( 0, 1 );
            if ( v == "+" )
                $(this).html( "-" + $(this).html().substring( 1 ) );
            else if ( v == "-" )
                $(this).html( "+" + $(this).html().substring( 1 ) );
        });
    });

    File : Example like “jquery.color.js”

    1
    2
    3
    
    //jQuery Color Animations
     
    (function(d){d.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,b){d.fx.step[b]=function(a){if(a.state==0){a.start=getColor(a.elem,b);a.end=getRGB(a.end)}a.elem.style[b]="rgb("+[Math.max(Math.min(parseInt((a.pos*(a.end[0]-a.start[0]))+a.start[0]),255),0),Math.max(Math.min(parseInt((a.pos*(a.end[1]-a.start[1]))+a.start[1]),255),0),Math.max(Math.min(parseInt((a.pos*(a.end[2]-a.start[2]))+a.start[2]),255),0)].join(",")+")"}});function getRGB(a){var b;if(a&amp;&amp;a.constructor==Array&amp;&amp;a.length==3)return a;if(b=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(a))return[parseInt(b[1]),parseInt(b[2]),parseInt(b[3])];if(b=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(a))return[parseFloat(b[1])*2.55,parseFloat(b[2])*2.55,parseFloat(b[3])*2.55];if(b=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(a))return[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16)];if(b=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(a))return[parseInt(b[1]+b[1],16),parseInt(b[2]+b[2],16),parseInt(b[3]+b[3],16)];return e[d.trim(a).toLowerCase()]}function getColor(a,b){var c;do{c=d.curCSS(a,b);if(c!=''&amp;&amp;c!='transparent'||d.nodeName(a,"body"))break;b="backgroundColor"}while(a=a.parentNode);return getRGB(c)};var e={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})(jQuery);

    File : Example like “style.css”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    body {
        font-family: "Trebuchet MS", Helvetica, Sans-Serif;
        font-size: 14px;
    }
     
    #jQ-menu ul {
        list-style-type: none;
    }
     
    #jQ-menu a, #jQ-menu li {
        color: gray;
        text-decoration: none;
        padding-bottom: 3px;
    }
     
    #jQ-menu ul {
        padding-left: 15px;
    }
    Tags:

Comments on this post

Leave a Reply

  • Security Code :


    four − = 2