Flexbox vertical slide menu

Developer
Jimmy Van Der Sleen
Size
2,995 Kb
Views
4,048
  1. Flexbox vertical slide menu Previews
  2. Flexbox vertical slide menu HTML Codes
  3. Flexbox vertical slide menu CSS Codes
  4. Flexbox vertical slide menu JS Codes

How do I make an flexbox vertical slide menu?

What is a flexbox vertical slide menu? How do you make a flexbox vertical slide menu? This script and codes were developed by Jimmy Van Der Sleen on 15 January 2023, Sunday.

Flexbox vertical slide menu Previews
IQ Test

Flexbox vertical slide menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>flexbox vertical slide menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="side-nav">	<ul class="side-nav__list">	<li class="side-nav__item"><a class="side-nav__link active" href="#section-1"></a></li>	<li class="side-nav__item"><a class="side-nav__link" href="#section-2"></a></li>	<li class="side-nav__item"><a class="side-nav__link" href="#section-3"></a></li>	<li class="side-nav__item"><a class="side-nav__link" href="#section-4"></a></li>	<li class="side-nav__item side-nav__item--last"><a class="side-nav__link" href="#section-5"></a></li> <span class="itemInner"></span>	</ul>
</nav> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flexbox vertical slide menu - Script Codes CSS Codes

html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { background: #000;
}
.side-nav { position: fixed; top: 20%; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); z-index: 50; width: 20px;
}
.side-nav__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; width: 100%; height: 100%; list-style: none; margin: 0; padding: 0;
}
.side-nav__item { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 20%; flex: 1 1 20%;
}
.side-nav__item:after { content: ''; height: 38px; width: 1px; background: #fff; color: #fff; position: absolute; top: 16px; left: 7px; z-index: 2;
}
.side-nav__item--last:after { display: none;
}
.side-nav__link { width: 15px; height: 15px; display: block; background-color: transparent; padding: 3px; border: 1px solid #FFF; border-radius: 100%; cursor: pointer; margin-bottom: 40px; position: relative; z-index: 1; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.itemInner { content: ' '; display: block; position: absolute; background: #fff; width: 15px; height: 15px; border-radius: 100%; top: 0; left: 0; border: 4px solid #000; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
.side-nav__item:nth-child(1).active ~ .itemInner { top: 0; border: 0 solid #000;
}
.side-nav__item:nth-child(2).active ~ .itemInner { top: 20%; border: 0 solid #000;
}
.side-nav__item:nth-child(3).active ~ .itemInner { top: 40%; border: 0 solid #000;
}
.side-nav__item:nth-child(4).active ~ .itemInner { top: 60%; border: 0 solid #000;
}
.side-nav__item:nth-child(5).active ~ .itemInner { top: 80%; border: 0 solid #000;
}

Flexbox vertical slide menu - Script Codes JS Codes

$('.side-nav__item').on('click', function(){ var $this = $(this); $('.side-nav__item').removeClass('active'); $this.addClass('active');
});
Flexbox vertical slide menu - Script Codes
Flexbox vertical slide menu - Script Codes
Home Page Home
Developer Jimmy Van Der Sleen
Username sjimster
Uploaded January 15, 2023
Rating 3
Size 2,995 Kb
Views 4,048
Do you need developer help for Flexbox vertical slide menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jimmy Van Der Sleen (sjimster) Script Codes
Name
Scroll Animations CSS3 and SCSS
One-page Navigation scroll plug-in
Profile Card Envato Remix Challenge
SCSS BEM Tabs system
Css 3D Cube try-out
Checkbox menu, pure CSS
Toggle Hamburger Menu
Custom GoogleMaps
PreLoad page
Svg loading circle
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!