codigo_artabro/praiadeseselle
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Menu offcanvas bootstrap.

Browse source
This commit is contained in:
Laegnur 2023-02-22 18:57:39 +01:00
parent 2efb72b3b6
commit c76feddf1d
3 changed files with 95 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
site/templates/css/style.css
View file

@ -302,13 +302,33 @@ time span
transform: scale(0.85) translateY(-0.8rem) translateX(0.15rem); transform: scale(0.85) translateY(-0.8rem) translateX(0.15rem);
} }
.nav-link.active, .nav-item
.nav-link:hover
{ {
border-left: 0.625rem solid rgb(var(--cor_60));
}
.nav-item.active,
.nav-item:hover
{
border-left: 0.625rem solid rgb(var(--cor_30));
text-decoration-line: underline; text-decoration-line: underline;
text-decoration-style: dotted; text-decoration-style: dotted;
} }
.navbar-toggler-icon
{
color: rgba(var(--cor_10));
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.btn-close:focus
{
outline: 2px dotted rgb(var(--cor_10)) !important;
box-shadow: none;
}
.swiper .swiper
{ {
width: 100%; width: 100%;
@ -388,6 +408,26 @@ a.collapse-head.active:before
background-color: rgba(var(--cor_30), var(--bs-bg-opacity)) !important; background-color: rgba(var(--cor_30), var(--bs-bg-opacity)) !important;
} }
.border-primary
{
border-color: rgba(var(--cor_30), var(--bs-border-opacity)) !important;
}
@media (min-width: 992px)
{
.nav-item,
.nav-item.active,
.nav-item:hover
{
border-left: 0;
}
.navbar-toggler
{
display: none;
}
}
@media (min-width: 1024px) @media (min-width: 1024px)
{ {
dl dl

4
site/templates/layout/func.php
View file

@ -149,13 +149,13 @@ function renderMenu($paxinas, $clase = 'navbar-nav')
} }
$saida .= '<ul class="' . $clase . '">' . "\n"; $saida .= '<ul class="' . $clase . '">' . "\n";
$saida .= '<li class="nav-item">'; $saida .= '<li class="nav-item px-3 px-md-0 ' . (($inicio->id == $actual->id) ? ' active' : '') . '">';
$saida .= '<a class="nav-link text-uppercase link-dark px-2' . (($inicio->id == $actual->id) ? ' active" aria-current="page' : '') . '" href="' . $inicio->url . '">' . mb_strtoupper($inicio->title) . '</a>'; $saida .= '<a class="nav-link text-uppercase link-dark px-2' . (($inicio->id == $actual->id) ? ' active" aria-current="page' : '') . '" href="' . $inicio->url . '">' . mb_strtoupper($inicio->title) . '</a>';
$saida .= '</li>' . "\n"; $saida .= '</li>' . "\n";
foreach($paxinas as $paxina) foreach($paxinas as $paxina)
{ {
$saida .= '<li class="nav-item">'; $saida .= '<li class="nav-item px-3 px-md-0 ' . (($paxina->id == $actual->id) ? ' active' : '') . '">';
$saida .= '<a class="nav-link text-uppercase link-dark px-2' . (($paxina->id == $actual->id) ? ' active" aria-current="page' : '') . '" href="' . $paxina->url . '">' . mb_strtoupper($paxina->title) . '</a>'; $saida .= '<a class="nav-link text-uppercase link-dark px-2' . (($paxina->id == $actual->id) ? ' active" aria-current="page' : '') . '" href="' . $paxina->url . '">' . mb_strtoupper($paxina->title) . '</a>';
$saida .= '</li>' . "\n"; $saida .= '</li>' . "\n";
} }

29
site/templates/layout/partial/main_head.php
View file

@ -71,8 +71,12 @@ if($input->get->logout == true)
</head> </head>
<body class="d-flex flex-column h-100"> <body class="d-flex flex-column h-100">
<a href="#contido" class="visually-hidden element-focusable bypass-to-main"><?php echo _x('Skip to content', 'bypass'); ?></a> <a href="#contido" class="visually-hidden element-focusable bypass-to-main"><?php echo _x('Skip to content', 'bypass'); ?></a>
<header id="cabeceira">
<nav id="menu-usuario" class="py-2 bg-light border-bottom" aria-label="User"> <nav id="menu-usuario" class="py-2 bg-light border-bottom" aria-label="User">
<div class="container d-flex flex-row-reverse flex-wrap"> <div class="container d-flex flex-row flex-lg-row-reverse flex-wrap justify-content-between">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#menu-desplegable" aria-controls="menu-desplegable" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="nav me-lg-3"> <ul class="nav me-lg-3">
<?php if($user->isLoggedin()): ?> <?php if($user->isLoggedin()): ?>
<li class="nav-item"><a class="btn btn-outline-dark rounded-0 px-2" title="<?php echo _x('Log out', 'Log out'); ?>" href="/?logout=true"><i class='icon-user'></i></a></li> <li class="nav-item"><a class="btn btn-outline-dark rounded-0 px-2" title="<?php echo _x('Log out', 'Log out'); ?>" href="/?logout=true"><i class='icon-user'></i></a></li>
@ -83,10 +87,8 @@ if($input->get->logout == true)
</ul> </ul>
</div> </div>
</nav> </nav>
<header id="cabeceira"> <div class="container d-flex flex-wrap align-items-center justify-content-center justify-content-md-start">
<div class="container"> <a href="/" class="mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none">
<picture class="me-2"> <picture class="me-2">
<source srcset="<?php echo $config->urls->templates?>images/logo-praia-seselle-150x116.jpg" media="(max-width: 767px)"> <source srcset="<?php echo $config->urls->templates?>images/logo-praia-seselle-150x116.jpg" media="(max-width: 767px)">
<source srcset="<?php echo $config->urls->templates?>images/logo-praia-seselle-230x179.jpg" media="(min-width: 768px)"> <source srcset="<?php echo $config->urls->templates?>images/logo-praia-seselle-230x179.jpg" media="(min-width: 768px)">
@ -94,7 +96,7 @@ if($input->get->logout == true)
</picture> </picture>
<h1 class="visually-hidden"><?php echo $configuracion['sitio_nome']; ?> <?php echo $configuracion['sitio_descripcion']; ?></h1> <h1 class="visually-hidden"><?php echo $configuracion['sitio_nome']; ?> <?php echo $configuracion['sitio_descripcion']; ?></h1>
</a> </a>
<form class="col-12 col-lg-auto py-2 mb-3 mb-lg-0" action="<?php echo pages()->get('template=atopar')->url; ?>" method="get" role="search"> <form class="col-12 col-md-auto py-2 mb-3 mb-md-0" action="<?php echo pages()->get('template=atopar')->url; ?>" method="get" role="search">
<div class="input-group"> <div class="input-group">
<div class="form-floating"> <div class="form-floating">
<input type="search" id="atopar-consulta" name="q" class="form-control rounded-0 shadow-none py-1" placeholder="<?php echo _x("Atopar", "Search"); ?>&hellip;" /> <input type="search" id="atopar-consulta" name="q" class="form-control rounded-0 shadow-none py-1" placeholder="<?php echo _x("Atopar", "Search"); ?>&hellip;" />
@ -122,18 +124,19 @@ if($input->get->logout == true)
</div> </div>
</nav> </nav>
</div> </div>
</div>
<div class="border-bottom mb-3"> <div class="border-bottom mb-3">
<div class="container d-flex flex-wrap justify-content-center"> <div class="container d-flex flex-wrap justify-content-center">
<nav id="menus-principal" class="navbar navbar-expand-lg p-0" aria-label="Main navigation" data-bs-theme="dark"> <nav id="menus-principal" class="navbar navbar-expand-lg p-0" aria-label="Main navigation">
<div class="container"> <div class="container-fluid">
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#menu-desplegable" aria-controls="menu-desplegable" aria-expanded="false" aria-label="Toggle navigation"> <div id="menu-desplegable" class="offcanvas offcanvas-start justify-content-center justify-content-lg-start w-50 border-0 border-end border-3 border-primary" style="">
<span class="navbar-toggler-icon"></span> <div class="offcanvas-header">
</button> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<div id="menu-desplegable" class="navbar-collapse justify-content-center justify-content-lg-start collapse" style=""> </div>
<div class="offcanvas-body p-0">
<?php echo $menu; ?> <?php echo $menu; ?>
</div> </div>
</div> </div>
</div>
</nav> </nav>
</div> </div>
</div> </div>