Blurry Full-size Navigation with jQuery and CSS3

Blurry full-size navigation is a modern navigation concept. It helps you to create a full-sized navigation menu and blurs the background using CSS blur filter. jQuery is used to toggle CSS classes only whenever navigation is opened or closed.

<div class="screen"> <header> <a class="target-burger"> <ul class="buns"> <li class="bun"></li> <li class="bun"></li> </ul> <!--buns--> </a> <!--target-burger--> </header> <nav class="main-nav" role="navigation"> <ul> <li><a href=""><span>My Account</span></a></li> <li><a href=""><span>Billing Information</span></a></li> <li><a href=""><span>Order Tracker</span></a></li> <li><a href=""><span>Change Password</span></a></li> <li><a href=""><span>Log Out</span></a></li> </ul> </nav> <!--main-nav--> <div class="container"> <div class="app-content"> <ul class="content-list"> <li> <article> <figure> <img src="https://unsplash.imgix.net/photo-1428930377079-45a584b6dd6b?dpr=2&fit=crop&fm=jpg&h=1575&q=75&w=1050" alt="The Jim Lewis Dalaman Briefcase"> <figcaption> <span class="category">Accessories</span> <h1>Eli DeFaria Dalaman</h1> <span class="price"> &pound;255</span> </figcaption> </figure> </article> </li> </ul> <!--content-list--> </div> <!--app-content--> </div> <!--contaienr--> </div> <!--screen-->

See the Pen Frosty Nav Toggle Effect by Graham Wilsdon (@GrahamWilsdon) on CodePen.

0 Likes
Maan
Maan

21 year old designer, blogger and front-end developer. love to share creative design and inspiration.

Your email address will not be published. Required fields are marked *

div#stuning-header .dfd-stuning-header-bg-container {background-image: url(http://www.downgraf.com/wp-content/uploads/2017/04/login-back.jpg);background-size: cover;background-position: center center;background-attachment: scroll;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 500px;}