<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="span12"> <div class="head"> <div class="row-fluid"> <div class="span12"> <div class="span6"> <h1 class="muted">SIGERD</h1> </div> </div> </div> </div> </div> </div> <!-- Mega Menu --> <nav class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">SIGERD <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-4"> <ul> <li class="dropdown-header">Registro</li> <li><a href="#">Inscripción de estudiantes</a></li> <li><a href="#">Matrícula de estudiantes</a></li> <li class="divider"></li> <li class="dropdown-header">Planeación Académica</li> <li><a href="#">Administración de Asignaturas</a></li> <li><a href="#">Administración de Secciones</a></li> <li><a href="#">Administración de Horario</a></li> <li><a href="#">Administración Cumplimiento de Calendario</a></li> <li><a href="#">Reporte Cumplimiento de Calendario</a></li> </ul> </li> <li class="col-sm-4"> <ul> <li class="dropdown-header">Calificaciones</li> <li><a href="#">Calificación de Notas Parciales</a></li> </ul> <ul> <li class="dropdown-header">Tareas e Inasistencias</li> <li><a href="#">Registro Inasistencia de Estudiantes</a></li> </ul> </li> <li class="col-sm-4"> <ul> <li class="dropdown-header">Infraestructura</li> <li><a href="#">Administración de Inventario</a></li> <li><a href="#">Reporte de Inventario</a></li> <li><a href="#">Administración de Tipos de Espacios</a></li> <li><a href="#">Administración de Estructura Física</a></li> <li><a href="#">Administración de Servicios de Planta Física</a></li> <li><a href="#">Administración de Planta Física</a></li> <li><a href="#">Reportes de Planta Física</a></li> </ul> <ul> <li class="dropdown-header">Toma de Decisiones</li> <li><a href="#">Seguimientos de Perfil</a></li> <li><a href="#">Indicadores de Matrícula</a></li> <li><a href="#">Indicadores de Asistencia Escolar</a></li> </ul> </li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </nav> <!-- Single button --> <div class="col-sm-4"></div> <div class="col-sm-4"> <div class="row" align="center"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Seleccionar Centro <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Centro 1</a></li> <li><a href="#">Centro 2</a></li> <li><a href="#">Centro 3</a></li> </ul> </div> </div> <div class="row" align="center"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Seleccionar Tanda <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Tanda 1</a></li> <li><a href="#">Tanda 2</a></li> <li><a href="#">Tanda 3</a></li> </ul> </div> </div> </div> <div class="col-sm-4"></div> </div>

@grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px; body{background: #eee /*url(http://subtlepatterns.com/patterns/sativa.png);*/} html,body{ position: relative; height: 100%; font-size:12px; } /*SELECT*/ .show-on-hover:hover > ul.dropdown-menu { display: block; } /*NAV MEGAMENU*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); .navbar-nav>li>.dropdown-menu { margin-top:20px; border-top-left-radius:4px; border-top-right-radius:4px; } .navbar-default .navbar-nav>li>a { width:200px; font-weight:bold; } .mega-dropdown { position: static !important; width:100%; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu:before { content: ""; border-bottom: 15px solid #fff; border-right: 17px solid transparent; border-left: 17px solid transparent; position: absolute; top: -15px; left: 285px; z-index: 10; } .mega-dropdown-menu:after { content: ""; border-bottom: 17px solid #ccc; border-right: 19px solid transparent; border-left: 19px solid transparent; position: absolute; top: -17px; left: 283px; z-index: 8; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #999; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { color: #428bca; font-size: 14px; font-weight:bold; } .mega-dropdown-menu form { margin:3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; }

//menu $(function(){ var textfield = $("input[name=user]"); $('button[type="submit"]').click(function(e) { e.preventDefault(); //little validation just to check username if (textfield.val() != "") { //$("body").scrollTo("#output"); $("#output").addClass("alert alert-success animated fadeInUp").html("Welcome back " + "<span style='text-transform:uppercase'>" + textfield.val() + "</span>"); $("#output").removeClass(' alert-danger'); $("input").css({ "height":"0", "padding":"0", "margin":"0", "opacity":"0" }); //change button text $('button[type="submit"]').html("continue") .removeClass("btn-info") .addClass("btn-default").click(function(){ $("input").css({ "height":"auto", "padding":"10px", "opacity":"1" }).val(""); }); //show avatar $(".avatar").css({ "background-image": "url('http://api.randomuser.me/0.3.2/portraits/women/35.jpg')" }); } else { //remove success mesage replaced with error message $("#output").removeClass(' alert alert-success'); $("#output").addClass("alert alert-danger animated fadeInUp").html("sorry enter a username "); } //console.log(textfield.val()); }); });