Develop Reference

Toggle collapse menu is not working and hiding the content

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.

Auto collapse sidebar menu list when lost focus

I just want to ask :
how to make the dropdown-menu collpase when the dropdown menu is active?
When the mouse hovers to the sidebar, the active dropdown menu expanded again?
i think i just wondering using hover but it doesnt work when i try it, so i hope someone can help me to solve this?
Simple Concept I Just want :
Mouse:hover to sidebar-icon/burger is clicked => sidebar-expanded => menu list that have:submenu clicked => dropdown-menu displayed => mouseOut from sidebar => icon is-collapsed
Mouse:hover to sidebar-icon again / sidebar:state(active) => dropdown menu is already expanded
well i dont know that you can understand my question or something.. but i hope u can make this auto collapse menu
$(document).ready(function() {
// Sidebar links
$('.sidebar .side-list li a').on('click', function() {
const $this = $(this);
if ($this.parent().hasClass('buka')) {
$this
.parent()
.children('.dropdown-menu')
.slideUp(200, () => {
$this.parent().removeClass('buka');
});
} else {
$this
.parent()
.parent()
.children('li.buka')
.children('.dropdown-menu')
.slideUp(200);
$this
.parent()
.parent()
.children('li.buka')
.children('a')
.removeClass('buka');
$this
.parent()
.parent()
.children('li.buka')
.removeClass('buka');
$this
.parent()
.children('.dropdown-menu')
.slideDown(200, () => {
$this.parent().addClass('buka');
});
}
});
// ٍSidebar Toggle
$('.burger').on('click', e => {
$('.konten').toggleClass('k-kebuka');
$('.sidebar').toggleClass('s-kebuka');
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" class="sidebar bg-cerah">
<div class="sidebar-dalem">
<div class="side-konten">
<ul class="side-list">
<li class="side-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0)">
<span class="side-ikon">ICON</span>
<span class="side-judul">MENU</span>
<span class="panah">[>]</span>
</a>
<ul class="dropdown-menu">
<li>
SUBMENU #1
</li>
<li>
SUBMENU #2
</li>
</ul>
</li>
<li class="side-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0)">
<span class="side-ikon">[X]</span>
<span class="side-judul">MENU #2</span>
<span class="panah">[>] ></span>
</a>
<ul class="dropdown-menu">
<li>
SUBMENU #1
</li>
<li>
SUBMENU #2
</li>
</ul>
</li>
<li class="side-item">
<a class="side-link" href="javascript:void(0)">
<span class="side-ikon">[X]</span>
<span class="side-judul">MENU #3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="konten" class="konten">
<div class="konten-navbar sticky-top">
<ul class="navbar-kiri">
<li>
<a id="burger" href="javascript:void(0)" class="burger">BURGER ICO</a>
</li>
<li>
SEARCH ICO
</li>
</ul>
</div>
</div>

In pure CSS, .menu:hover definitely works, but you have to build the entire menu inside of the element that has the :hover pseudo class and also either touching or overlapping:
.popup {
position: relative;
}
button {
width: 8em;
height: 40px;
}
ul {
position: absolute;
top: 36px;
left: 8px;
background: #eee;
border: 1px solid black;
display: none;
margin: 0;
width: 14em;
min-height: 8em;
padding: 0.5em;
list-style: none;
}
.popup:hover ul {
display: block;
}
<div>
<div class="popup"><button>Menu</button>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
Certainly, you'd need to style everything properly.
I also seem to remember that JQuery has OnMouseEnter and OnMouseLeave events that work kind of like :hover too.

Hiding sidebar and dropdown menu

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

Ajax Javascript: Link doesnt work

on a Sharepoint site, I have a navigation that contains return AjaxNavigate$OnClickHook(event, this);.
There is also a "normale" <a href="...">-tag for the link.
Now, the linked content is being changed by adding a picture inside the link tag.
The picture is shown on the right position, the cursor also shows a link which can be opened via the right-click context menu and chosing "Open Link" or "Open Link in new Tab".
But it does not open when clicked "normally".
I guess that the Ajax code above prevents the normal link handling.
How can I get the image also to be linked correctly?
Thanks.
edit:
relevant HTML (generated mostly by a Sharepoint site):
(...)
<div
class="ms-displayInline ms-core-navigation"
id="DeltaTopNavigation"
role="navigation"
>
<div
class=" noindex ms-core-listMenu-horizontalBox"
id="zz13_TopNavigationMenu"
onclick="return AjaxNavigate$OnClickHook(event, this);"
>
<ul
class="root ms-core-listMenu-root static"
id="zz14_RootAspMenu"
>
<li class="static selected">
<a
tabindex="0"
class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-bold ms-core-listMenu-selected ms-navedit-linkNode"
accesskey="1"
href="https://xxx/sites/00001/SitePages/SomeSite.aspx"
>
<span class="additional-background ms-navedit-flyoutArrow">
<span
class="menu-item-text"
style="text-align: center; display: inline-block; position: relative;"
>
<img
style="width: 50px; height: 50px;"
src="/sites/00001/SiteAssets/images/pic.png"
border="0"
>
<br>Text
</span>
<span class="ms-hidden">Currently selected</span>
</span>
</a>
</li>
<li class="static">
<a
tabindex="0"
class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode"
href="https://xxx/sites/00001/SitePages/SomeSite2.aspx"
>
<span class="additional-background ms-navedit-flyoutArrow">
<span
class="menu-item-text"
style="text-align: center; display: inline-block; position: relative;"
>
<img
style="width: 50px; height: 50px;"
src="/sites/00001/SiteAssets/images/pic2.png"
border="0"
>
<br>Text 2
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
(...)
EDIT 2:
The <img...-tag is inserted afterwards, via this code:
$('[id$="RootAspMenu"]').find('.menu-item-text').each(function(i,item)
{
var iconName = "pic_";
iconName += $(item).text().replace(" ","").toLowerCase();
iconName += ".png";
$(this).prepend('<img style="width:50px;height:50px;" src="/sites/00001/SiteAssets/images/'+iconName+'" border="0"><br/>');
$(this).css("display", "inline-block");
$(this).css("position", "relative");
$(this).css("text-align", "center");
}
);
...and I noticed that the area "behind" the image (so, the <span> area?) is linked correctly. Only the image is not.
Could it be a problem for the link that the image has been inserted afterwards? How can I solve this problem?

I got it myself!
Inserting in the script/jquery where I insert the image, I also put this:
if ($(this).parent().is("span") ) {
$(this).unwrap();
}
...takes away the <span> around the image / inside the link. Now it works correctly!

remove what was appended and add other things on click

I have a list of Li's that wen clicked on will have a class of plSel, When clicked, I want them to have a different video playing and the other videos, clear off
This is how I have it down on my html:
<div class="fullscreen-bg">
<video id="appendVid" loop muted autoplay poster="assets/one.png" class="fullscreen-bg__video">
</video>
</div>
and later the lis appear like this:
<li id="numb01"></li>
<li id="numb02"></li>
<li id="numb03"></li>
<li id="numb04" class="plSel"></li> //whenclicked
and this is how I've laid out my JS so far, the problem is when it gets to be more than one, it just wont work
$(document).ready(function(){
if ($('#numb01').hasClass('plSel')) {
$('#appendVid').append('<source src="assets/one.mp4" type="video/mp4"><source src="assets/one.ogv" type="video/ogg">');
});
how do i continue it on to remove what was appended and append the next one for each li each video would have something like this appended <source src="assets/two.mp4" type="video/mp4"><source src="assets/two.ogv" type="video/ogg">
thanks for your help

It's hard to pair them as you need grammar there. I mean class one with numb01. It could be better if you keep those naming convention better. In case you still them unmodified, at least you should collect them within a scope. Just like li has always ul as their parent.
If both video and list have their position in correct order, here I use jQuery index to find its position, then show it and collect its siblings element then hide them. Then find which video to show by found index, hide its siblings, that's all.
I also showing here on how easier you'll get it if you can store related selector with better naming convention. Example here using data- attribute on button to relate target li visibility.
$(function () {
var index = $('.numb .plSel').index()
$('.fullscreen-bg:eq('+ index +')').show().siblings().hide()
})
$(document).on('click', '[data-toggle]', function () {
var targetId = $(this).data('toggle')
targetId = $(targetId)
var index = targetId.index()
targetId.show().siblings().hide()
$('.fullscreen-bg:eq('+ index +')').show().siblings().hide()
})
.numb {
margin-top: 20px;
}
.numb > li:not(.plSel) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullscreen">
<div class="fullscreen-bg one">
One
</div>
<div class="fullscreen-bg two">
Two
</div>
<div class="fullscreen-bg one">
Three
</div>
</div>
<ul class="numb">
<li id="numb01" class="plSel">Numb 1</li>
<li id="numb02">Numb 2</li>
<li id="numb03">Numb 3</li>
</ul>
<button type="button" data-toggle="#numb01">Toggle One</button>
<button type="button" data-toggle="#numb02">Toggle Two</button>
<button type="button" data-toggle="#numb03">Toggle Three</button>

I've adjusted your HTML, but I think this is what you want. FIDDLE
$(document).on("click", ".menu ul li a", function() {
$(".container > div").eq($(this).parent().attr("id")-1).addClass("plSel");
$(".container > div").not(".plSel").css("display", "none");
})
.menu {
float: left;
margin-bottom: 25px;
}
.container {
float: left;
clear: left;
}
.fullscreen-bg {
float: left;
}
li {
list-style: none;
float: left;
min-width: 50px;
text-align: center;
}
li a {
text-decoration: none;
color: darkblue;
}
li a:hover {
color: red;
}
.fullscreen-bg:not(:last-child) {
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li id="1">One</li>
<li id="2">Two</li>
<li id="3">Three</li>
<li id="4">Four</li>
<li id="5">Five</li>
<li id="6">Six</li>
</ul>
</div>
<div class="container">
<div class="fullscreen-bg one">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg two">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg three">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg four">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg five">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg six">
<img src="http://placehold.it/100x150" />
</div>
</div>