Scribd
Cargar
3 vistas9 páginas

Menú de Navegación del Sistema

El documento presenta un menú de navegación para un sistema de gestión, que incluye secciones como 'Inicio', 'Sistema', 'Clientes', 'Facturación', 'Almacen', 'Soporte', y 'SMS'. Cada sección tiene submenús con enlaces a diferentes funcionalidades relacionadas, como gestión de usuarios, monitoreo, y reportes. Además, el diseño incluye estilos CSS para mejorar la presentación y la usabilidad del menú.

Cargado por

ccuenin777
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
3 vistas9 páginas

Menú de Navegación del Sistema

El documento presenta un menú de navegación para un sistema de gestión, que incluye secciones como 'Inicio', 'Sistema', 'Clientes', 'Facturación', 'Almacen', 'Soporte', y 'SMS'. Cada sección tiene submenús con enlaces a diferentes funcionalidades relacionadas, como gestión de usuarios, monitoreo, y reportes. Además, el diseño incluye estilos CSS para mejorar la presentación y la usabilidad del menú.

Cargado por

ccuenin777
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

<ul class="sidebar-menu_ accordion-menu">

<!--ul class="accordion-menu">
<li>
<div class="dropdownlink"><i class="fa fa-road" aria-
hidden="true"></i> History
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">History 1</a></li>
<li><a href="#">History 2</a></li>
<li><a href="#">History 3</a></li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-paper-plane"
aria-hidden="true"></i> Fiction
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">Fiction 1</a></li>
<li><a href="#">Fiction 2</a></li>
<li><a href="#">Fiction 3</a></li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-quote-left"
aria-hidden="true"></i> Fantasy
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">Fantasy 1</a></li>
<li><a href="#">Fantasy 2</a></li>
<li><a href="#">Fantasy 3</a></li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-motorcycle"
aria-hidden="true"></i> Action
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</li>
</ul-->

<li class="tactive">
<a href="[Link]" class="ajaxurl"
style="padding:0;"><div class="dropdownlink"><i class="fa fa-
dashboard" aria-hidden="true"></i> Inicio</div></a>
</li>
<li class="treeview">
<div class="dropdownlink"><i class="fa fa-briefcase"
aria-hidden="true"></i> Sistema
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<!--a href="[Link]
<i class="fa fa-briefcase"></i>
<span data-idioma="MENU:sistema">Sistema</span>
<i class="fa fa-angle-left pull-right"></i>
</a-->
<ul class="treeview-menu_ menu-open_ submenuItems">
<li><a
href="[Link] id="linktemporal"
class="ajaxurl" style="display:none">tmp</a></li>
<li><a
href="[Link]
class="ajaxurl"><i class="fa fa-sitemap"></i> <span data-
idioma="SUBMENU:router">Routers Mikrotik</span></a></li>
<li><a
href="[Link]
class="ajaxurl"><i class="fa fa-bars"></i> <span data-
idioma="SUBMENU:planes">Planes Internet</span></a></li>
<li><a
href="[Link]
class="ajaxurl"><i class="fa fa-phone"></i> Planes Voip</a></li>
<li><a
href="[Link]
class="ajaxurl"><i class="fa fa-signal"></i> <span data-
idioma="SUBMENU:monitoreo">Monitoreo &amp; Emisores</span></a></li>
<li><a
href="[Link]
class="ajaxurl"><i class="fa fa-users"></i> <span data-
idioma="SUBMENU:personal">Gestión de personal</span></a></li>
</ul>
</li>

<li class="treeview_">
<div class="dropdownlink"><i class="fa fa-user" aria-
hidden="true"></i> Clientes
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<!--a href="[Link] class="fa
fa-user"></i> <span data-idioma="MENU:clientes">Clientes</span> <i
class="fa fa-angle-left pull-right"></i></a-->
<ul class="treeview-menu_ submenuItems">
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-user-plus"></i> <span data-
idioma="SUBMENU:usuarios">Usuarios</span></a></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-street-view"></i> <span data-
idioma="SUBMENU:mapa">Mapa Clientes</span></a></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-calendar"></i> <span data-
idioma="SUBMENU:instalaciones">Instalaciones</span></a></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-commenting-o"></i> <span data-
idioma="SUBMENU:anuncios">Anuncios</span></a></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-bar-chart"></i> <span data-
idioma="SUBMENU:trafico">Tráfico</span></a></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-comments-o"></i> Mensajes Chat <span
class="pull-right-container">

</span></a></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-envelope-o"></i> <span data-
idioma="SUBMENU:correos">Correos</span></a></li>
</ul>
</li>

<li class="treeview_">
<div class="dropdownlink"><i class="fa fa-usd" aria-
hidden="true"></i>Facturación<i class="fa fa-chevron-down" aria-
hidden="true"></i></div>
<!--a href="[Link] class="fa
fa-usd"></i> <span data-idioma="MENU:facturacion">Facturación</span>
<i class="fa fa-angle-left pull-right"></i></a-->
<ul class="treeview-menu_ submenuItems">
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-credit-card"></i> <span data-
idioma="SUBMENU:pagos">Registrar pagos</span></a></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-file-pdf-o"></i> <span data-
idioma="SUBMENU:facturas">Facturas</span></a></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-bar-chart"></i> <span data-
idioma="SUBMENU:estadistica">Estadísticas</span></a></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-university"></i> <span data-
idioma="SUBMENU:transacciones">Transacciones</span></a></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-sign-out"></i> <span data-
idioma="SUBMENU:ingresos">Ingresos &amp; Egresos</span></a></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-envelope-o"></i> <span data-
idioma="SUBMENU:reporte">Reporte de Pago</span></a></li>
</ul>
</li>

