Fausto
Convierta un MENÚ TREEVIEW en un MENÚ SIDEBAR
1- Crear una Aplicación Menú Tree View : preferentemente seleccione el tema Sc9_Rhino, aunque de todos modos tendremos que personalizar el tema del menú, si no le aparece ese tema entonces debes de agregarlo al proyecto, por la opción Proyectos - Propiedades - Temas.
2.- Personalizar el Tema para el Menú : SC tiene todo el CSS del menú treeView en la opción CSS de Aplicaciones (Temas), para hacer una copia del tema y poder modificarlo, presionamos sobre el enlace Guardar Como, lo colocamos en modo de proyecto y le escribimos el nombre del tema (a preferencia del desarrollador).
3.- Editar en modo Avanzado
SC mostrará todos los elementos del tema a modo de árbol, donde cada nodo representa un elemento que a la vez contienen sub-elementos, en lo adelante pego una imagen con las instrucciones de los cambios a realizar en cada elemento:
Todos los elementos que contengan la palabra "!importat" deben de quitarla.
Menú ➜ Menú TreeView
➜ Página ➜ Otros : Quitar contenido de :
· Carpeta abierta,
· carpeta cerrada
· Elemento de menú.
➜ Cabecera
Borde : Quitar contenido de:
· Ancho de Borde
· Color de borde
· Estilo de borde
· Cerrar borde
Fondo : Quitar contenido de:
· Color de Fondo
➜ Menú ➜ Item ➜ Texto : Color de Texto: #CCCED1
➜ Menú ➜ Enlace ➜ Texto : Color de Texto: #CCCED1
➜ Menú ➜ Mouseover ➜ Texto : Color de Texto: #000000
➜ Menú ➜ Mouseover ➜ Fondo : Quitar Color de fondo
➜ Menú ➜ Selección ➜ Texto : Color de Texto: #CCCED1
➜ Menú ➜ Selección ➜ Fondo : Quitar Color de fondo
➜ Menú ➜ Visitado ➜ Texto : Color de Texto: #CCCED1
➜ iFrame ➜ Fondo : Quitar Color de fondo
➜ Tabla
Borde : Quitar contenido de:
· Estilo de borde
· Ancho del borde
· Color de borde
· Cerrar de borde
Fondo : Quitar Color de fondo
Luego de cambiar estas propiedades del CSS, debemos de guardar el tema, cerrar la aplicación menú y abrirla de nuevo, eso es para poder utilizar el tema en ella.
4. Configuración Visual del Menu TreeView:
En la opción cabecera activamos mostrar cabecera y solo dejamos el título, intente que este título no sea muy largo para que quepa en el tamaño del sidebar.
5.- Pasamos a la opción de Configuración, donde nos aseguramos que los siguientes atributos tiene los valores especificados aquí:
Ancho del menú : 260
Mostrar los elementos siempre: On
Mantener ajustes: ON
Ocultar las líneas de puntos del menú: On
Utilizar expandir/cerrar: On
Barra de desplazamiento: Off
Expandir Items : Off
Seleccionar idioma: Off
Navegación
Abrir elementos en pestañas: On
Menú contextual de pestañas: On
Navegación de las pestañas del menú: On
Usar iconos predeterminados en la pestaña: On
6.- Ahora pegamos el código que controla el comportamiento del menú:
El código es un poco largo, la parte más larga es CSS y este podría ser puesto en una librería externa, no lo hice de esa forma porque eso complicaba un poco el ejemplo, de todas formas agregué un adjunto con el código por si se compromete la integridad de este en la publicación.
// onload
?>
<style>
/* valores */
:root {
--menu_ancho : 260px;
--menu_bg-color : #424C62;
/*--menu_bg-color : #4c8bf4; */
}
/* Este ancho debe de coincidir con el ancho del menu en figuración */
#css3menut {
width: var(--menu_ancho);
}
.scMenuTHeader {
width: var(--menu_ancho);
height: 37px;
}
.scMenuTHeaderFont {
text-shadow: 2px 3px #222529;
}
/* area de opciones del menu pantalla mayor que celulares*/
@media only screen and (min-width: 360px) {
body > div.ui-layout-west {
overflow: hidden;
}
table#main_menutree_table {
padding-top: 0px !important;
}
}
/* area de opciones del menu */
body > div.ui-layout-west {
width : var(--menu_ancho) !important;
background-color : var(--menu_bg-color);
overflow: hidden;
}
/* **************************************** */
/* Scroll del Árbol del Ménu 21/06/2020 */
/* **************************************** */
#css3menut {
position:absolute;
top: 102px;
overflow:auto;
/* Firefox */
height: -moz-calc(100% - 140px);
/* WebKit */
height: -webkit-calc(100% - 140px);
/* Opera */
height: -o-calc(100% - 140px);
/* Standard */
height: calc(100% - 140px)
}
#css3menut p:not(:last-child) {
margin-bottom: 1rem;
}
/* Tamaño del scroll */
#css3menut::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* Estilos barra (thumb) de scroll */
#css3menut::-webkit-scrollbar-thumb {
/*background: #ccc; */
background: #637293;
border-radius: 4px;
}
#css3menut::-webkit-scrollbar-thumb:active {
background-color: #999999;
}
#css3menut::-webkit-scrollbar-thumb:hover {
background: #b3b3b3;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
/* Estilos track de scroll */
#css3menut::-webkit-scrollbar-track {
background: #e1e1e1;
border-radius: 4px;
}
#css3menut::-webkit-scrollbar-track:hover,
#css3menut::-webkit-scrollbar-track:active {
background: #d4d4d4;
}
/* **************************************** */
/* **************************************** */
/* Caja de los iconos de las opciones principales */
div > ul > li > a > i {
background-color: #333c50 !important;
border-radius: 5px;
}
/* Espacios entre las opciones del menú principal */
div > ul > li {
padding-top: 10px !important;
}
/* Texto de las opciones del menú principal */
div > ul > li > a > span {
padding-left : 5px;
}
/* Encabezado */
body > div.ui-layout-north {
width: var(--menu_ancho) !important;
background-color : var(--menu_bg-color);
z-index:999 !important;
}
/* Area de las Pestañas */
body > div.ui-layout-center {
top : -11px !important;
height: auto !important;
}
div#css3menut {
margin-top : 0px !important;
}
/* Boton de mostrar menu */
#divbtnshowmenu {
width: 35px;
height: 26px;
top: 41px;
position: absolute;
background-color: var(--menu_bg-color);
border-radius: 0 4px 4px 0px;
left: 0;
}
.hidebtn {
left: -40px !important;
transition-delay: 0s !important;
}
#divbtnshowmenu > a {
color: white;
position: fixed;
font-size: 14px;
font-weight: 14px;
padding: 8px 4px 8px 12px
}
/* Quitar botón de mostrar menu para usar el mismo de scritorio */
a#bmenu {
display: none !important;
}
#body > div.ui-layout-north,
#divbtnshowmenu,
#id_collapse,
#id_expand,
#show-sidebar,
#close-sidebar {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#divbtnshowmenu,
#show-sidebar,
#close-sidebar {
cursor: pointer;
font-size: 20px;
}
#divbtnshowmenu,
#show-sidebar,
#close-sidebar {
color: #bdbdbd;
}
#divbtnshowmenu:hover,
#show-sidebar:hover,
#close-sidebar:hover {
color: #ffffff;
}
/*--------------------sidebar-header----------------------*/
.sidebar-header {
padding: 20px;
overflow: hidden;
color: #bbb;
border: #bbb;
border-bottom-style: solid;
border-bottom-width: thin;
border-top-style: solid;
border-top-width: thin;
}
.sidebar-header .user-pic {
float: left;
width: 60px;
padding: 2px;
border-radius: 12px;
margin-right: 15px;
overflow: hidden;
}
.sidebar-header .user-pic img {
object-fit: cover;
height: 56px;
width: 56px;
border-radius: 12px;
z-index : 999;
}
.sidebar-header .user-info {
float: left;
}
.sidebar-header .user-info > span {
display: block;
}
.sidebar-header .user-info .user-role {
font-size: 12px;
}
.sidebar-header .user-info .user-status {
font-size: 11px;
margin-top: 4px;
}
.sidebar-header .user-info .user-status i {
font-size: 8px;
margin-right: 4px;
color: #5cb85c;
}
/* Animación de los iconos menu principal*/
@-webkit-keyframes shake {
0% {-webkit-transform: rotate(-12deg);transform: rotate(-12deg);}
8% {-webkit-transform: rotate(12deg);transform: rotate(12deg);}
10% {-webkit-transform: rotate(24deg);transform: rotate(24deg);}
18% {-webkit-transform: rotate(-24deg);transform: rotate(-24deg);}
20% {-webkit-transform: rotate(-24deg);transform: rotate(-24deg);}
28% {-webkit-transform: rotate(24deg);transform: rotate(24deg);}
30% {-webkit-transform: rotate(24deg);transform: rotate(24deg);}
38% {-webkit-transform: rotate(-24deg);transform: rotate(-24deg);}
40% {-webkit-transform: rotate(-24deg);transform: rotate(-24deg);}
48% {-webkit-transform: rotate(24deg);transform: rotate(24deg);}
50% {-webkit-transform: rotate(24deg);transform: rotate(24deg);}
58% {-webkit-transform: rotate(-24deg);transform: rotate(-24deg);}
60% {-webkit-transform: rotate(-24deg);transform: rotate(-24deg);}
68% {-webkit-transform: rotate(24deg);transform: rotate(24deg);}
75% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
@keyframes shake {
0% {-webkit-transform: rotate(-12deg);-ms-transform: rotate(-12deg);transform: rotate(-12deg);}
8% {-webkit-transform: rotate(12deg);-ms-transform: rotate(12deg);transform: rotate(12deg);}
10% {-webkit-transform: rotate(24deg);-ms-transform: rotate(24deg);transform: rotate(24deg);}
18% {-webkit-transform: rotate(-24deg);-ms-transform: rotate(-24deg);transform: rotate(-24deg);}
20% {-webkit-transform: rotate(-24deg);-ms-transform: rotate(-24deg);transform: rotate(-24deg);}
28% {-webkit-transform: rotate(24deg);-ms-transform: rotate(24deg);transform: rotate(24deg);}
30% {-webkit-transform: rotate(24deg);-ms-transform: rotate(24deg);transform: rotate(24deg);}
38% {-webkit-transform: rotate(-24deg);-ms-transform: rotate(-24deg);transform: rotate(-24deg);}
40% {-webkit-transform: rotate(-24deg);-ms-transform: rotate(-24deg);transform: rotate(-24deg);}
48% {-webkit-transform: rotate(24deg);-ms-transform: rotate(24deg);transform: rotate(24deg);}
50% {-webkit-transform: rotate(24deg);-ms-transform: rotate(24deg);transform: rotate(24deg);}
58% {-webkit-transform: rotate(-24deg);-ms-transform: rotate(-24deg);transform: rotate(-24deg);}
60% {-webkit-transform: rotate(-24deg);-ms-transform: rotate(-24deg);transform: rotate(-24deg);}
68% {-webkit-transform: rotate(24deg);-ms-transform: rotate(24deg);transform: rotate(24deg);}
75% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
}
div > ul > li > i:hover + a > i,
div > ul > li > a:hover > i {
-webkit-animation: shake 1s ease;
animation: shake 1s ease ;
transform-origin-x: 90%;
transform-origin-y: 35%;
transform-origin-z: initial;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
let btnExpand = document.getElementById('id_expand');
let btnCollapse = document.getElementById('id_collapse');
btnExpand.innerHTML = '<div id="close-sidebar"> <i class="fas fa-times"></i></div>';
btnCollapse.innerHTML = '<div id="show-sidebar"> <i class="fas fa-bars"></i></div>';
// Div del Encabezado del menú
let divEnc = btnExpand.parentNode;
let divMenu = document.getElementById('main_menutree_table');
let divFotoarea = divMenu.insertAdjacentElement('beforebegin' ,document.createElement("div"));
divFotoarea.setAttribute("class", "sidebar-header");
divFotoarea.setAttribute("id", "divFotoarea");
// Acondicionar área de imagen del usuario.
divFotoarea.innerHTML = '<div class="user-pic"><img id="user_foto"'+
' src="https://raw.githubusercontent.com/azouaoui-med/pro-sidebar-template/gh-pages/src/img/user.jpg"'+
' alt="User picture"></div>'+
' <div class="user-info"> '+
' <span class="user-name">Jhon <strong>Smith</strong></span>'+
' <span class="user-role">Administrator</span>'+
' <span class="user-status"><i class="fa fa-circle"></i><span>Online</span></span>'+
' </div>';
// Agregar boton que mostrará el menú despues de ser escondido
let btnShowMenu = document.querySelector("body").appendChild(document.createElement("div"));
btnShowMenu.setAttribute("id", "divbtnshowmenu");
btnShowMenu.setAttribute("class", "hidebtn");
btnShowMenu.innerHTML = '<a href="#" onclick="collapseMenu();collapseMenu_ex();">'+
' <i class="fas fa-bars">'+
' </i></a>';
// Agregar comportamiento a los botones de mostrar y esconder menú
btnExpand.addEventListener("click", expandMenu_ex);
btnCollapse.addEventListener("click", collapseMenu_ex);
//a cada item con opciones del menú, agregar el expandmenu_ex solo para moviles
var oldonclick ='';
let opciones = document.querySelectorAll("a.scMenuTItem");
opciones.forEach(function(miOpcion) {
oldonclick = miOpcion.getAttribute("onclick")+"expandMenu_mobile();";
miOpcion.setAttribute('onclick',oldonclick)
});
//$("#divbtnshowmenu").hide();
});
// Para extender la funcionalidad del menú expandir
function expandMenu_ex() {
$("body > div.ui-layout-north.ui-layout-pane.ui-layout-pane-north").hide();
$("#divbtnshowmenu").removeClass("hidebtn");
}
// Para extender la funcionalidad del menú expandir
function collapseMenu_ex() {
$("body > div.ui-layout-north.ui-layout-pane.ui-layout-pane-north").show();
$("#divbtnshowmenu").addClass("hidebtn");
}
function expandMenu_mobile() {
if (typeof window.orientation !== 'undefined') {
$("body > div.ui-layout-north.ui-layout-pane.ui-layout-pane-north").hide();
$("#divbtnshowmenu").removeClass("hidebtn");
}
}
</script>
<?php
7.- Acuérdate de colocar muebles en la casa (Los Items del Menú):
8.- Si todo marcha bien debería verse de esta forma, y debería poder esconder el menú al presionar el botón de cerrado.
Espero que esto sea de ayuda, el uso de este menú conlleva el compromiso de publicar en este mismos hilo las mejoras que los beneficiarios de este aporte pudieren ir aplicando en su desarrollo, puesto que esta técnica viene siendo un inicio en la personalización de los menú para llevar nuestras aplicaciones a un nivel envidiable.
Miguel Angel Cortés Díaz
Fausto
code bry
Miguel Angel Cortés Díaz
He añadido esto para que funcione el scroll
En la apartado Style dentro de body > div.ui-layout-west le cambiamos overflow: auto; y despues de ese div le añadimos
Quedará un bonito scroll con barritas redondeadas.
Fausto
/* **************************************** */ /* Scroll del Árbol del Ménu */ /* **************************************** */ #css3menut { position:absolute; top: 102px; overflow:auto;
/* Firefox */ height: -moz-calc(100% - 140px); /* WebKit */ height: -webkit-calc(100% - 140px); /* Opera */ height: -o-calc(100% - 140px); /* Standard */ height: calc(100% - 140px) }
#css3menut p:not(:last-child) { margin-bottom: 1rem; }
/* Tamaño del scroll */ #css3menut::-webkit-scrollbar { width: 8px; height: 8px; }
/* Estilos barra (thumb) de scroll */ #css3menut::-webkit-scrollbar-thumb { /*background: #ccc; */ background: #637293; border-radius: 4px; }
#css3menut::-webkit-scrollbar-thumb:active { background-color: #999999; }
#css3menut::-webkit-scrollbar-thumb:hover { background: #b3b3b3; box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2); }
/* Estilos track de scroll */ #css3menut::-webkit-scrollbar-track { background: #e1e1e1; border-radius: 4px; }
#css3menut::-webkit-scrollbar-track:hover, #css3menut::-webkit-scrollbar-track:active { background: #d4d4d4; } /* **************************************** */ /* **************************************** */