"Left-Nav-Smooth"
Bootstrap 4.0.0 Snippet by mrp3k

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class='brand'> <a href='https://www.jamiecoulter.co.uk' target='_blank'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/logo.png'> </a> </div> <!-- / Begin Body --> <div class='swanky'> <!-- / Introduction Block --> <div class='swanky_title'> <h1>Swanky Lil Drop Down Menu V2.0</h1> <p>Pure CSS Drop down menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.</p> <div class='swanky_title__social'> <a href='https://www.twitter.com/jamiecoulter89' target='_blank'> <div class='slide'> <div class='arrow'> <div class='stem'></div> <div class='point'></div> </div> </div> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/tw.png'> Twitter </a> </div> <div class='swanky_title__social'> <a href='https://www.codepen.io/jcoulterdesign/' target='_blank'> <div class='slide'> <div class='arrow'> <div class='stem'></div> <div class='point'></div> </div> </div> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cp.png'> Codepen </a> </div> </div> <!-- /////////// Begin Dropdown //////////// --> <div class='swanky_wrapper'> <input id='Dashboard' name='radio' type='radio'> <label for='Dashboard'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/dash.png'> <span>Dashboard</span> <div class='lil_arrow'></div> <div class='bar'></div> <div class='swanky_wrapper__content'> <ul> <li>Tools</li> <li>Reports</li> <li>Analytics</li> <li>Code Blocks</li> </ul> </div> </label> <input id='Sales' name='radio' type='radio'> <label for='Sales'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/del.png'> <span>Sales</span> <div class='lil_arrow'></div> <div class='bar'></div> <div class='swanky_wrapper__content'> <ul> <li>New Sales</li> <li>Expired Sales</li> <li>Sales Reports</li> <li>Deliveries</li> </ul> </div> </label> <input id='Messages' name='radio' type='radio'> <label for='Messages'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mess.png'> <span>Messages</span> <div class='lil_arrow'></div> <div class='bar'></div> <div class='swanky_wrapper__content'> <ul> <li>Inbox</li> <li>Outbox</li> <li>Sent</li> <li>Archived</li> </ul> </div> </label> <input id='Users' name='radio' type='radio'> <label for='Users'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/users.png'> <span>Users</span> <div class='lil_arrow'></div> <div class='bar'></div> <div class='swanky_wrapper__content'> <ul> <li>New User</li> <li>User Groups</li> <li>Permissions</li> <li>Passwords</li> </ul> </div> </label> <input id='Settings' radio='radio' type='radio'> <label for='Settings'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/set.png'> <span>Settings</span> <div class='lil_arrow'></div> <div class='swanky_wrapper__content'> <ul> <li>Databases</li> <li>Design</li> <li>Change User</li> <li>Log Out</li> </ul> </div> </label> </div> <!-- /////////// End Dropdown //////////// --> </div> <!-- / My Footer --> <div class='love'> <p>Made with <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/love_copy.png" /> by <a href='https://www.jamiecoulter.co.uk' target='_blank'> Jcoulterdesign </a></p> </div>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300); ul { padding: 0; margin: 0; } li { list-style-type: none; } input[type='radio'] { display: none; } label { cursor: pointer; } ::-webkit-scrollbar { display: none; } body .swanky { margin: auto; top: 0; bottom: 0; left: 0; right: 0; } body { height: 100vh; font-weight: 500; font-family: "Roboto", sans-serif; background: -webkit-linear-gradient(315deg, #8254EA 0%, #E86DEC 100%); background: linear-gradient(135deg, #8254EA 0%, #E86DEC 100%); -webkit-font-smoothing: antialiased; font-size: 12px; } body .swanky { -webkit-perspective: 600px; perspective: 600px; width: 700px; position: absolute; margin: auto; height: 360px; } body .swanky_title { float: right; text-align: left; width: 400px; color: white; position: relative; top: 70px; } body .swanky_title__social a { position: relative; overflow: hidden; width: 140px; margin-right: 15px; text-decoration: none; padding: 0px 0px 5px 0px; height: 40px; border: 2px solid white; float: left; color: white; font-size: 12px; font-weight: 400; margin-top: 20px; } body .swanky_title__social a .slide { height: 45px; width: 100px; float: left; position: absolute; -webkit-transform: skew(20deg); transform: skew(20deg); left: -120px; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: .2s; transition-duration: .2s; background: white; } body .swanky_title__social a .slide .arrow { position: absolute; right: 31px; top: 24px; opacity: 0; -webkit-transform: skew(-20deg); transform: skew(-20deg); } body .swanky_title__social a .slide .arrow .stem { width: 10px; height: 2px; background: #858490; } body .swanky_title__social a .slide .arrow .point { width: 6px; height: 6px; border-right: 2px solid #858490; top: -3px; right: 1px; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: 2px solid #858490; } body .swanky_title__social a img { width: 16px; margin-left: 10px; position: relative; margin-right: 8px; -webkit-transition-property: margin-left; transition-property: margin-left; -webkit-transition-duration: .1s; transition-duration: .1s; margin-top: 10px; top: 4px; } body .swanky_title__social a:hover > .slide { left: -70px; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: .1s; transition-duration: .1s; } body .swanky_title__social a:hover > img { margin-left: 40px; -webkit-transition-property: margin-left; transition-property: margin-left; -webkit-transition-duration: .1s; transition-duration: .1s; } body .swanky_title__social a:hover > .slide .arrow { right: 11px; opacity: 1; -webkit-transition-property: right,opacity; transition-property: right,opacity; -webkit-transition-delay: .07s; transition-delay: .07s; -webkit-transition-duration: .2s; transition-duration: .2s; } body .swanky .intro { float: right; color: white; width: 370px; top: 50px; position: relative; } body .swanky .intro h1 { text-shadow: 0px 2px rgba(0, 0, 0, 0.26); } body .swanky .intro p { line-height: 20px; text-shadow: 0px 1px rgba(0, 0, 0, 0.26); } body .swanky_wrapper { width: 225px; height: auto; overflow: hidden; border-radius: 4px; background: #2a394f; } body .swanky_wrapper label { padding: 25px; float: left; height: 72px; border-bottom: 1px solid #293649; position: relative; width: 100%; color: #eff4fa; -webkit-transition: text-indent .15s, height .3s; transition: text-indent .15s, height .3s; box-sizing: border-box; } body .swanky_wrapper label img { margin-right: 10px; position: relative; top: 2px; width: 16px; } body .swanky_wrapper label span { position: relative; top: -3px; } body .swanky_wrapper label:hover { background: #212e41; border-bottom: 1px solid #2A394F; text-indent: 4px; } body .swanky_wrapper label:hover .bar { width: 100%; } body .swanky_wrapper label .bar { width: 0px; -webkit-transition: width .15s; transition: width .15s; height: 2px; position: absolute; display: block; background: #355789; bottom: 0; left: 0; } body .swanky_wrapper label .lil_arrow { width: 5px; height: 5px; -webkit-transition: transform 0.8s; -webkit-transition: -webkit-transform 0.8s; transition: -webkit-transform 0.8s; transition: transform 0.8s; transition: transform 0.8s, -webkit-transform 0.8s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); border-top: 2px solid white; border-right: 2px solid white; float: right; position: relative; top: 6px; right: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } body .swanky_wrapper__content { position: absolute; display: none; overflow: hidden; left: 0; width: 100%; } body .swanky_wrapper__content li { width: 100%; opacity: 0; left: -100%; background: #15a4fa; padding: 25px 0px; text-indent: 25px; box-shadow: 0px 0px #126CA1 inset; -webkit-transition: box-shadow .3s,text-indent .3s; transition: box-shadow .3s,text-indent .3s; position: relative; } body .swanky_wrapper__content li:hover { background: #0c93e4; box-shadow: 3px 0px #126CA1 inset; -webkit-transition: box-shadow .3s linear,text-indent .3s linear; transition: box-shadow .3s linear,text-indent .3s linear; text-indent: 31px; } body .swanky_wrapper__content .clear { clear: both; } input[type='radio']:checked + label .swanky_wrapper__content { display: block; top: 68px; border-bottom: 1px solid #212e41; } input[type="radio"]:checked + label > .lil_arrow { -webkit-transition: -webkit-transform 0.8s; transition: -webkit-transform 0.8s; transition: transform 0.8s; transition: transform 0.8s, -webkit-transform 0.8s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transform: rotate(135deg); transform: rotate(135deg); border-top: 2px solid #14a3f9; border-right: 2px solid #14a3f9; } input[type='radio']:checked + label { height: 325px; background: #212e41; text-indent: 4px; -webkit-transition-property: height; transition-property: height; -webkit-transition-duration: .6s; transition-duration: .6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } input[type='radio']:checked + label .bar { width: 0; } input[type='radio']:checked + label li:nth-of-type(1) { -webkit-animation: in 0.15s 0.575s forwards; animation: in 0.15s 0.575s forwards; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-animation: in 0.15s 0.575s forwards; -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } input[type='radio']:checked + label li:nth-of-type(2) { -webkit-animation: in 0.15s 0.7s forwards; animation: in 0.15s 0.7s forwards; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-animation: in 0.15s 0.7s forwards; -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } input[type='radio']:checked + label li:nth-of-type(3) { -webkit-animation: in 0.15s 0.825s forwards; animation: in 0.15s 0.825s forwards; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-animation: in 0.15s 0.825s forwards; -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } input[type='radio']:checked + label li:nth-of-type(4) { -webkit-animation: in 0.15s 0.95s forwards; animation: in 0.15s 0.95s forwards; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-animation: in 0.15s 0.95s forwards; -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } @-webkit-keyframes in { from { left: -100%; opacity: 0; } to { left: 0; opacity: 1; } } @keyframes in { from { left: -100%; opacity: 0; } to { left: 0; opacity: 1; } } .love { position: absolute; right: 20px; bottom: 0px; font-size: 11px; font-weight: normal; } .love p { color: white; font-weight: normal; font-family: 'Open Sans', sans-serif; } .love a { color: white; font-weight: 700; text-decoration: none; } .love img { position: relative; top: 3px; margin: 0px 4px; width: 10px; } .brand { position: absolute; left: 20px; bottom: 14px; } .brand img { width: 30px; }
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >/* No thanks! */ //# sourceURL=pen.js </script>

Related: See More


Questions / Comments: