We Keep Coding

Make the List to be responsive design

Goal:
Make the list (ul and its li) to be responsive design in relation to the screen's width.
Problem:
I don't know how to solve it.
Info:
*You need to take account to amount of li in each ul list. Different responsive design depends on the width of the ul.
*Each ul can be random from 1 to 10 li or more.
JSBin:
https://jsbin.com/xibalahave/edit?html,css,output
Thank you!
.aaa ul.listlist {
margin: 10px 0 16px;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.aaa ul.listlist li {
font-size: 1.125rem;
display: block;
margin-right: 24px;
line-height: 22px;
border-radius: 12px 12px 12px 12px;
padding: 8px 24px;
background-color: #00FFFF;
white-space: nowrap;
}
<div class="aaa">
<ul class="listlist">
<li>1Test 1</li>
<li>1Test 2</li>
<li>1Test 3</li>
</ul>
</div>
<br />
<div class="aaa">
<ul class="listlist">
<li>1Test 1</li>
<li>1Test 2</li>
<li>1Test 3</li>
<li>1Test 4</li>
</ul>
</div>
<br />
<div class="aaa">
<ul class="listlist">
<li>1Test 1</li>
<li>1Test 2</li>
</ul>
</div>

You can simply add a flexwrap: wrap; to the container of the li, it will allow the child-elements (here, li), to go to another line. I invite you to learn about the flexbox and all their properties, this is very helpful for the responsive design! Check it out here.
.listlist{
display: flex;
flex-wrap: wrap;
}

How to Create Accordion Menu Footer For Mobile Only

How can I create a footer that collapses on mobile and you have to click on the Menu Title to actually expand ?
I want the footer menu to look normally on the desktop , something like this :
and 2. for mobile to look like this , basically to collapse automatically and the user having the option to expand or close the menu
Thank you !
My current code :
<div class="three columns" >
<h2 > Legal </h2>
<ul>
<li> Shipping</li>
<li> <a href="#" >Contact Us</a></li>
<li> About</li>
<li> Returns</li>
</ul>
</div>
<div class="three columns" >
<h2> Information </h2>
<ul>
<li> Privacy</li>
<li> <a href="#" >Terms</a></li>
<li> Ambassadors</li>
<li> Blog</li>
</ul>
</div>

I hope this can help you.
jQuery(".nav-footer h4").click(function(){
jQuery(this).parent(".nav").toggleClass("open");
});
.nav-footer-item ul {
list-style: none;
padding-left: 3px;
}
.open h4 {
opacity: 0.3;
}
h4 {
font-size: 30px;
}
.nav-footer-item {
padding: 25px !important;
}
#media (max-width : 768px) {
.nav-footer .nav h4 {
cursor: pointer;
}
.nav-footer ul {
max-height: 0;
overflow:hidden;
transition: max-height 1s ease-out; }
.nav-footer .nav h4:after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 20 20'%3E%3Cpath d='M14.613,10c0,0.23-0.188,0.419-0.419,0.419H10.42v3.774c0,0.23-0.189,0.42-0.42,0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0.23,0-0.419-0.189-0.419-0.419s0.189-0.419,0.419-0.419h3.775V5.806c0-0.23,0.189-0.419,0.419-0.419s0.42,0.189,0.42,0.419v3.775h3.774C14.425,9.581,14.613,9.77,14.613,10 M17.969,10c0,4.401-3.567,7.969-7.969,7.969c-4.402,0-7.969-3.567-7.969-7.969c0-4.402,3.567-7.969,7.969-7.969C14.401,2.031,17.969,5.598,17.969,10 M17.13,10c0-3.932-3.198-7.13-7.13-7.13S2.87,6.068,2.87,10c0,3.933,3.198,7.13,7.13,7.13S17.13,13.933,17.13,10'%3E%3C/path%3E%3C/svg%3E");
width: 25px;
float: right;
}
.nav-footer .nav.open h4:after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 20 20'%3E%3Cpath d='M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z'%3E%3C/path%3E%3C/svg%3E");
width: 25px;
}
.nav-footer .nav.open ul {
height:auto;
max-height: 500px;
transition: max-height 1s ease-in !important; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<footer class="nav-footer">
<div class="nav-footer-item nav col-sm-3">
<h4>Title</h4>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="nav-footer-item nav col-sm-3">
<h4>Title</h4>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="nav-footer-item nav col-sm-3">
<h4>Title</h4>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="nav-footer-item nav col-sm-3">
<h4>Title</h4>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</footer>

I suggest you not go with JS approach since there's a good alternative with CSS which gives you the same behavior and logic.
Look at this example
https://www.w3schools.com/howto/howto_css_switch.asp

Unexpected width in shopify draggable element

I made a simple draggable list, using the shopify draggable plugin
<ul id="myList">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
ul {
width: 50%;
border: 1px solid black;
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 5px;
background: salmon;
width: calc(100% - 10px);
cursor: move;
}
For some reason, when dragging, the dragged item's width gets much greater than the original item's. I suspect it's because I set the width in percentages and that it gets taken out of the parent container, so the percentage reference changes. I made a jsfiddle demo:
https://jsfiddle.net/x3jmkysq/1/
I would like it to work more like this example:
https://shopify.github.io/draggable/examples/simple-list.html
but I don't know how exactly they achieved it.

Anyway, I found the solution here:
https://github.com/Shopify/draggable/issues/147
Basically there is a property to calculate the dimensions of the dragged element from the original one called constrainDimensions.

Elements grid arranging CSS

I am trying to achieve a scenario: when you click on a box, it shows a "long box" (full width) in the next row. The problem is that I get a gap after the clicked object.
Is it possible show the "long box" in the next row without changing the structure of the small boxes using CSS?
Link to jsfiddle: jsfiddle.net/mhLv7zj1/
$(document).ready(function(){
$(".box").click(function(){
$(this).next('.open').toggleClass('toggled');
});
$(".open").click(function(){
$(this).toggleClass('toggled');
});
})

Here's one option. You can remove all the li class="open" from your HTML and instead have this algorithm on each click:
hide/remove any already open items
calculate the number of items in the flex row where the item that was clicked lives and its position
then you'll know where to make the insertion, so: at the end of this row, dynamically insert an open item (style it in advance so that it takes up an entire row (flex: 0 0 100%;)

Use flex and flex-basis properties.
$(document).ready(function() {
$(".box").click(function() {
$(this).next('.open').toggleClass('toggled');
});
$(".open").click(function() {
$(this).toggleClass('toggled');
});
})
ul {
display: flex;
list-style: none;
flex-direction: row;
flex-wrap: wrap;
}
.box {
background: blue;
height: 80px;
flex: 1 1 32%;
margin-right: 2px;
margin-bottom: 2px;
}
.open {
display: none;
background: red;
width: 100%;
height: 80px;
}
.toggled {
display: flex;
flex-basis: 66.5%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
</ul>

The problem is that the red boxes are siblings of the blue boxes so when you make them display:block they push the other content around. You need to make the red boxes children of the blue boxes and use relative positioning to achieve your desired result.
let boxes = document.querySelectorAll('ul > li');
boxes.forEach(b => {
b.addEventListener('click', expand.bind(b));
});
function expand() {
this.querySelector('.open').classList.toggle('visible');
}
ul {
width: 100%;
display: flex;
flex-flow: row wrap;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
position: relative;
flex-basis: 33%;
height: 150px;
background: blue;
border: 1px solid white;
}
div.open {
display: none;
position: relative;
top: calc(100% + 1px);
left: -1px;
width: calc(300% + 4px);
height: 150px;
border: 1px solid white;
background: red;
z-index: 1;
}
.visible {
display: block!important;
}
<ul>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
</ul>
PS. This example isn't a perfect fixed replica of your code but it should get you on the right track.

Using li:hover is not showing div when the list item is an anchor

I'm having an issue with my drop down menu. I am trying to have the end result look similar to BestBuy.com's navigation. The code is below along with more explanation at the end.
<div class="navbar">
<ul>
<li>Products
<div class="secondlevel">
<ul>
<li>Testing 1
<div class="thirdlevel two-columns">
<div class="column">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
<div class="column">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</div>
</li>
<li>Testing 2
<div class="thirdlevel">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li>Test Link</li>
</div>
and my CSS:
body {
font-family:sans-serif;
background: #eee;
}
.navbar {
background:lightblue;
width: 100%;
padding:0;
}
.navbar ul {
list-style:none;
padding:0;
margin:0;
}
.navbar ul>li {
display:inline-block;
}
.navbar ul li ul>li {
display:block;
}
.secondlevel {
position:absolute;
width:350px;
height:477px;
background:#fff;
padding:0;
border: 1px solid #c3c4c4;
}
.thirdlevel {
position:absolute;
width:350px;
height:477px;
background:lightgreen;
left:350px;
border: 1px solid #c3c4c4;
top:-1px;
}
.thirdlevel.two-columns {
width:700px;
}
.thirdlevel div:first-child {
position:absolute;
left:0;
}
.thirdlevel div {
position:absolute;
right:0;
}
.column {
width:350px;
}
.thirdlevel {
display:none;
}
.secondlevel {
display:none;
}
.navbar li:hover > div:first-child {
display:block;
}
.active {
display:block;
}
The problem I'm having is that when I try to turn the list items into links with: <li><a>Products</a><li>
When I do that, hovering over the element no longer works.
Also, the hover effect doesn't work in IE either. I'm guessing that's because I'm using li:hover.
I was attempting to use jQuery for the hover effect, and I would really like to since I've read that it's better for what I need to do, but my knowledge is limited in that department.
From what I researched I could use something like this:
$(document).ready(function () {
$(".main-nav-item").hover(function () {
$(".secondary-menu").toggleClass("active");
$(".tertiary-menu").toggleClass("hide");
});
});
Of course those classes don't line up with what I have, but that's the gist of what it is. The problem I had with that was I couldn't get it to work on only one child. Hopefully that's the right word. For example: When I hovered over my first <li> it would open all of the submenus. The way it is right now is perfect, except for the fact that nothing can be a link, which is kind of important.
Let me know if you need anymore information.

Try Making the links in the <li><a>Link</a></li> in to block Elements
a { display:block; }
did the trick for me
EDIT (Went Through you Problem)
Does this what you are asking for ..
$(document).ready(function() {
$(".main-nav-item a").hover(function() {
$(".secondlevel").addClass("active");
$(".thirdlevel").addClass("hide");
});
$(".secondlevel").hover(function() {
$(".thirdlevel").addClass("active");
});
});
body {
font-family: sans-serif;
background: #eee;
}
.navbar {
background: #FFE;
width: 100%;
padding: 0;
}
.navbar ul {
list-style: none;
padding: 0;
margin: 0;
}
.navbar ul>li {
display: inline-block;
}
.navbar ul li ul>li {
display: block;
}
.secondlevel {
position: absolute;
width: 350px;
height: 477px;
background: #fff;
padding: 0;
border: 1px solid #c3c4c4;
}
.thirdlevel {
position: absolute;
width: 350px;
height: 477px;
background: #AABC34;
left: 350px;
border: 1px solid #c3c4c4;
top: -1px;
}
.thirdlevel.two-columns {
width: 700px;
}
.thirdlevel div:first-child {
position: absolute;
left: 0;
}
.thirdlevel div {
position: absolute;
right: 0;
}
.column {
width: 350px;
}
.thirdlevel {
display: none;
}
.secondlevel {
display: none;
}
.navbar li:hover > div:first-child {
display: block;
}
.active {
display: block;
}
a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul>
<li class="main-nav-item">
Products
<div class="secondlevel">
<ul>
<li>
Testing 1
<div class="thirdlevel two-columns">
<div class="column">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
<div class="column">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</div>
</li>
<li>Testing 2
<div class="thirdlevel">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</li>
<li>Test Link
</li>
</ul>
</div>

Have your tried <li>EXAMPLE</li>? As for the IE side of things, I would recommend using IE specific styling or if you haven't already, used CSS Reset, for a start. Do you have a working example?