<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btncollapse">
<i class="fas fa-bars"></i>
</button>
<button type="button" id="dashboardfull" class="btncollapse" onclick="openFullscreen();">
<i class="fa fa-expand" aria-hidden="true"></i>
</button>
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" id="dropdownNotificaciones" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown_noti" aria-labelledby="dropdownNotificaciones">
<div class="body_drop_notification">
<div class="row">
<div class="col-md-2">
<div class="rounded-pic">
<img src="images/man.png" alt="">
</div>
</div>
<div class="col-md-6">
<h1>Fernando Vásquez</h1>
<p>He cambiado el nombre de una plaza manualmente.</p>
</div>
<div class="col-md-4 panel_time_notification">
<a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
</div>
</div>
</div>
<div class="body_drop_notification">
<div class="row">
<div class="col-md-2">
<div class="rounded-pic">
<img src="images/man.png" alt="">
</div>
</div>
<div class="col-md-6">
<h1>Fernando Vásquez</h1>
<p>He cambiado el nombre de una plaza manualmente.</p>
</div>
<div class="col-md-4 panel_time_notification">
<a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
</div>
</div>
</div>
<div class="body_drop_notification">
<div class="row">
<div class="col-md-2">
<div class="rounded-pic">
<img src="images/man.png" alt="">
</div>
</div>
<div class="col-md-6">
<h1>Fernando Vásquez</h1>
<p>He cambiado el nombre de una plaza manualmente.</p>
</div>
<div class="col-md-4 panel_time_notification">
<a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
</div>
</div>
</div>
<div class="body_drop_notification">
<div class="row">
<div class="col-md-2">
<div class="rounded-pic">
<img src="images/man.png" alt="">
</div>
</div>
<div class="col-md-6">
<h1>Fernando Vásquez</h1>
<p>He cambiado el nombre de una plaza manualmente.</p>
</div>
<div class="col-md-4 panel_time_notification">
<a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
</div>
</div>
</div>
<div class="body_drop_notification">
<div class="row">
<div class="col-md-2">
<div class="rounded-pic">
<img src="images/man.png" alt="">
</div>
</div>
<div class="col-md-6">
<h1>Fernando Vásquez</h1>
<p>He cambiado el nombre de una plaza manualmente.</p>
</div>
<div class="col-md-4 panel_time_notification">
<a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="btn-drop" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="rounded-pic">
<img src="images/man.png" alt="">
</div>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="perfil.php">Perfil</a>
<a class="dropdown-item" href="configuraciones.php">Configuraciones</a>
<a class="dropdown-item" href="login.php">Cerrar sesión</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="header_mobile">
<div class="logo-section">
<a href="index.php"><img src="images/logo.png"></a>
</div>
<div class="column">
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger"></button>
<ul class="dl-menu">
<li>
<a href="index.php">Inicio</a>
</li>
<li>
<a href="puestos.php">Puestos</a>
</li>
<li>
<a href="contraseñas.php">Contraseñas</a>
</li>
<li>
<a href="expedientes.php">Expedientes</a>
</li>
<li>
<a href="resultados.php">Resultados</a>
</li>
<li>
<a href="contraseñas.php">Contraseñas</a>
</li>
<li>
<a href="#">Pruebas<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<ul class="dl-submenu">
<li>
<a href="#">Crear prueba</a>
</li>
<li>
<a href="#">Listado de pruebas</a>
</li>
<li>
<a href="#">Aplicar</a>
</li>
<li>
<a href="#">Respuestas</a>
</li>
<li>
<a href="#">Calificaciones</a>
</li>
</ul>
</li>
<li>
<a href="#">Configuraciones</a>
</li>
<li>
<a href="#">Historial</a>
</li>
<li>
<a href="#">Tutoriales<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<ul class="dl-submenu">
<li>
<a href="#">Manual de Uso Básico</a>
</li>
<li>
<a href="#">¿Qué evalúa cada test?</a>
</li>
<li>
<a href="#">Ayuda General</a>
</li>
</ul>
</li>
<li>
<a href="#">Asistencia Técnica<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<ul class="dl-submenu">
<li>
<a href="#">Soporte En Línea</a>
</li>
<li>
<a href="#">Soporte Por Ticket</a>
</li>
</ul>
</li>
<li>
<a href="#">Notificaciones</a>
</li>
<li>
<a href="#">Cuenta<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<ul class="dl-submenu">
<li>
<a href="#">Perfil</a>
</li>
<li>
<a href="#">Configuraciones</a>
</li>
<li>
<a href="#">Cerrar sesión</a>
</li>
</ul>
</li>
</ul>
</div><!-- /dl-menuwrapper -->
</div>
</ul>
</div>
</div>
<div class="logo-responsive">
<a href="index.php"><img src="images/logo.png"></a>
</div>
<!-- Modal ver notificaciones-->
<div class="modal fade" id="verNotificacion" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Notificaciones</h4>
</div>
<div class="modal-body">
<div class="data_notification">
<h1>Fernando Vásquez</h1>
<p>Ha publicado una plaza</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$( '#dl-menu' ).dlmenu();
});
</script>
<script>
/**
* jquery.dlmenu.js v1.0.1
* http://www.codrops.com
*
* Licensed under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
;( function( $, window, undefined ) {
'use strict';
// global
var Modernizr = window.Modernizr, $body = $( 'body' );
$.DLMenu = function( options, element ) {
this.$el = $( element );
this._init( options );
};
// the options
$.DLMenu.defaults = {
// classes for the animation effects
animationClasses : { classin : 'dl-animate-in-1', classout : 'dl-animate-out-1' },
// callback: click a link that has a sub menu
// el is the link element (li); name is the level name
onLevelClick : function( el, name ) { return false; },
// callback: click a link that does not have a sub menu
// el is the link element (li); ev is the event obj
onLinkClick : function( el, ev ) { return false; }
};
$.DLMenu.prototype = {
_init : function( options ) {
// options
this.options = $.extend( true, {}, $.DLMenu.defaults, options );
// cache some elements and initialize some variables
this._config();
var animEndEventNames = {
'WebkitAnimation' : 'webkitAnimationEnd',
'OAnimation' : 'oAnimationEnd',
'msAnimation' : 'MSAnimationEnd',
'animation' : 'animationend'
},
transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
};
// animation end event name
this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] + '.dlmenu';
// transition end event name
this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.dlmenu',
// support for css animations and css transitions
this.supportAnimations = Modernizr.cssanimations,
this.supportTransitions = Modernizr.csstransitions;
this._initEvents();
},
_config : function() {
this.open = false;
this.$trigger = this.$el.children( '.dl-trigger' );
this.$menu = this.$el.children( 'ul.dl-menu' );
this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#"><i class="fa fa-angle-left" aria-hidden="true"></i>Atrás</a></li>' );
this.$back = this.$menu.find( 'li.dl-back' );
},
_initEvents : function() {
var self = this;
this.$trigger.on( 'click.dlmenu', function() {
if( self.open ) {
self._closeMenu();
}
else {
self._openMenu();
}
return false;
} );
this.$menuitems.on( 'click.dlmenu', function( event ) {
event.stopPropagation();
var $item = $(this),
$submenu = $item.children( 'ul.dl-submenu' );
if( $submenu.length > 0 ) {
var $flyin = $submenu.clone().css( 'opacity', 0 ).insertAfter( self.$menu ),
onAnimationEndFn = function() {
self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classout ).addClass( 'dl-subview' );
$item.addClass( 'dl-subviewopen' ).parents( '.dl-subviewopen:first' ).removeClass( 'dl-subviewopen' ).addClass( 'dl-subview' );
$flyin.remove();
};
setTimeout( function() {
$flyin.addClass( self.options.animationClasses.classin );
self.$menu.addClass( self.options.animationClasses.classout );
if( self.supportAnimations ) {
self.$menu.on( self.animEndEventName, onAnimationEndFn );
}
else {
onAnimationEndFn.call();
}
self.options.onLevelClick( $item, $item.children( 'a:first' ).text() );
} );
return false;
}
else {
self.options.onLinkClick( $item, event );
}
} );
this.$back.on( 'click.dlmenu', function( event ) {
var $this = $( this ),
$submenu = $this.parents( 'ul.dl-submenu:first' ),
$item = $submenu.parent(),
$flyin = $submenu.clone().insertAfter( self.$menu );
var onAnimationEndFn = function() {
self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classin );
$flyin.remove();
};
setTimeout( function() {
$flyin.addClass( self.options.animationClasses.classout );
self.$menu.addClass( self.options.animationClasses.classin );
if( self.supportAnimations ) {
self.$menu.on( self.animEndEventName, onAnimationEndFn );
}
else {
onAnimationEndFn.call();
}
$item.removeClass( 'dl-subviewopen' );
var $subview = $this.parents( '.dl-subview:first' );
if( $subview.is( 'li' ) ) {
$subview.addClass( 'dl-subviewopen' );
}
$subview.removeClass( 'dl-subview' );
} );
return false;
} );
},
closeMenu : function() {
if( this.open ) {
this._closeMenu();
}
},
_closeMenu : function() {
var self = this,
onTransitionEndFn = function() {
self.$menu.off( self.transEndEventName );
self._resetMenu();
};
this.$menu.removeClass( 'dl-menuopen' );
this.$menu.addClass( 'dl-menu-toggle' );
this.$trigger.removeClass( 'dl-active' );
if( this.supportTransitions ) {
this.$menu.on( this.transEndEventName, onTransitionEndFn );
}
else {
onTransitionEndFn.call();
}
this.open = false;
},
openMenu : function() {
if( !this.open ) {
this._openMenu();
}
},
_openMenu : function() {
var self = this;
// clicking somewhere else makes the menu close
$body.off( 'click' ).on( 'click.dlmenu', function() {
self._closeMenu() ;
} );
this.$menu.addClass( 'dl-menuopen dl-menu-toggle' ).on( this.transEndEventName, function() {
$( this ).removeClass( 'dl-menu-toggle' );
} );
this.$trigger.addClass( 'dl-active' );
this.open = true;
},
// resets the menu to its original state (first level of options)
_resetMenu : function() {
this.$menu.removeClass( 'dl-subview' );
this.$menuitems.removeClass( 'dl-subview dl-subviewopen' );
}
};
var logError = function( message ) {
if ( window.console ) {
window.console.error( message );
}
};
$.fn.dlmenu = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'dlmenu' );
if ( !instance ) {
logError( "cannot call methods on dlmenu prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for dlmenu instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'dlmenu' );
if ( instance ) {
instance._init();
}
else {
instance = $.data( this, 'dlmenu', new $.DLMenu( options, this ) );
}
});
}
return this;
};
} )( jQuery, window );
</script>