#9663 menu redesing 3
This commit is contained in:
Daniel Maya
parent
dcc5f76166
commit
1437c5a0e7
|
|
@ -77,7 +77,7 @@ echo '</ul><div class="div_border_line"><div id="tab_line_1" class="border_line"
|
|||
echo '<div id="div_display">';
|
||||
require 'operation/menu.php';
|
||||
echo '</div>';
|
||||
echo '<div id="div_management" style="display: none;">';
|
||||
echo '<div id="div_management">';
|
||||
require 'godmode/menu.php';
|
||||
echo '</div>';
|
||||
|
||||
|
|
@ -108,34 +108,45 @@ echo '</div>';
|
|||
$('#div_management').css('display', 'block');
|
||||
})
|
||||
|
||||
const id_selected = '<?php echo $menu1_selected; ?>';
|
||||
if (id_selected != '') {
|
||||
$(`ul#subicon_${id_selected}`).show();
|
||||
// Arrow.
|
||||
$(`#icon_${id_selected}`).children().first().children().last().removeClass('arrow_menu_down');
|
||||
$(`#icon_${id_selected}`).children().first().children().last().addClass('arrow_menu_up');
|
||||
// Span.
|
||||
$(`#icon_${id_selected}`).children().first().children().eq(1).addClass('span_selected');
|
||||
}
|
||||
|
||||
var click_display = "<?php echo $config['click_display']; ?>";
|
||||
|
||||
$('.title_menu_classic').click(function() {
|
||||
if (typeof(table_hover) != 'undefined') {
|
||||
$("ul#sub" + table_hover[0].id).hide();
|
||||
const table_hover = $(this).parent();
|
||||
const id = table_hover[0].id;
|
||||
const classes = $(`#${id}`).attr('class');
|
||||
|
||||
if (classes.includes('selected') === true) {
|
||||
$(`#${id}`).removeClass('selected');
|
||||
$(`ul#sub${id}`).hide();
|
||||
// Arrow.
|
||||
table_hover.children().first().children().last().removeClass('arrow_menu_up');
|
||||
table_hover.children().first().children().last().addClass('arrow_menu_down');
|
||||
// Span.
|
||||
table_hover.children().first().children().eq(1).removeClass('span_selected');
|
||||
if (table_hover[0].id == $(this).parent()[0].id) {
|
||||
table_hover = undefined;
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
$(`#${id}`).addClass('selected');
|
||||
$(`ul#sub${id}`).show();
|
||||
// Arrow.
|
||||
$(this).children().last().removeClass('arrow_menu_down');
|
||||
$(this).children().last().addClass('arrow_menu_up');
|
||||
// Span.
|
||||
$(this).children().eq(1).addClass('span_selected');
|
||||
}
|
||||
|
||||
table_hover = $(this).parent();
|
||||
handsIn = 1;
|
||||
$("ul#sub" + table_hover[0].id).show();
|
||||
// Arrow.
|
||||
$(this).children().last().removeClass('arrow_menu_down');
|
||||
$(this).children().last().addClass('arrow_menu_up');
|
||||
// Span.
|
||||
$(this).children().eq(1).addClass('span_selected');
|
||||
});
|
||||
|
||||
$('.has_submenu').click(function() {
|
||||
if (typeof(table_hover2) != 'undefined') {
|
||||
$(`#${table_hover2[0].id}`).css("background-color", "");
|
||||
$("#sub" + table_hover2[0].id).hide();
|
||||
// Arrow.
|
||||
table_hover2.children().first().children().last().removeClass('arrow_menu_up');
|
||||
|
|
@ -150,6 +161,8 @@ echo '</div>';
|
|||
|
||||
table_hover2 = $(this);
|
||||
handsIn2 = 1;
|
||||
|
||||
$(`#${table_hover2[0].id}`).css("background-color", "#eff2f2");
|
||||
$("#sub" + table_hover2[0].id).show();
|
||||
// Arrow.
|
||||
table_hover2.children().first().children().last().removeClass('arrow_menu_down');
|
||||
|
|
|
|||
|
|
@ -48,6 +48,8 @@ function menu_print_menu(&$menu)
|
|||
global $config;
|
||||
global $menuTypeClass;
|
||||
global $tab_active;
|
||||
global $menu1_selected;
|
||||
global $menu2_selected;
|
||||
static $idcounter = 0;
|
||||
|
||||
echo '<div class="menu">';
|
||||
|
|
@ -406,6 +408,7 @@ function menu_print_menu(&$menu)
|
|||
|
||||
if ($menu_selected) {
|
||||
$seleccionado = 'selected';
|
||||
$menu1_selected = $id;
|
||||
if ($menu['class'] === 'operation') {
|
||||
$tab_active = 'display';
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,42 @@
|
|||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
*/
|
||||
#div_display {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#div_management {
|
||||
display: none;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#div_display::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#div_display::-webkit-scrollbar:vertical {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#div_display::-webkit-scrollbar-button:increment,
|
||||
#div_display::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#div_display::-webkit-scrollbar-thumb {
|
||||
background-color: #6c7587;
|
||||
border-radius: 2.5px;
|
||||
opacity: 0.5;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#div_display::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.operation li,
|
||||
.godmode li {
|
||||
|
|
@ -30,8 +66,12 @@
|
|||
|
||||
.operation .menu_icon ul.submenu > li,
|
||||
.godmode .menu_icon ul.submenu > li {
|
||||
background-color: #f6f7fb;
|
||||
padding-left: 3.5em !important;
|
||||
background-color: #ffffff;
|
||||
padding-left: 24px !important;
|
||||
}
|
||||
|
||||
.menu {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
|
|
@ -46,7 +86,6 @@
|
|||
}
|
||||
|
||||
.menu li a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -59,7 +98,6 @@
|
|||
.submenu_text {
|
||||
margin-left: 0px;
|
||||
width: 100%;
|
||||
color: #161628;
|
||||
font-size: 9.4pt;
|
||||
}
|
||||
|
||||
|
|
@ -71,7 +109,8 @@
|
|||
.submenu {
|
||||
margin: 0px 0px 0px 0px;
|
||||
/* position: absolute; */
|
||||
width: 280px;
|
||||
width: 260px;
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
|
||||
.submenu2 {
|
||||
|
|
@ -84,10 +123,13 @@
|
|||
font-weight: normal;
|
||||
background-color: #f0f3f3;
|
||||
padding-left: 1.5em;
|
||||
color: #161628 !important;
|
||||
}
|
||||
|
||||
.sub_subMenu.selected {
|
||||
font-weight: 600;
|
||||
background-color: #002f33 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.submenu2 li a {
|
||||
|
|
@ -108,6 +150,10 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.has_submenu {
|
||||
color: #161628 !important;
|
||||
}
|
||||
|
||||
.menu li.submenu_not_selected a,
|
||||
.menu li.submenu2_not_selected a {
|
||||
font-weight: normal;
|
||||
|
|
@ -115,6 +161,9 @@
|
|||
|
||||
.submenu_selected {
|
||||
margin-bottom: 0px;
|
||||
background-color: #002f33 !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow: inset 4px 0 #82b92e;
|
||||
}
|
||||
|
||||
.menu .menu_icon,
|
||||
|
|
@ -123,6 +172,10 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu_icon.selected li {
|
||||
color: #1d7874 !important;
|
||||
}
|
||||
|
||||
.menu li.links {
|
||||
background-image: url(../../images/link.png);
|
||||
background-position: 4px 8px;
|
||||
|
|
@ -291,11 +344,7 @@ ul li {
|
|||
}
|
||||
|
||||
.submenu_not_selected:hover {
|
||||
background-color: #f0f3f3 !important;
|
||||
}
|
||||
|
||||
.submenu_selected:hover {
|
||||
background-color: #202020 !important;
|
||||
background-color: #eff2f2 !important;
|
||||
}
|
||||
|
||||
.sub_subMenu:hover {
|
||||
|
|
@ -551,6 +600,7 @@ ul li {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
min-height: 53px;
|
||||
}
|
||||
|
||||
.tabs_li {
|
||||
|
|
|
|||
|
|
@ -3513,7 +3513,6 @@ div.div_groups_status {
|
|||
}
|
||||
|
||||
#title_menu {
|
||||
color: #161628;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.28px;
|
||||
line-height: 24px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue