I want to hide drop down menu and sidebar when you click outside each "divs". I added #media rule and also have a button for each div the will show and hide each divs. I used javascript to hide and show the two divs. The problem now is when the resolution of the browser has a min-height of 992px the sidebar will hide when I click a slide toggle button the sidebar will show. I want to know how can I show and hide the divs.
HTML Code:
<div class="t-page-sidebar">
<div class="t-sidebar">
<a class="t-sidebar-brand" href="dashboard.php">
<img class="t-sidebar-brand-img" src="stylesheet/images/logo_2.png" alt="logo">
Dashboard
</a>
<h4 class="t-sidebar-title">Navigation</h4>
<ul class="t-sidebar-list">
<li class="t-sidebar-item">
<a class="t-sidebar-link is-active" href="dashboard.php">
<i class="fa fa-home"></i>
Dashboard
</a>
</li>
<li class="t-sidebar-item">
<a class="t-sidebar-link" href="store-locator.php">
<i class="fa fa-map"></i>
Store Locator
</a>
</li>
<li class="t-sidebar-item">
<a class="t-sidebar-link" href="distance-matrix.php">
<i class="fa fa-exchange"></i>
Distance Matrix
</a>
</li>
<li class="t-sidebar-item">
<a class="t-sidebar-link" href="gallery.php">
<i class="fa fa-camera-retro"></i>
Gallery
</a>
</li>
</ul>
</div>
</div>
<!-- MAIN BODY -->
<main class="t-page-content">
<!-- HEADER -->
<header class="t-navbar">
<!-- TOGGLE BUTTON -->
<button class="t-sidebar-toggle" id="sidebar-toggle">
<span class="t-sidebar-bar"></span>
<span class="t-sidebar-bar"></span>
<span class="t-sidebar-bar"></span>
</button>
<!-- HEADER CONTENT -->
<h2 class="t-navbar-title">Dashboard</h2>
<div class="t-dropdown">
<div class="t-avatar">
<img class="t-avatar-img" src="stylesheet/images/default_pic.png" alt="User's Profile Image" />
</div>
<div class="t-dropdown-menu">
<a class="t-dropdown-item" href="account-settings.php">Account Settings</a>
<a class="t-dropdown-item" href="logout.php?logout">Logout</a>
</div>
</div>
</header>
</main>
CSS Code:
.t-page-sidebar {
position: fixed;
top: 0;
bottom: 0;
width: 250px;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s,-webkit-transform .2s;
z-index: 300;
margin-left: -250px;
transition: all .2s ease-in-out;
}
#media all and (min-width: 992px){
.container {
max-width: 960px;
}
.t-page-sidebar {
margin-left: 0;
}
.t-page-content {
margin-left: 250px;
}
.t-sidebar-toggle {
display: none;
}
}
Javascript Code:
$(document).ready(function() {
$(".t-dropdown").click(function() {
$(".t-dropdown-menu").toggleClass("show");
});
$(document).on("click", ".t-sidebar-toggle", function(event){
$(".t-page-sidebar").css("margin-left","0");
});
});
On click of dashboard link, you can use toggleClass jQuery to append new class name and set the display property in CSS for the same.
Lawrence Agulto as Paurnima Partole said, you can use the toggleClass jQuery to resolve the problem.
$(".t-page-sidebar").toggleClass("open-menu");
Since the button is covered by the menu, I suggest you add in menu container another button to close the menu.
See if this resolve the problem - https://codepen.io/beduardo/pen/pLPmWO
Related
Here is my current CSS-only dropdown menu html:
<div class="main-nav">
<div class="main-nav-container">
<div class="nav-links">
<ul>
<li class="nav-link"><a>Nav Link</a>
<div class="dropdown">
<ul class="dropdown-list-type">
<li>
<ul>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="nav-link"><a>Nav Link</a>
<div class="dropdown">
<ul class="dropdown-list-type">
<li>
<ul>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
Relevant CSS:
.dropdown{
position: absolute;
display: flex;
top: 100%;
border-top: solid 1px var(--white-3);
left: 0;
z-index: 8;
opacity: 0;
pointer-events: none;
transition: .3s; }
.nav-link:hover > .dropdown,
.dropdown-link:hover > .dropdown{
transform: translate(0, 0);
opacity: 1;
pointer-events: auto;
}
On mobile, I want the user to be able to open and close the dropdown by tapping on the "Nav Link". Currently, the user can tap to open, but then has to tap somewhere else to close the dropdown. I figure I need Javascript make it do what I want.
My idea:
Use a media query to remove the hover function on mobile
Use Javascript to add a class to the "Nav Links" on mobile
Using this class, with JS, make the Nav Links toggle the dropdown to display/hide
Is this the best way to do it? If so, how do I add a class to the "Nav Links" with Javascript at a specific screen size?
I would like to just use plain Javascript, no Jquery.
Also, I current want to keep the CSS-only hover approach for desktop. So I want the Javascript function only for the mobile view.
I hope that makes sense to everyone. Thank you!
I'm working on this website - https://sampledemos.online/training/dashboard.html in which the toggle menu is hiding the content when menu expands.
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme active">
<div class="app-brand demo">
<a href="index.html" class="app-brand-link">
<img class="logo" src="/training/images/weblogo.jpg">
</a>
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
<i class="bx bx-chevron-left bx-sm align-middle" onclick="openNav()"></i>
</a>
</div>
<div class="menu-inner-shadow"></div>
<ul class="menu-inner py-1">
<!-- Dashboard -->
<li class="menu-item active">
<a href="course-master-list.html" class="menu-link">
<i class="menu-icon tf-icons bx bxs-book-reader" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Course Master"></i>
<div data-i18n="course">Course Master</div>
</a>
</li>
and am using javascript as below
<script>
function openNav() {
$(document).ready(function () {
$('#layout-menu').toggleClass('active');
});
}
</script>
Below I have used styles like this...
#layout-menu.active {
width: 64px;
}
.active~.layout-page {
padding-left: 65px !important;
}
.app-brand .layout-menu-toggle {
position: absolute;
left: 15rem;
border-radius: 50%;
}
.active .layout-menu-toggle {
left: 4rem;
}
```
Is there I missed anything in my codings...
If I understand your question correctly then what's happening is that your plugin 'perfect scrollbar' is setting adding the class 'ps' to <ul class="menu-inner py-1 ps"> which adds overflow: hidden !important. That means everything that falls outside that menu-inner container is hidden. If you check your element inspector and remove the overflow: hidden you'll see your toggle menu becomes visible.
I have an element which drops down when I toggle my menu bars.
I can make the element as large or as small as I like but can't make it fit to screen so it doesn't scroll and no page shows underneath. It's a WordPress site and I started off with an an i class fa-bars. It wasn't possible to animate font awesome so I replaced it with this.
<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
<a id="mobile-nav" href="#">
<div class="container1"
onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a>
<script>
function myFunction(x) {
x.classList.toggle('change');
}
</script>
</div>
This worked to toggle the menu amd make it drop but it didn't cover the screen. The element controlling the dropdown area was too small so I enlarged it by increasing height, like so:
#media (max-width: 768px) {
.collapse {
position: absolute;
height: 775px;
background-color: white;
z-index: 99999 !important;
top: 75px;
left: -50px;
line-height: 10px;
}
}
This made it too high but making it any lower would show the page underneath.
Is there a way I can modify my existing javascript or css to make it fit to screen exactly, responsively with no scroll and no page showing underneath?
It's located in my header.php so it would go there I'm assuming, if there's a way to modify what i already have. If not, what's a good way to approach this?
here on mobile
Html dropdown.
<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-15050"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown">
<a title="Contact" href="url">Contact
<ul role="menu" class="dropdow n-menu">
</ul>
</a>
</li>
</ul>
</div>
</div>
</div>
I've tried applying min-height to element collapse max- height and 100% None worked.
Here's a pen https://codepen.io/adsler/pen/bGVXNVM
You can used position: fixed to size the element with respect to the frame:
.your-selector {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This will make it take up the entire window. It's not clear if you're wanting it to cover the window in all dimensions, but you can choose where the top/bottom/left/right anchor selectively.
If you're also wanting to make the body (or if it's not the body some other scrollable element) non-scrollable, set the overflow style to hidden.
I have a function like so which toggles my dropdown menu.
<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
<a id="mobile-nav" href="#">
<div class="container1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>.
</div>
</a>
</div>
<script>
function myFunction(x) {
x.classList.toggle('change');
document.body.style.overflow ='hidden'
}
</script>
The last part of it
document.body.style.overflow = 'hidden'
Keeps the page from overflowing at the top when the dropdown menu is open. The problem is that when I click on my menu bars, whilst the overflow disappears, clicking on the bars again reveals the page but locks it due to the overflow being hidden.
I'd like to undo
document.body.style.overflow = 'hidden'
When the menu is closed and the closest I've got to understanding it is the function doBack. Can I somehow add doBack to my existing function?
Mobile page here
It's a WordPress site and the javascript above toggles the dropdown by pressing on the bars. In order to extend the dropdown, I made the class collapse bigger, like so.
#media (max-width: 768px) {
.collapse {
position: absolute;
height: 775px;
background-color: white;
z-index: 99999 !important;
top: 75px;
left: -50px;
line-height: 10px;
}
}
HTML:
<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-15050" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown">
<a title="Contact" href="url">Contact
<ul role="menu" class="dropdow n-menu">
</ul>
</a>
</li>
</ul>
</div>
</div>
</div>
You can eliminate the style attribute by using:
document.body.style.overflow = null
You can simply add a new CSS class:
.body-overflow {
overflow: hidden;
}
and in your javascript function add another .classList.toggle() but this time on the body:
function myFunction(x) {
x.classList.toggle('change');
document.body.classList.toggle('body-overflow');
}
Im using Bootstrap 4 and for some reason the scroll to div function is only working on mobile phone/smaller screen sizes.
Javascript code:
<script>
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
}); </script>
Navbar link:
<li class="nav-item">
<a class="nav-link" href="#about-us"><button type="button" class="btn btn-green">About</button></a>
</li>
Div:
<div class="about" id="about-us">
<div class="container">
test
</div>
</div>
navbar-brand class is overlapping the navbar-nav.So add z-index to the navbar-nav in your html page i.e
<ul class="navbar-nav ml-auto" style="z-index:1;">
You can add following to your css file:
.navbar-brand.mx-auto {
width: 216px;
right: 0;
left: 0;
}