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');
}
Related
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 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
UPDATE
I discovered I could toggle the data state on click with
$(".list-header").attr("data-state", $(".list-header").hasClass('list-header') ? "hide" : "show");
However, when I click the same header I just opened, it doesn't revert back to its original icon or "hide" state.
How can I toggle the current header back to the data-state="hide" state?
$('.list-header.major').click(function(){
$(".list-header").attr("data-state", $(".list-header").hasClass('list-header') ? "hide" : "show");
$('.list-header.major').next('div').slideUp();
$(this).next('div').toggle();
$('.list-header.major').removeClass('active');
$(this).toggleClass('active');
return false;
});
===========================================================================
I need to be able to toggle the "HEADER"'s so that when the subnav is closed for any of them, the header icon is always set to a + sign, and has a data-state=hide
I found that the state of the headers is always set to active, and that the only way to toggle the + or - sign is to toggle the data-state from show to hide, which would be based on the state of the .col-wrapper classes style being either display:none or display: block.
The question is how to look for the display state of the .col-wrapper class and change the data-state based on whether the .list-header has been clicked or not. I've included screen shots of the states from the fiddle(https://jsfiddle.net/2bu35uLn/3/show/) below.
Essentially, the issue is that the icons aren't toggling back to the plus sign, if the user clicks on another header. This should force any closed list header to go back to the plus sign.
This is the closed state
This is the open state
Notice that the .col-wrapper class has display:block to show the subnav, but the .list-header class is still set to data-state="hide", which keeps the header from being toggled back to the correct state.
I'm trying to target the data-state to change to hide if the .col-wrapper class is display:none, by doing something like this:
$(".list-header").on('click', function(){
if($(this).find(".col-wrapper").css("display", "none")){
force data-state to be hide
}
});
HTML
<div class="inner">
<button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
<div class="col-wrapper collapse in" id="data-nav-0" style="display: block;">
<div class="column">
<ul class="list-unstyled">
<li class="list-header mobile">link</li>
<li class="list-header desktop">head</li>
<li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
<button class="no-style sub-header">This should toggle the ul links</button>
</li>
<ul class="inner collapse" id="data-inner-0-0">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</ul>
</div>
<div class="column">
<ul class="list-unstyled">
<li class="list-header desktop">Link</li>
<li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
<button class="no-style sub-header">This should toggle the ul links</button>
</li>
<ul class="inner collapse" id="data-inner-0-0">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</ul>
</ul>
</div>
</div>
</div>
<div class="inner">
<button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
<div class="col-wrapper collapse in" id="data-nav-0" style="display: block;">
<div class="column">
<ul class="list-unstyled">
<li class="list-header mobile">link</li>
<li class="list-header desktop">head</li>
<li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
<button class="no-style sub-header">This should toggle the ul links</button>
</li>
<ul class="inner collapse" id="data-inner-0-0">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</ul>
</div>
<div class="column">
<ul class="list-unstyled">
<li class="list-header desktop">Link</li>
<li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
<button class="no-style sub-header">This should toggle the ul links</button>
</li>
<ul class="inner collapse" id="data-inner-0-0">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</ul>
</ul>
</div>
</div>
</div>
jQuery
$('.list-header.major').next('div').toggle();
$('.list-header.major').click(function(){
$('.list-header.major').next('div').slideUp();
$(this).next('div').toggle();
$('.list-header').removeClass('active');
$(this).toggleClass('active');
return false;
});
$('.mobile').next('ul').toggle();
$('.mobile').click(function() {
$('.mobile').next('ul').slideUp();
$(this).next('ul').toggle();
$('.mobile button').removeClass('active');
if ($(this).next('ul').is(':visible')) {
$(this).find('button').addClass('active');
}
return false;
});
CSS
button.list-header.major {
&:before,
&:after {
color: $purple;
font-family: 'Material Icons';
font-size: 20px;
position: absolute;
right: 20px;
}
&:before {
content: "\E145"; <--THIS IS A PLUS SIGN
}
&:after {
content: "\E15B"; <--THIS IS A MINUS SIGN
}
}
.sub-header:after{
content: " >";
font-family: 'Material Icons';
display: inline-block;
transform: rotate(0);
font-size: 26px;
color: $white;
position: relative;
top: 8px;
transition: transform .3s;
}
.sub-header.active:after{
content: " v";
color: red;
display: inline-block;
transform: rotate(8deg);
font-size: 26px;
color: $neon-green;
transition: transform .3s;
}
UPDATE WITH SCREENSHOT AND MORE DETAIL
The top navigation should have a + icon, not -. Here you can see the second Header is opened and has the correct -, while the Header above it still has the -, although the contents col-wrapper has collapsed below it:
Changed code together with the author of question. Should work as expected.
$('.list-header.major').click(function(){
if (current !== this)
$(current).attr('data-state', 'hide');
$(this).attr("data-state", $(this).attr('data-state') === 'hide' ? "hide" : "show");
current = this;
$('.list-header.major').next('div').slideUp();
$(this).next('div').toggle();
$('.list-header.major').removeClass('active');
$(this).toggleClass('active');
return false;
});
Here is it the fiddle
I've used this code for my navbar :
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
Link
</li>
<li>
Link
</li>
<li class="dropdown">
Dropdown<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Something Here
</li>
<li>
Something else here
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Link
</li>
</ul>
</div>
</nav>
The above code is for simple navbar example. As I'm new to stackoverflow and have less reputation so I can't add images to my question.
Simple hover I can make using CSS but I wanted to make a hover in which if the cursor goes to any item on the navbar there is a effect like color water is filling in a glass.
Also I'm very curious about how to make the end of the section or div a little slant with some angle.
Please refer to the following link for reference:
This the template for reference
I'm trying to make a navbar and end of a section exacty like this template.
The template you refer to creates the bottom "slant" with the following CSS:
.section {
position: relative;
}
.section:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: -195px; /* the height of your image */
left: 0;
z-index: -1;
height: 195px; /* the height of your image */
background: url(path/to/your/image.png) no-repeat 50% 0%;
}