eddydesigner/conservatorio-tomadini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

megamenu e menu mobile

Browse Source
This commit is contained in:
Amministratore
2025-01-01 19:55:19 +01:00
parent 934dd6bf52
commit bf9a138579
12 changed files with 1053 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
media/templates/site/joomla-italia-theme/css/pcrt-menu.css
View File

@ -4,7 +4,8 @@
@media (min-width: 992px){
.navbar .navbar-collapsable .navbar-nav li a.nav-link, .navbar .navbar-collapsable .navbar-nav li a.list-item {
.navbar .navbar-collapsable .navbar-nav li a.nav-link, .navbar .navbar-collapsable .navbar-nav li a.list-item,
.navbar .navbar-collapsable .navbar-nav li.nav-item ul.link-list li.nav-item >span {
font-size: .85em;
}
@ -28,67 +29,61 @@
}
.navbar .navbar-collapsable .menu-wrapper .nav-item.megamenu .dropdown-menu .col-12 .link-list-wrapper ul.link-list li a,
.navbar .navbar-collapsable .menu-wrapper .nav-item.megamenu .dropdown-menu .col-12 .link-list-wrapper ul.link-list li ul.link-list li.nav-item.deeper a,
.navbar .navbar-collapsable .menu-wrapper .nav-item .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > a {
.navbar .navbar-collapsable .menu-wrapper .nav-item .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > a,
li.nav-item .link-list-wrapper ul.link-list li.nav-item.divider > a,
.navbar .navbar-collapsable .menu-wrapper .nav-item.megamenu .dropdown-menu .col-12 .link-list-wrapper ul.link-list li span,
.navbar .navbar-collapsable .menu-wrapper .nav-item.megamenu .dropdown-menu .col-12 .link-list-wrapper ul.link-list li ul.link-list li.nav-item.deeper span,
.navbar .navbar-collapsable .menu-wrapper .nav-item .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > span,
li.nav-item .link-list-wrapper ul.link-list li.nav-item.divider > span
{
border-bottom: 1px solid #ddd;
padding: 1em 0;
padding-bottom: .3rem;
font-weight: 600;
margin-bottom: .3rem;
}
.navbar .navbar-collapsable .navbar-nav li a.list-item {
padding: 8px 24px;
padding: 5px 0;
line-height: 100%;
}
.navbar .navbar-collapsable .navbar-nav li:first-child a.list-item {
padding-top: 16px;
}
.navbar .navbar-collapsable .menu-wrapper .nav-item .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > a{
padding: 12px 24px;
.navbar .navbar-collapsable .menu-wrapper .nav-item .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > a,
li.nav-item .link-list-wrapper ul.link-list li.nav-item.divider > a,
.navbar .navbar-collapsable .menu-wrapper .nav-item .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > span,
li.nav-item .link-list-wrapper ul.link-list li.nav-item.divider > span
{
display: block;
padding-top: calc(12px - .5rem);
line-height: 100%;
text-transform: uppercase;
}
.navbar .navbar-collapsable .menu-wrapper .nav-item:first-child .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > a span{
color: #d1344c;
}
.navbar .navbar-collapsable .menu-wrapper .nav-item:nth-child(2) .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > a span{
color: #000;
}
.navbar .navbar-collapsable .menu-wrapper .nav-item:nth-child(3) .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > a span{
color: #0e865c;
}
.navbar .navbar-collapsable .menu-wrapper .nav-item:nth-child(4) .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > a span{
color: #0d00ff;
}
.it-header-center-wrapper .it-header-center-content-wrapper .it-brand-wrapper a .it-brand-tagline{
font-size: 1rem;
}
}
@media(max-width:991px){
.link-list-wrapper ul li a, .navbar .dropdown-menu .link-list-wrapper li .link-list-wrapper{
padding: 6px 0;
}
.navbar .navbar-collapsable .navbar-nav li a.nav-link,
.link-list-wrapper ul li a,
.navbar .dropdown-menu .link-list-wrapper li .link-list-wrapper{
.navbar .navbar-collapsable .navbar-nav li a.nav-link{
font-size: 1.2rem;
}
.link-list-wrapper ul li a{
font-size: 1rem;
font-weight: 500;
}
.navbar .dropdown-menu .link-list-wrapper li .link-list-wrapper, .navbar .dropdown-menu .link-list-wrapper{
margin-bottom: 0;
}
.navbar .dropdown-menu .link-list-wrapper ul li a span{
color: #455b71;
color: #000;
}
.navbar .navbar-collapsable .menu-wrapper .nav-item .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > a{
@ -138,6 +133,7 @@
.navbar .menu-wrapper li.nav-item li, .navbar .menu-wrapper li.nav-item li li {
margin: 0;
}
}
@media(min-width:550px){
@ -155,17 +151,37 @@
ul.navbar-nav li.nav-item ul.link-list{
display: flex;
flex-wrap: wrap;
min-width: 700px;
}
ul.navbar-nav li.nav-item.singola ul.link-list{
display: block;
min-width: none;
min-width: auto;
}
ul.navbar-nav li.nav-item.doppia ul.link-list li{
flex: 0 0 auto;
width: 50%;
}
ul.navbar-nav li.nav-item ul.link-list ul.link-list{
display: block;
min-width: auto;
}
ul.navbar-nav li.nav-item ul li.nav-item.divider.deeper.dropdown.parent{
ul.navbar-nav li.nav-item ul li.nav-item.divider.deeper.dropdown.parent, ul.navbar-nav li.nav-item ul li.nav-item.divider{
/*display: contents;*/
height: 100%;
background: #fff;
flex: 1 0 0%;
padding-right: calc(var(--bs-gutter-x)* .5);
padding-left: calc(var(--bs-gutter-x)* .5);
}
ul.navbar-nav li.nav-item.doppia ul li.nav-item.divider.deeper.dropdown.parent{
flex: auto;
}
ul.navbar-nav li.nav-item ul li.nav-item.divider.deeper.dropdown.parent > div{
@ -173,7 +189,7 @@ ul.navbar-nav li.nav-item ul li.nav-item.divider.deeper.dropdown.parent > div{
}
.custom-navbar-toggler svg {
fill: #455b71!important;
fill: #000!important;
}
.navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link{
@ -181,7 +197,7 @@ ul.navbar-nav li.nav-item ul li.nav-item.divider.deeper.dropdown.parent > div{
}
.navbar .navbar-collapsable .navbar-nav li a.nav-link.dropdown-toggle svg {
fill: #455b71;
fill: #000;
margin-top: 3px;
}
@ -190,41 +206,13 @@ ul.navbar-nav li.nav-item ul li.nav-item.divider.deeper.dropdown.parent > div{
color: #000;
}
.navbar .navbar-collapsable .navbar-nav li:first-child a.nav-link.dropdown-toggle svg {
fill: #d1344c;
}
.navbar .navbar-collapsable .navbar-nav li.nav-item:nth-child(2) a.nav-link{
color: #000;
}
.navbar .navbar-collapsable .navbar-nav li:nth-child(2) a.nav-link.dropdown-toggle svg {
fill: #b21dd0;
}
.navbar .navbar-collapsable .navbar-nav li.nav-item:nth-child(3) a.nav-link{
color: #000;
}
.navbar .navbar-collapsable .navbar-nav li:nth-child(3) a.nav-link.dropdown-toggle svg {
fill: #0e865c;
}
.navbar .navbar-collapsable .navbar-nav li.nav-item:nth-child(4) a.nav-link{
color: #000;
}
.navbar .navbar-collapsable .navbar-nav li:nth-child(4) a.nav-link.dropdown-toggle svg {
fill: #0d00ff;
}
.navbar .navbar-collapsable .navbar-nav.navbar-secondary li:first-child a.nav-link,
.navbar .navbar-collapsable .navbar-nav.navbar-secondary li a.nav-link{
color: #455b71!important;
color: #000!important;
}
.navbar .navbar-collapsable .navbar-nav.navbar-secondary li a.nav-link.dropdown-toggle svg {
fill: #455b71;
fill: #000;
}
.navbar .navbar-collapsable .navbar-nav.menualternativo li:first-child a.nav-link,
@ -236,7 +224,7 @@ ul.navbar-nav li.nav-item ul li.nav-item.divider.deeper.dropdown.parent > div{
.navbar .navbar-collapsable .navbar-nav.menualternativo .menu-wrapper .nav-item:nth-child(3) .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > a span,
.navbar .navbar-collapsable .navbar-nav.menualternativo .menu-wrapper .nav-item:nth-child(4) .dropdown-menu .link-list-wrapper ul.link-list li.nav-item.deeper > a span,
.navbar .navbar-collapsable .navbar-nav.menualternativo li.nav-item a.nav-link{
color: #455b71!important;
color: #000!important;
font-size: .9rem;
}
@ -250,7 +238,19 @@ display: none;
.navbar .navbar-collapsable .navbar-nav.menualternativo li:nth-child(2) a.nav-link.dropdown-toggle svg,
.navbar .navbar-collapsable .navbar-nav.menualternativo li:nth-child(3) a.nav-link.dropdown-toggle svg,
.navbar .navbar-collapsable .navbar-nav.menualternativo li:nth-child(4) a.nav-link.dropdown-toggle svg {
fill: #455b71!important;
fill: #000!important;
}
@media(max-width:991px){
ul.navbar-nav li.nav-item ul.link-list {
display: block;
min-width: unset;
}
ul.navbar-nav li.nav-item ul li.nav-item.divider.deeper.dropdown.parent > div{
display: none; /* Nascondi i sottomenu per impostazione predefinita */
}
}
.menu-laterale ul.navbar-nav li.nav-item{
@ -297,6 +297,7 @@ display: none;
.menu-laterale ul.navbar-nav li.nav-item .dropdown-menu, .menu-laterale ul.navbar-nav li.nav-item ul.link-list{
display: block;
position: relative!important;
min-width: unset!important;
}
.menu-laterale .link-list-wrapper{

37
media/templates/site/joomla-italia-theme/js/jti.js
View File

@ -97,4 +97,41 @@ $(document).ready(function() {
}
});
});
document.addEventListener('DOMContentLoaded', function () {
const linkList = document.querySelector('.link-list');
linkList.addEventListener('click', function (event) {
event.stopPropagation(); // Previene la chiusura del menu
});
});
document.addEventListener('DOMContentLoaded', function () {
// Seleziona tutte le voci di menu che devono comportarsi come toggle
const toggleItems = document.querySelectorAll('.nav-item.dropdown.parent > span');
toggleItems.forEach(item => {
item.addEventListener('click', function (event) {
// Trova il div che contiene il sottomenu
const submenu = item.nextElementSibling; // Assumendo che il div sia immediatamente dopo lo span
// Controlla se il sottomenu è visibile
if (submenu.style.display === "block") {
submenu.style.display = "none"; // Nascondi il sottomenu
} else {
submenu.style.display = "block"; // Mostra il sottomenu
}
event.stopPropagation(); // Previene la chiusura del menu principale
});
});
// Gestisci il clic su un elemento del dropdown per fermare la chiusura
const dropdownItems = document.querySelectorAll('.dropdown-item');
dropdownItems.forEach(item => {
item.addEventListener('click', function (event) {
event.stopPropagation(); // Previene la chiusura del menu
});
});
});