We Keep Coding

adding new and close button to sortable grid

ive been strugling to make add and close button to work but i dont know how and ive been trying to look it up but i didnt find anything, can anyone please help or point me in the right direction
these are my code :
$(function() {
$('.sortable').sortable();
$('.handles').sortable({
handle: 'span'
});
$('.connected').sortable({
connectWith: '.connected'
});
$('.exclude').sortable({
items: ':not(.disabled)'
});
});
<style>h1,
h2 {
text-align: center;
font-weight: normal;
}
#features {
margin: auto;
width: 460px;
font-size: 0.9em;
}
.connected,
.sortable,
.exclude,
.handles {
margin: auto;
padding: 0;
width: 510px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.connected li,
.sortable li,
.exclude li,
.handles li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
font-family: "Tahoma";
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.handles span {
cursor: move;
}
li.disabled {
opacity: 0.5;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 100px;
height: 100px;
text-align: center;
}
li.highlight {
background: #FEE25F;
}
#connected {
width: 440px;
overflow: hidden;
margin: auto;
}
.connected {
float: left;
width: 200px;
}
.connected.no2 {
float: right;
}
.status-closed {
position: relative;
top: -40px;
right: -25px;
}
.status-closed1 {
position: relative;
top: -40px;
right: -25px;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<section>
<h2>Grid</h2>
<ul class="sortable grid">
<li>Item 1<span class="status-closed1">X</span></li>
<li>Item 2<span class="status-closed">X</span></li>
<li>Item 3<span class="status-closed">X</span></li>
<li>Item 4<span class="status-closed">X</span></li>
</ul>
</section>
<br>
<div class="form-actions text-center">
<input type="submit" value="Add" class="btn btn-info">
</div>

I would use .clone and .remove combined with relative selectors to accomplish this.
$(function() {
$('.sortable').sortable();
$('.handles').sortable({
handle: 'span'
});
$('.connected').sortable({
connectWith: '.connected'
});
$('.exclude').sortable({
items: ':not(.disabled)'
});
$('.sortable').on("click", ".status-closed", function () {
$(this).closest('li').remove();
});
$('.add').on("click", function () {
$(".sortable li:first").clone().appendTo(".sortable").show();
});
});
<style>h1,
h2 {
text-align: center;
font-weight: normal;
}
#features {
margin: auto;
width: 460px;
font-size: 0.9em;
}
.connected,
.sortable,
.exclude,
.handles {
margin: auto;
padding: 0;
width: 510px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.connected li,
.sortable li,
.exclude li,
.handles li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
font-family: "Tahoma";
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.handles span {
cursor: move;
}
li.disabled {
opacity: 0.5;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 100px;
height: 100px;
text-align: center;
}
li.highlight {
background: #FEE25F;
}
#connected {
width: 440px;
overflow: hidden;
margin: auto;
}
.connected {
float: left;
width: 200px;
}
.connected.no2 {
float: right;
}
.status-closed {
position: relative;
top: -40px;
right: -25px;
}
.status-closed1 {
position: relative;
top: -40px;
right: -25px;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<section>
<h2>Grid</h2>
<ul class="sortable grid">
<li style="display:none">new<span class="status-closed">X</span></li>
<li>Item 1<span class="status-closed">X</span></li>
<li>Item 2<span class="status-closed">X</span></li>
<li>Item 3<span class="status-closed">X</span></li>
<li>Item 4<span class="status-closed">X</span></li>
</ul>
</section>
<br>
<div class="form-actions text-center">
<input type="submit" value="Add" class="btn add btn-info">
</div>

Make menu in CSS like in the picture

I have questions about how to reproduce the following:
I would like to know how I should proceed to make this menu conform to the picture above. I do not want anything ready, but a way to get the expected result.
So far, I have the following code:
body{
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
}
nav:after{
content: '';
border-bottom: 10px solid black;
width: 100%;
position: fixed;
margin-top: 5px;
}
nav li {
display: inline-block;
list-style: none;
}
nav li a {
color: #fff;
display: inline-block;
font-weight: bold;
padding: 20px 15px 15px 15px;
text-decoration: none;
}
nav li a:hover {
background: red;
color: #fff;
}
nav li a:hover:after {
content: '';
border-bottom: 10px solid yellow;
position: fixed;
width: auto;
margin-top: 54px;
left: 0;
right: 0;
z-index: 1;
}
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
I hope someone can help me. Thank you in advance!

You can try this solution should be helpful
body {
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav li:last-child a:before {
display: none;
}
nav li a {
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav li a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav li a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #ffaf1a;
z-index: 2;
}
nav li a:hover {
background: red;
color: #fff;
}
nav li a:hover:after {
display: block;
}
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 23</li>
<li>Menu 345</li>
<li>Menu 44567</li>
<li>Menu 567889</li>
</ul>
</nav>

Here it is: https://jsfiddle.net/97cyvmcy/
Simply, just use two linear gradients to achieve the desired effect:
One with red and yellow stripes:
li a:hover {
background: linear-gradient(to bottom, red 0%, red 90%, yellow 90%, yellow 100%);
}
And the other with black and white stripes at the bottom:
nav:after {
content:' ';
width: 100%;
height: 15px;
position: absolute;
bottom: 10px;
background:linear-gradient(to bottom, black 0%, black 50%, white 50%, white 100%);
}

Stick the elements out of the bottom of the nav with this code: https://jsfiddle.net/d379Lagm/
body{
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
outline: 5px solid #000;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
list-style: none;
}
nav li a {
color: #fff;
display: inline-block;
font-weight: bold;
padding: 20px 15px 15px 15px;
text-decoration: none;
position: relative;
border-bottom: 5px solid transparent;
}
nav li a:hover {
background: red;
color: #fff;
}
nav li a:after {
position: absolute;
left: 0;
right: 0;
background: transparent;
height: 5px;
content: "";
transform: translateY(950%);
}
nav li a:hover:after {
background: yellow;
}

css, lines dashing vertically through bullets

This may sound stupid, But I am on edge here. Does anyone knows how to do this in css or javascript? (preferably css)

You could try this:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
.section_header {
background-color: #7e9489;
border-radius: 20px;
width: 200px;
height: 20px;
color: #fff;
text-align: center;
padding: 10px;
line-height: 20px;
}
.section_content {
margin: 0px;
padding: 0px;
display: block;
border-left: solid 2px #7e9489;
margin-left: 99px;
padding-top: 10px;
}
.section_content > li {
display: block;
position: relative;
line-height: 40px;
}
.section_content > li::before {
position: relative;
display: inline-block;
vertical-align: middle;
content: '';
width: 12px;
height: 12px;
border-radius: 10px;
background-color: #7e9489;
margin-left: -7px;
margin-right: 20px;
z-index: 10;
}
.section_content > li > span {
display: inline-block;
vertical-align: middle;
}
.section_content > li:last-child::after {
content: '';
display: block;
position: absolute;
bottom: 0px;
left: -2px;
width: 2px;
height: 50%;
background-color: white;
z-index: 1;
}
<div class="section_header">OCT 5, 2016</div>
<ul class="section_content">
<li><span>Segment 1</span></li>
<li><span>Segment 2</span></li>
<li><span>Segment 3</span></li>
<li><span>Segment 4</span></li>
</ul>

Quick and dirty:-
.date {
border-radius: 30px;
background-color: #7C9288;
width: 200px;
text-align: center;
padding: 10px;
color: #fff;
}
.box {
border-left: 2px solid #7C9288;
margin-left: 110px;
margin-top: -16px;
padding-top: 20px;
}
li {
color: #7C9288;
list-style-type:none;
}
li:before{
content:'\00b7';
font-size:100px;
line-height:24px;
vertical-align:middle;
}
ul {
margin-left: -57px;
}
<div class="date">Today</div>
<div class="box">
<ul>
<li>Test</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>

Expanding menu shifts to the right after slideToggle()

I created a mobile menu and for some reason whenever you expand the menu, the list items shift the right a bit and the border-bottom does not cover the entire width of the expanded menu.
To see the mobile part of the menu, shrink the screen down some. Once you click the menu icon, you will see that the list doesn't just go straight down, it looks to move to the right. Then the border issue is very easy to see.
See snippet to view the issue.
$('span.nav-btn').click(function () {
$('ul.nav_list').slideToggle(500);
})
$(window).resize(function (){
if ( $(window).width() > 600 ) {
$('ul.nav_list').removeAttr('style');
}
});
body {
padding: 0;
margin: 0;
font-family:
}
.header {
margin: 0;
background-color: #333;
height: 80px;
}
.header_wrap {
margin: 0 15%;
}
.logo {
color: #FFF;
font-size: 1.2em;
padding-top: 25px;
position: absolute;
}
.nav_list {
text-decoration: none;
background-color: #333;
color: #FFF;
margin: 0;
list-style: none;
text-align: right;
}
.nav_list > li {
display: inline-block;
padding: 25px 15px;
}
.nav_list > li > a {
text-decoration: none;
font-size: 1.2em;
color: #FFF;
}
#media screen and (max-width:640px) {
body {
background-color: blue;
}
.header_wrap {
margin: 0 5%;
}
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
}
.nav_list > li {
display: block;
border-bottom: 1px solid #FFF;
}
.nav-btn {
display: block;
background-color: #333;
color: #FFF;
font-size: 1.5em;
text-align: right;
cursor: pointer;
padding-top: 20px;
}
.nav-btn:before {
background-image: url('http://realtorcatch.com/icons/mobile_menu_bttn.png');
background-size: 28px 28px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
content:"";
display: block;
float: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<header class="header">
<div class="header_wrap">
<div class="logo">Garbrandt Construction</div>
<nav>
<span class="nav-btn"></span>
<ul class="nav_list">
<li>Services</li>
<li>About us</li>
<li>Pricing</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>

Try adding the last line to your nav_list (padding-left:0 is needed):
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
padding-left:0;
}
JS Fiddle

You should add a padding of 0 to the ul element. Padding: 0 or padding-left: 0 should do it.
.nav_list {
padding: 0;
}
Lists automatically have padding to the left;

Why is nav bar sliding down skinny and then widening?

When you hover over a nav li item on my website, it should slide down the nav ul ul item, but when it slides down for some reason it is skinny, then widens after. Please look at my JSFiddle and help me out :D
JSFiddle Demo
HTML:
<body>
<header>
<nav>
<ul>
<li>Home
<ul>
<li>About Me</li>
</ul>
</li>
<li>Purposeful Living
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Academic Excellence
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Ethical Responsibility
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
</ul>
</nav>
</header>
<div id="headershow">Toggle Nav Bar</div>
<div id="mainnamesection">
<h1 id="mainname">
Title
</h1>
<div id="flyingsection">
</div>
<h1 id="mainname1">
<span id="smallname">Subtitle</span>
</h1>
</div>
</body>
Javascript/Jquery:
$(document).ready(function() {
$("#smallname").click(function() {
$("html, body").animate({scrollTop: "0px"});
});
$("#headershow").click(function() {
$("header").slideToggle();
});
$(".grades td a").mouseover(function() {
$(this).animate({backgroundColor: "white", color: "black"}, 200);
$(this).mouseleave(function() {
$(this).animate({backgroundColor: "transparent", color: "white"}, 200);
});
});
$('nav li').hover(
function () {
$('ul', this).slideDown();
},
function () {
$('ul', this).stop().slideUp();
}
);
});
CSS:
` #import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background-image: url(file:///Users/jakesager/Desktop/Websites/Jake%20Sager/img/starrynight.jpg);
background-size: 110%;
background-position: center -100px;
background-attachment: fixed;
margin:0;
padding:0;
}
header {
width: 100%;
margin:auto;
background: rgba(255,255,255,0.7);
height: 60px;
z-index: 20;
display: none;
}
.inline {
display: inline-block;
}
#flyingbird {
height: 60px;
width: 90px;
left: 100px;
position: relative;
top: -30px;
}
#bird {
height: 60px;
width: 90px;
display: inline-block;
position: relative;
top: 15px;
z-index: 1;
}
#flyingsection {
width: 700px;
margin:auto;
margin-top: 0px;
margin-bottom: 0px;
}
nav {
height: 60px;
margin-top: 0px;
text-align: center;
z-index: 20;
}
nav ul ul {
display:none;
}
#headershow {
background-color: rgba(255,255,255,0.7);
position: static;
left: 0;
top: 0;
width: 125px;
text-align:center;
border-bottom-right-radius: 10px;
padding: 5px;
height: 20px;
cursor: pointer;
font-family: open sans;
}
nav ul {
list-style:none;
display: inline-table;
position:relative;
padding: 0;
font-family: open sans;
display: inline-block;
}
nav ul li {
float: left;
margin-top: -16px;
border-right: 2px solid black;
text-align:center;
height: 60px;
padding-left: 25px;
padding-right: 25px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color:black;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
top: 18px;
}
nav ul li:first-child {
border-left: 2px solid black;
}
nav ul li:last-child {
border-right: 2px solid black;
}
nav ul li:hover {
background: rgba(255,255,255,0.6)
}
nav ul ul {
position: absolute;
top: 100%;
z-index: 20;
}
nav ul ul li {
float:none;
background-color: rgba(255,255,255,0.82);
width: 100%;
margin-top: 0;
margin-left: -27px;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 1px solid black;
}
nav ul ul li:last-child {
border-bottom: 2px solid black;
}
nav ul ul li:hover {
background-color: rgba(255,255,255,0.9);
}
#mainnamesection {
width: 1050px;
margin:auto;
}
#mainname {
font-size: 180px;
font-family: open sans;
text-align:center;
margin-top: 20px;
color: white;
}
#mainname1 {
font-size: 180px;
font-family: open sans;
text-align:center;
color: white;
margin-top: -100px;
}
#smallname {
font-size: 50px;
font-family: open sans;
color: #47BCEA;
}
nav ul ul {
margin-left: 0;
}
.maincontent {
width: 100%;
margin-top: 30px;
padding-top: 7px;
padding-bottom: 10px;
color: white;
}
.maincontent p {
font-family: open sans;
margin-left: 20px;
font-size: 18px;
}
.maincontent h1 {
font-family: open sans;
margin-left: 20px;
}
.grades {
margin-left: 20px;
background-color: rgba(000,000,000, 0.7);
font-family: open sans;
font-size: 23px;
}
.grades td {
padding: 10px;
border-right: 2px solid white;
}
.grades td:last-child {
border: none;
}
.grades td a {
width: 100%;
color: white;
text-decoration: none;
padding: 5px;
}
.wrapper {
width: 941px;
margin:auto;
}
.maintitle {
font-family: Open sans;
margin-left: 20px;
}
.mainparagraph {
font-family: Open sans;
margin-left: 20px;
}

During the animation overflow is set to hidden. When animation completes the inline overflow style is removed.
You have negative margin set on sub menu <li> so while the animation is in progress the part that is outside the parent is not visible.
Suggest you remove the negative margin and set the <ul> to left:0