mobile version edited
This commit is contained in:
@@ -14,9 +14,9 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.side-menu {
|
.side-menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
|
top: 0;
|
||||||
width: 256px;
|
width: 256px;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
@@ -57,7 +57,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.menu_bar-top {
|
.menu_bar-top {
|
||||||
width: 25px;
|
width: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu_bar-mid {
|
.menu_bar-mid {
|
||||||
@@ -65,21 +65,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.menu_bar-bot {
|
.menu_bar-bot {
|
||||||
width: 25px;
|
width: 30px;
|
||||||
}
|
|
||||||
|
|
||||||
.menu-opened .menu_bar-top {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
transform-origin: 15% 15%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-opened .menu_bar-mid {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-opened .menu_bar-bot {
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
transform-origin: 15% 95%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-toggle {
|
.side-toggle {
|
||||||
@@ -99,12 +85,6 @@ header {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.saburly-footer,
|
|
||||||
.content{
|
|
||||||
margin-left: 10%;
|
|
||||||
margin-right: 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
background-color: #5763AB;
|
background-color: #5763AB;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -136,18 +116,45 @@ footer {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide side menu on large screens */
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
.side-menu {
|
.side-menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.saburly-footer,
|
||||||
|
.content {
|
||||||
|
margin-left: 10%;
|
||||||
|
margin-right: 10%;
|
||||||
|
}
|
||||||
|
.empty-menu{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.empty-menu-small{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show side menu on smaller screens */
|
|
||||||
@media (max-width: 1023px) {
|
@media (max-width: 1023px) {
|
||||||
.side-menu {
|
.side-menu {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.empty-menu{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.empty-menu-small{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.side-panel {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-menu {
|
.side-menu {
|
||||||
@@ -168,3 +175,27 @@ footer {
|
|||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.side-menu.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-opened .menu_bar-top {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
transform-origin: 15% 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-opened .menu_bar-mid {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-opened .menu_bar-bot {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
transform-origin: 15% 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-opened .side-panel {
|
||||||
|
position:absolute;
|
||||||
|
left: -256px;
|
||||||
|
}
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
{% block extra_head %}{% endblock %}
|
{% block extra_head %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="font-sans mx-auto">
|
<body class="font-sans">
|
||||||
<main class="side-panel panel">
|
<main class="side-panel panel">
|
||||||
{% include 'header.html' %}
|
{% include 'header.html' %}
|
||||||
<div class="content">
|
<div class="content">
|
||||||
@@ -30,6 +30,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{% include 'footer.html' %}
|
{% include 'footer.html' %}
|
||||||
</main>
|
</main>
|
||||||
|
{% include 'side_menu.html'%}
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
//side menu
|
//side menu
|
||||||
@@ -37,6 +38,7 @@
|
|||||||
const sideToggle = document.querySelector('.side-toggle');
|
const sideToggle = document.querySelector('.side-toggle');
|
||||||
const sideMenu = document.querySelector('.side-menu');
|
const sideMenu = document.querySelector('.side-menu');
|
||||||
const sideCloseButtons = document.querySelectorAll('.side-close');
|
const sideCloseButtons = document.querySelectorAll('.side-close');
|
||||||
|
const toggleButton = document.querySelector('.menu_icon');
|
||||||
|
|
||||||
sideToggle.addEventListener('click', function() {
|
sideToggle.addEventListener('click', function() {
|
||||||
sideMenu.classList.toggle('active');
|
sideMenu.classList.toggle('active');
|
||||||
|
|||||||
@@ -43,41 +43,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="side-menu hidden">
|
|
||||||
<ul class="m-0 p-0 mt-4 side-navigation list-reset">
|
|
||||||
<button class="text-white text-2xl m-2 opacity-50 hover:opacity-100 px-2 side-close">
|
|
||||||
</button>
|
|
||||||
<a href="/" class="side-close menu-home no-underline">
|
|
||||||
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
|
||||||
Home
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a href="/services" class="side-close menu-services no-underline">
|
|
||||||
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
|
||||||
Services
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a href="/about" class="side-close menu-about no-underline">
|
|
||||||
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
|
||||||
About Us
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a href="/contact" class="side-close menu-contact no-underline">
|
|
||||||
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
|
||||||
Request a quote
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a href="tel:7206432025" class="side-close menu-contact no-underline">
|
|
||||||
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
|
||||||
<i class="fas fa-phone mr-2 fa-flip-horizontal"></i>
|
|
||||||
720-643-2025
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
</br>
|
<div class="empty-menu">
|
||||||
</br>
|
<br />
|
||||||
</br>
|
<br />
|
||||||
</br>
|
<br />
|
||||||
|
</div>
|
||||||
|
<div class="empty-menu-small">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
|||||||
31
templates/side_menu.html
Normal file
31
templates/side_menu.html
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<div class="side-menu hidden">
|
||||||
|
<ul class="m-0 p-0 mt-4 side-navigation list-reset">
|
||||||
|
<br />
|
||||||
|
<a href="/" class="side-close menu-home no-underline">
|
||||||
|
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
||||||
|
Home
|
||||||
|
</li>
|
||||||
|
</a>
|
||||||
|
<a href="/services" class="side-close menu-services no-underline">
|
||||||
|
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
||||||
|
Services
|
||||||
|
</li>
|
||||||
|
</a>
|
||||||
|
<a href="/about" class="side-close menu-about no-underline">
|
||||||
|
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
||||||
|
About Us
|
||||||
|
</li>
|
||||||
|
</a>
|
||||||
|
<a href="/contact" class="side-close menu-contact no-underline">
|
||||||
|
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
||||||
|
Request a quote
|
||||||
|
</li>
|
||||||
|
</a>
|
||||||
|
<a href="tel:7206432025" class="side-close menu-contact no-underline">
|
||||||
|
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
||||||
|
<i class="fas fa-phone mr-2 fa-flip-horizontal"></i>
|
||||||
|
720-643-2025
|
||||||
|
</li>
|
||||||
|
</a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user