pure css Navigation bar responsive

index.html

<div class="container">
		<div class="menu-button">Menu</div>
		<ul class="flexnav" data-breakpoint="800">
			<li><a href="#">Home</a></li>
			<li>
				<a href="#">Portofolio</a>
				<ul>
					<li><a href="#">Web design</a></li>
					<li><a href="#">Web development</a></li>
					<li>
						<a href="#">Programming</a>
						<ul>
							<li><a href="#">Sublink 1</a></li>
							<li><a href="#">Sublink 2</a></li>
							<li><a href="#">Sublink 3</a></li>
							<li><a href="#">Sublink 4</a></li>
							<li>
								<a href="#">Sublink 5</a>
								<ul>
									<li><a href="#">Sublink 1</a></li>
									<li><a href="#">Sublink 2</a></li>
									<li><a href="#">Sublink 3</a></li>
									<li><a href="#">Sublink 4</a></li>
									<li><a href="#">Sublink 5</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">Identity</a></li>
					<li><a href="#">App Development</a></li>
				</ul>
			</li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>

pure-css-navigation-bar-responsive.markdown

pure css Navigation bar responsive

A Pen by MAHESH AMBURE on CodePen.

License.

script.js

$(".flexnav").flexNav();

scripts

<script src="https://0.s3.envato.com/files/78833207/js/jquery-1.9.0.min.js"></script>
<script src="https://0.s3.envato.com/files/78833207/js/jquery.flexnav.js"></script>

style.css

body {background: url("https://i.ytimg.com/vi/4kfXjatgeEU/maxresdefault.jpg");}.container {width: 80%;margin: auto;top: 50px;position: relative;}.flexnav,.flexnav ul{list-style:none;margin:0}.flexnav,.menu-button{font-family:Lato,Helvetica,sans-serif;line-height:1;background:#2b2f3a}.flexnav{padding:0;display:block;overflow:visible;width:100%}.flexnav>li>a,.menu-button{padding:18px 22px;font-size:18px;text-transform:uppercase}.flexnav:after{content:"";display:table;clear:both}.menu-button{display:none;color:#7a8189;cursor:pointer}.flexnav>li{float:left;display:block;position:relative}.flexnav li a{color:#7a8189;-webkit-transition:color .2s ease-out;-moz-transition:color .2s ease-out;-ms-transition:color .2s ease-out;-o-transition:color .2s ease-out;transition:color .2s ease-out}.flexnav>li>a{display:block;font-weight:300;text-decoration:none}.flexnav li a:hover{color:#fff}.flexnav>.item-with-ul>a{padding-right:66px}touch-button{display:block;position:absolute;right:0;top:0;width:54px;height:54px;z-index:99;cursor:pointer;background:0 0}.touch-button::after{content:'';display:block;position:absolute;width:26px;height:26px;border:1px solid #7a8189;right:13px;top:13px;border-radius:23px}.touch-button::before{content:'';display:block;width:10px;height:10px;position:absolute;border-bottom:1px solid #7a8189;border-left:1px solid #7a8189;right:21px;top:20px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.flexnav li:hover>.touch-button::before,.sm-screen .submenu-open::before{border-bottom-color:#fff;border-left-color:#fff}.flexnav li:hover>.touch-button::after,.sm-screen .submenu-open::after{border-color:#fff}.flexnav ul{position:absolute;left:0;padding:0}.flexnav ul ul{left:244px;top:-1px}.flexnav ul li{display:block;position:relative;padding:0;margin:0;border-top:1px solid #31353f}.flexnav ul li a{background:#2b2f3a;padding:12px 22px;display:block;width:200px;text-decoration:none}.flexnav ul .touch-button{width:40px;height:40px;border-left:1px solid #31353f}.flexnav ul .touch-button::after{top:8px;right:8px;width:22px;height:22px}.flexnav ul .touch-button::before{right:17px;top:16px;height:7px;width:7px;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg)}@media all and (max-width:800px){.flexnav{overflow:hidden;max-height:0}.flexnav.show{overflow:visible;max-height:3000px}.flexnav li{float:none}.flexnav ul li a{width:auto;padding-left:42px}.flexnav>li{border-top:1px solid #31353f}.flexnav ul,.flexnav ul ul{position:relative;left:0;width:100%}.flexnav.show .touch-button,.menu-button .touch-button{border-left:1px solid #31353f;z-index:999}.flexnav ul .touch-button::before{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);right:16px;top:15px}.menu-button{display:block}.menu-button .touch-button::before{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);border-left:0;border-top:2px solid #7a8189;border-bottom:2px solid #7a8189;height:2px;width:12px;top:22px}.menu-button::after{display:block;width:12px;height:2px;content:'';position:absolute;background:#7a8189;right:21px;top:30px}.flexnav ul ul li a{padding-left:62px}.flexnav ul ul ul li a{padding-left:82px}}