Sidebar With Expanding Menus. [Diagram Provided] - javascript

I have spent about an hour trying to find a solution that can work, however, none of them come close to my desired goal. I am not expecting someone to spend the time creating it for me (its a lot of work), but I want to know how I can achieve it. Links or js fiddle would be amazing.
So this sidebar I am working on. It should have three states.
The first and second state show up on table onwards.
The default state is when the sidebar is loaded.
The second state is what happens when the user clicks on one of the icon images that are seen in the first image. It now expands to show the additional navigation. (Ex. Icon says Friends, and the new menu that appears has a list of like 10 people).
The Third state only appears on mobile. It basically eliminated the icon sidebar seen in the Default State (first image)
I appreciate any advice on how to solve this. I have tried so many different things and none come close to what I want.

Is this what you are looking for?
var titles = $('.title');
titles.each(function() {
$(this).on('click', function() {
$(this).next().toggleClass('active')
})
});
$('.toggle').on('click', function() {
$('.sidebar').toggleClass('hide');
});
.toggle {
position: fixed;
z-index: 1000;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 200px;
padding-top: 20px;
border-right: 1px solid black;
}
.group {
margin-top: 16px;
}
.title {
cursor: pointer;
border-bottom: 1px dashed black;
}
.list {
max-height: 0;
overflow: hidden;
}
.list li {
margin-top: 4px;
}
.active {
max-height: 400px;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">Button</button>
<div class="sidebar">
<section class="group">
<h3 class="title">Click me first.</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
<section class="group">
<h3 class="title">Maybe click me.</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
<section class="group">
<h3 class="title">Nope - click me!</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
</div>

Related

Read More Function for unordered list using jQuery with Paragraph

I'm a beginner, and trying to understand everything. I tried using <p> and it works smoothly but when I insert a text like a ul and li it wont show up
I also tried using a div but only the <a> part is working not the ul and li. I hope someone can help me.
$(document).ready(function() {
$(".more-less").click(function() {
$(this).parent().prev('ul.more').toggleClass("main");
if ($(this).parent().prev('ul.more').hasClass('main')) {
$(this).text('Read Less');
} else {
$(this).text('Read More');
}
});
});
.more {
text-align: left !important;
display: none;
}
.more-less {
/* position: absolute; */
/* right: -30px; */
/* top: -34px; */
color: #e43330 !important;
text-align: center;
float: left;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p style="text-align: left;">First paragraph then cuts...
<p class="more">Second paragraph.</p>
<p><strong>Header key roles</strong></p>
<ul class="more">
<li>trait 1</li>
<li>trait 2</li>
<li>trait 3</li>
<li>trait 4</li>
<li>trait 5</li>
</ul>
<a class="more-less">Read More</a>
<p> end paragraph</p>
strong text
There's two main issues in your code. Firstly the ul.more is not a parent element of the clicked p, so parents().next() isn't the correct traversal logic to use. As the target element is a sibling of the one which raised the event, use siblings().
Secondly, you need to set display: block on the hidden ul. You can do this through CSS, on the .main class which you toggle.
Also note that you cannot nest p elements. I corrected this in the example below by converting the containing element to a div.
jQuery($ => {
$(".more-less").click(function() {
let $more = $(this).siblings('ul.more').toggleClass("main");
if ($more.hasClass('main')) {
$(this).text('Read Less');
} else {
$(this).text('Read More');
}
});
});
.more {
text-align: left !important;
display: none;
}
.more.main {
display: block;
}
.more-less {
color: #e43330 !important;
text-align: center;
float: left;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
First paragraph then cuts...
<p class="more">Second paragraph.</p>
<p><strong>Header key roles</strong></p>
<ul class="more">
<li>trait 1</li>
<li>trait 2</li>
<li>trait 3</li>
<li>trait 4</li>
<li>trait 5</li>
</ul>
<a class="more-less">Read More</a>
<p> end paragraph</p>
</div>
Try delete display: none; from more class

FocusOut/Blur when leaving div with elements

There is a fixed div with some links that are shown when user clicks a button.
For accessibility purposes, I want to close this div when it loses keyboard focus, but I can`t find the correct DOM event to handle.
I've tried blur and focusout events but they are also triggered even when children elements still has focus.
Example:
function openMenu() {
var menu = document.getElementById("menu");
menu.setAttribute("open", "");
menu.addEventListener("focusout", handleMenuFocusOut);
menu.focus();
}
function closeMenu() {
var menu = document.getElementById("menu");
menu.removeAttribute("open");
}
function handleMenuFocusOut() {
console.log("Event triggered!");
menu.removeEventListener("focusout", handleMenuFocusOut);
closeMenu();
}
#menu {
display: none;
position: fixed;
top: 50px;
padding: 20px;
background-color: gray;
}
#menu[open] {
display: block;
}
#menu:focus, a:focus {
background-color: cyan;
}
<div>
<button onclick="openMenu()">Click Me</button>
<div id="menu" tabindex="0">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<input type="text"/>
</div>
To reproduce the case, click the button and press tab to navigate between links.
The expected behavior is to close div only when focusing outside elements, like the textbox.
Ok, I've completely changed this answer.
You can do this using pure CSS using focus-within and ~ (which is used to show the menu when the open-button is focused.
Take a look at this snippet which uses no JS:
#menu {
display: block;
position: fixed;
top: 50px;
padding: 20px;
background-color: cyan;
opacity: 0;
pointer-events: none;
}
*:focus { outline: 3px solid #ff0; }
#menu:focus-within, #open-btn:focus ~ #menu {opacity: 1; pointer-events: all;}
<div>
<button id="open-btn">Click Me</button>
<div id="menu" tabindex="0">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<input type="text" />
</div>

Unable to remove class after using toggle class with jQuery

I have three navigations in one page and I'm trying to show the active links for each nav. For some reason the third nav isn't working correctly. For example, if you click on "chapter 2" or "chapter 3" or "chapter 4", "chapter 1" stays active. I don't know if it's because "Chapter 1" and "sublink4" from the middle nav have the same url. I tried removing the active class of the third nav, but it's not working. Unfortunately the snipping isn't working as it is on my computer. I only used target="_blank" on the snippet, not only my local machine since you can't click on links on the snippet without restarting the snippet.Thanks
$(window).on('load', function () {
$('body').setActiveMenuItem();
$('body').setActiveMenuItem2();
$('body').setActiveMenuItem3();
});
$(document).ready(function () {
//first nav
$.fn.setActiveMenuItem2 = function () {
$.each($('.nav1').find('li'), function () {
$(this).toggleClass('active',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
}
//middle nav
$.fn.setActiveMenuItem3 = function () {
$.each($('.nav3').find('li'), function () {
$(this).toggleClass('active3',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
}
//third nav
$.fn.setActiveMenuItem = function () {
$.each($('.nav2').find('li'), function () {
$(this).removeClass('active2');
$(this).toggleClass('active2',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
}
});
li.active {
background-color: red;
}
li.active2 {
background-color: blue;
}
li.active {
background-color: yellow;
}
.nav1 ul, .nav3 ul {
display: flex;
justify-content: space-between;
}
nav {
margin-bottom: 50px;
}
.wrapper {
width: 400px;
margin: auto;
}
li {
list-style: none;
background-color: aliceblue;
padding: 10px;
}
li a {
padding: 10px;
}
li a:hover {
color: red;
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<nav class="nav1">
<ul>
<li> Link 1 </li>
<li><a href="/link-2" target="_blank" >Link 2</a> </li>
<li>Link 3 </li>
<li>Link 4 </li>
</ul>
</nav>
<nav class="nav3">
<ul>
<li>Subink 1</li>
<li>Subink 2</li>
<li>Subink 3</li>
</ul>
</nav>
<nav class="nav2">
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
</nav>
</div>
-> replace $ to j Query
->Either replace a latest jquery
Use preventDefault to let default event handler to open new link.
window.open() will let you open links in new tabs.
Note: This code won't work in sand-boxes.
Let me know if I'm missing something?
var links = document.querySelectorAll('a');
links.forEach((node) => {
node.addEventListener("click", (evt) => {
evt.stopPropagation();
evt.preventDefault();
evt.target.classList.add('active');
window.open(evt.target.href);
});
});
li.active {
background-color: red;
}
li.active2 {
background-color: blue;
}
li.active {
background-color: yellow;
}
.nav1 ul,
.nav3 ul {
display: flex;
justify-content: space-between;
}
nav {
margin-bottom: 50px;
}
.wrapper {
width: 400px;
margin: auto;
}
li {
list-style: none;
background-color: aliceblue;
padding: 10px;
}
li a {
padding: 10px;
}
li a:hover {
color: red;
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<nav class="nav1">
<ul>
<li> Link 1 </li>
<li>Link 2 </li>
<li>Link 3 </li>
<li>Link 4 </li>
</ul>
</nav>
<nav class="nav3">
<ul>
<li>Subink 1</li>
<li>Subink 2</li>
<li>Subink 3</li>
</ul>
</nav>
<nav class="nav2">
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
</nav>
</div>

Div toggle animation

Complete js newbie here, so sorry if im asking a stupid question :)
I have a navigation that toggles several divs, each link opens its own div, like this:
<div class="drawer" id="link1" style="display: none">First link content</div>
<div class="drawer" id="link2" style="display: none">Second link content</div>
<div class="drawer" id="link3" style="display: none">Third link content</div>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>External link</li>
</ul>
</nav>
And the code that runs it:
$(document).ready(function () {
$('.menu').click(function () {
var $clicked = $(this)
$('.menu').each(function () {
var $menu = $(this);
if (!$menu.is($clicked)) {
$($menu.attr('data-item')).hide();
}
});
$($clicked.attr('data-item')).toggle();
});
});
It works well, but instead of simple showing/disappearing, i would wish to have slide up/down toggle effect on the divs when they are triggered.
I know there are slideUp and slideDown effects, but like i said, i am very new to all this and i cant make it work.
Fiddle is at http://jsfiddle.net/15kene5v/ and if anybody can help, that would be great.
Use slideUp and slideToggle instead of hide and toggle.
Updated Fiddle
$(document).ready(function() {
$('.menu').click(function() {
var $clicked = $(this)
$('.menu').each(function() {
var $menu = $(this);
if (!$menu.is($clicked)) {
// Use slideUp here
$($menu.attr('data-item')).slideUp('slow');
}
});
// Use sildeToggle here
$($clicked.attr('data-item')).slideToggle('slow');
});
});
nav ul {
margin: 0;
padding: 0;
background-color: #6DB4F3;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
.drawer {
height: 100px;
background-color: darkorange;
color: white;
text-align: center;
position: relative;
}
.drawer:after {
content: 'close';
left: 0;
top: 0;
position: absolute;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="drawer" id="link1" style="display: none">First link content</div>
<div class="drawer" id="link2" style="display: none">Second link content</div>
<div class="drawer" id="link3" style="display: none">Third link content</div>
<nav>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>External link
</li>
</ul>
</nav>
<div style="display:block">Content that gets pushed down</div>

Create an Accordion Menu for Mobile Site Jquery and CSS

I have recently started designing a mobile website using media queries and browsing a few websites to see what they've done it seems accordion navigation menus are the way to go, scaling up to a normal horizontal navigation bar. I have browsed and browsed the internet looking for an accordion walkthrough but I can not seem to find one that explains it well enough.
A good example is the one from microsoft on their website. Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
padding: 20px 0px 20px 0px;
border-top: 2px solid #abc;
}
nav ul ul {
height: 0;
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
</style>
</head>
<body>
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</html>
These navigation bars have submenus [nav ul ul] that slide out when nav ul li is clicked. I was hoping somebody could point me in the right direction as to how I go about making a slide down sub menu on click, or help me with the code.
I thought there may have been a basic one people could start using and edit to customise themselves.
Thanks for any help.
There is no need for Javascript - you may use a Checkbox instead.
Check out: http://codepen.io/TimPietrusky/pen/CLIsl
If you still want to do it with Javascript go for something like this:
// asuming, that nav-items that should trigger slidedown will have "#" as href
// while actual nav-items will have URLs
$('nav li a[href="#"]').on('click', function (e) {
// prevent Click from redirecting
e.preventDefault();
// get the next ul after the li a clicked
if ($(this).hasClass('visible')) {
$(this).next('ul').slideUp(200).removeClass("visible");
} $(this).next('ul').slideDown(200).addClass("visible");
});
CSS animation for height form 0 to auto wont work. See: How can I transition height: 0; to height: auto; using CSS?
Check this out
https://jsfiddle.net/nqamazgz/3/
Unfortunately CSS does not have any click events, instead you will need to use JavaScript and/or jQuery. I used jQuery
All i did was add a class hide-nav to your nav with display none. And a button to click of course.
And a bit of jQuery
$(document).ready(function() {
$('#topMenu-btn').on('click', function() {
$('nav').slideToggle();
});
});
Try something like this:
http://jsfiddle.net/kb668aag/
You'll need to modify the code a bit.
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
CSS
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
padding: 20px 40px;
display: block;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
border-top: 2px solid #abc;
}
nav ul ul {
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
ul.sub-menu{
display: none;
}
.has_children > a{
color: #ddd;
}
JS:
var $menu_with_children = $('.has_children > a');
$menu_with_children.on('click', function(e){
e.preventDefault();
var $this = $(this);
if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
$this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
} else{
$this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
}
});

Categories