Gecko [ www.utparral.edu.mx ]

Name	Size	Permission
img	[ DIR ]	drwxrwxr-x
.1644686979	0 B	-rwxrwxr-x
201907290815.jpg	98.67 KB	-rwxrwxr-x
201907291011.jpg	103.42 KB	-rwxrwxr-x
201907291535.jpg	76.7 KB	-rwxrwxr-x
conectar.php	766 B	-rwxrwxr-x
FileUpload.php	451 B	-rwxrwxr-x
index.php	3.97 KB	-rwxrwxr-x
menu.html	11.77 KB	-rwxrwxr-x
pagina2.php	521 B	-rwxrwxr-x
universitarios.jpg	3.23 MB	-rwxrwxr-x
vida.jpeg	168.04 KB	-rwxrwxr-x
vinculacion2.jpg	1.36 MB	-rwxrwxr-x
vinculacion.jpg	196.88 KB	-rwxrwxr-x

Code Editor : menu.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">

.menu-item1 {
            width: 60px;
            height: 60px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            color: white;
            text-align: center;
            line-height: 70px;
            top: 0%;
            bottom: 0;
            left: 0;
            z-index: 19;
            transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);

}

.menu-item2 {
            width: 60px;
            height: 60px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            color: white;
            text-align: center;
            line-height: 70px;
            top: 0;
            bottom: 0;
            left: 0px;
            z-index: 19;
            transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s;
        }

.menu-item3 {
            width: 60px;
            height: 60px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            color: white;
            text-align: center;
            line-height: 70px;
            top: 0%;
            bottom: 0;
            left: 0px;
            transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;
        }

.menu-item4 {
            width: 60px;
            height: 60px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            color: white;
            text-align: center;
            line-height: 70px;
            top: 0;
            bottom: 0;
            left: 0px;
            transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;
        }

.menu-item5 {
            width: 60px;
            height: 60px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            color: white;
            text-align: center;
            line-height: 70px;
            top: 0;
            bottom: 0;
            left: 0px;
            transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .8s;
        }

.menu-item6 {
            width: 60px;
            height: 60px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            color: white;
            text-align: center;
            line-height: 70px;
            top: 0;
            bottom: 0;
            left: 0px;
            transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) 1s;
        }

.menu-item6 i img {
            position: relative;
            width: 100%;
            height: auto;

}

.menu-item7 {
            width: 60px;
            height: 60px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            color: white;
            text-align: center;
            line-height: 70px;
            top: 0;
            bottom: 0;
            left: 0px;
            transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) 1s;
        }

.menu-item7 i img {
            position: relative;
            width: 100%;
            height: auto;

}

.mask2 {
            bottom: 0px;
            left: 10px;
            width: 70px;
            height: 70px;
            background-color: LightSeaGreen;
            border-radius: 50%;
            position: absolute;
            z-index: 2145555555555555555555555;
            color: white;
            text-align: center;
            line-height: 120px;
            cursor: pointer;
            position: fixed;
            display: flex;
            align-items: center;
            align-content: flex-start;
        }

.tablet_boton {
            bottom: 62px;
            left: 20px;
            width: 70px;
            height: 70px;
/*            background-color: lightblue;*/
            border-radius: 50%;
            position: absolute;
            z-index: 21455555555555555555555855;
            color: white;
            text-align: center;
            line-height: 120px;
            cursor: pointer;
            position: fixed;
            display: flex;
            align-items: center;
            align-content: flex-start;
        }

.tablet_boton img {
            height: 50px;
        }

/*
        
        
****/
        
        
        
             .inscripcion_boton {
            bottom: 160px;
            left: 20px;
            width: 70px;
            height: 70px;
/*            background-color: lightblue;*/
            border-radius: 50%;
            position: absolute;
            z-index: 21455555555555555555555855;
            color: white;
            text-align: center;
            line-height: 120px;
            cursor: pointer;
            position: fixed;
            display: flex;
            align-items: center;
            align-content: flex-start;
        }

.inscripcion_boton img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            box-shadow: 1px 1px 2px 2px;
            
        }

.mask2 i {
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>

</head>

</div>

var active1 = false;
            var active2 = false;
            var active3 = false;
            var active4 = false;
            var active5 = false;
            var active6 = false;
            var active7 = false;

$('.radial-menu').on('mousedown', function() {

//                    $(".mask").toggleClass("fa-pulse");

if (!active1) $(this).find('.menu-item1').css({
                    'background-color': '#30608E',
                    'transform': 'translate(0px,-125px)'
                });
                else $(this).find('.menu-item1').css({
                    'background-color': '#30608E',
                    'transform': 'none'
                });

if (!active2) $(this).find('.menu-item2').css({
                    'background-color': '#9AB247',
                    'transform': 'translate(60px,-105px)'
                });
                else $(this).find('.menu-item2').css({
                    'background-color': '#9AB247',
                    'transform': 'none'
                });

if (!active3) $(this).find('.menu-item3').css({
                    'background-color': '#704C2B',
                    'transform': 'translate(105px,-60px)'
                });
                else $(this).find('.menu-item3').css({
                    'background-color': '#704C2B',
                    'transform': 'none'
                });

if (!active4) $(this).find('.menu-item4').css({
                    'background-color': '#E38502',
                    'transform': 'translate(125px,0px)'
                });
                else $(this).find('.menu-item4').css({
                    'background-color': '#E38502',
                    'transform': 'none'
                });

if (!active5) $(this).find('.menu-item5').css({
                    'background-color': '#C13D02',
                    'transform': 'translate(190px,0px)'
                });
                else $(this).find('.menu-item5').css({
                    'background-color': '#C13D02',
                    'transform': 'none'
                });

if (!active6) $(this).find('.menu-item6').css({
                    'background-color': '#30608E',
                    'transform': 'translate(170px,-60px)'
                });

else $(this).find('.menu-item6').css({
                    'background-color': '#7E5CAB',
                    'transform': 'none'
                });

if (!active7) $(this).find('.menu-item7').css({
                    'background-color': 'lightgray',
                    'transform': 'translate(132px,-115px)'
                });

else $(this).find('.menu-item7').css({
                    'background-color': 'lightgray',
                    'transform': 'none'
                });

active1 = !active1;
                active2 = !active2;
                active3 = !active3;
                active4 = !active4;
                active5 = !active5;
                active6 = !active6;
                active7 = !active7;

});
        });
    </script>
<script>
    function mostrar(){
$(".pantalla").show();        
$(".pantalla").css("left", "0px");
    }
</script>
</body></html>

${this.title}

Code Editor : menu.html