<li><a href="[Link]" class="ajaxurl" style="padding:0;"><div


class="dropdownlink"><i class="fa fa-dashboard" aria-
hidden="true"></i> Almacen</div></a>
<!--a href="[Link]
class="ajaxurl"><div class="dropdownlink"><i class="fa fa-cubes"
aria-hidden="true"></i>Almacen</a></div--></li>
<li><a href="[Link]" class="ajaxurl" style="padding:0;"><div
class="dropdownlink"><i class="fa fa-ticket"></i>
Soporte</div></a></li>
<li><a href="[Link]" class="ajaxurl" style="padding:0;"><div
class="dropdownlink"><i class="fa fa-whatsapp"></i>
SMS</div></a></li>

<li class="treeview_">
<div class="dropdownlink">
<!--a href="[Link]
>
<i class="fa fa-cogs"></i> Ajustes
<i class="fa fa-chevron-down"></i></div>
</a>
<ul class="treeview-menu_">
<li><a
href="[Link]
general" class="ajaxurl"><i class="fa fa-cog"></i><span data-
idioma="SUBMENU:general">General</span></a></li>
<li><a
href="[Link]
class="ajaxurl"><i class="fa fa-envelope-o"></i><span data-
idioma="SUBMENU:servermail">Servidor Correo</span></a></li>
<li><a
href="[Link]
facturacion" class="ajaxurl"><i class="fa fa-file-text-o"></i><span
data-idioma="SUBMENU:facturacion">Facturación</span></a></li>
<li><a
href="[Link]
formapago" class="ajaxurl"><i class="fa fa-money"></i><span data-
idioma="SUBMENU:formapago">Formas de pago</span></a></li>
<li><a
href="[Link]
formatos" class="ajaxurl"><i class="fa fa-pencil-square-o"></i><span
data-idioma="SUBMENU:formatos">Editor de plantillas</span></a></li>
<li><a href="[Link]
portalcliente" class="ajaxurl"><i class="fa fa-male"></i><span data-
idioma="SUBMENU:areacliente">Portal cliente</span></a></li>
<li><a href="[Link]
usuarios" class="ajaxurl"><i class="fa fa-users"></i><span data-
idioma="SUBMENU:defaultuser">Usuarios</span></a></li>

<li><a
href="[Link]
class="ajaxurl"><i class="fa fa-globe"></i><span data-
idioma="SUBMENU:zonas">Zonas</span></a></li>

<li><a href="[Link]
sms" class="ajaxurl"><i class="fa fa-comments-o"></i><span data-
idioma="SUBMENU:smsconfig">SMS</span></a></li>
<li><a href="[Link]
cloud" class="ajaxurl"><i class="fa fa-cloud"></i><span data-
idioma="SUBMENU:cloudconfig">Cloud</span></a></li>
<li></li>
<li></li>
<li><a href="[Link]
class="ajaxurl"><i class="fa fa-wrench"></i> <span data-
idioma="SUBMENU:utilidades">Utilidades</span></a></li>
<li><a href="[Link]
licencia" class="ajaxurl"><i class="fa fa-info-circle"></i>
Licencia</a></li>
</ul>
</li>
<li>
<div class="clock" style="text-align: center;">
<div class="datemk" style="text-align: center;">Miércoles 27
Septiembre 2017</div>
<div class="pptime hoursmk">22</div>
<div class="pptime pointmk">:</div>
<div class="pptime minmk">58</div>
<div class="pptime pointmk">:</div>
<div class="pptime secmk">13</div>
</div>
</li>
</ul>
.accordion-menu {
width: 100%;
max-width: 450px;
margin: 60px auto 20px;
background: #fff;
/* border-radius: 4px;*/
}

.accordion-menu [Link] .dropdownlink {


color: #cddc39;
}

.accordion-menu [Link] .dropdownlink .fa-chevron-down {


transform: rotate(180deg);
}

.accordion-menu li:last-child .dropdownlink {


border-bottom: 0;
}

.dropdownlink {
cursor: pointer;
display: block;
padding: 5px 5px 5px 45px;
font-size: 18px;
border-bottom: 1px solid #ccc;
color: #212121;
position: relative;
transition: all 0.4s ease-out;

color: #fdfdfd;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51
100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1),


0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px
1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px
0px 0px rgba(0,0,0, .1);

.dropdownlink i {
position: absolute;
top: 17px;
left: 16px;
}

.dropdownlink .fa-chevron-down {
right: 12px;
left: auto;
}

.submenuItems {
display: none;
background: #cbe6c9;
}

.submenuItems li {
border-bottom: 1px solid #86b686;
}

.submenuItems a {
display: block;
color: #727272;
padding: 12px 12px 12px 45px;
transition: all 0.4s ease-out;
}

.submenuItems a:hover {
background: #cddc39;
color: #fff;
}

También podría gustarte