Swanky Pure CSS Drop Down Menu V2.0

Developer
Andres
Size
7,247 Kb
Views
34,408
  1. Swanky Pure CSS Drop Down Menu V2.0 Previews
  2. Swanky Pure CSS Drop Down Menu V2.0 HTML Codes
  3. Swanky Pure CSS Drop Down Menu V2.0 CSS Codes
  4. Swanky Pure CSS Drop Down Menu V2.0 JS Codes

How do I make an swanky pure css drop down menu v2.0?

Pure CSS Drop down menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.. What is a swanky pure css drop down menu v2.0? How do you make a swanky pure css drop down menu v2.0? This script and codes were developed by Andres on 26 August 2022, Friday.

Swanky Pure CSS Drop Down Menu V2.0 Previews
IQ Test

Swanky Pure CSS Drop Down Menu V2.0 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Swanky Pure CSS Drop Down Menu V2.0</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> c// My brand
<div class='brand'> <a href='http://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='http://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='http://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='checkbox'> <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='checkbox'> <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='checkbox'> <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='checkbox'> <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' name='radio' type='checkbox'> <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='http://www.jamiecoulter.co.uk' target='_blank'> Jcoulterdesign </a></p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Swanky Pure CSS Drop Down Menu V2.0 - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
ul { padding: 0; margin: 0;
}
li { list-style-type: none;
}
input[type='checkbox'] { 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='checkbox']:checked + label .swanky_wrapper__content { display: block; top: 68px; border-bottom: 1px solid #212e41;
}
input[type="checkbox"]: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='checkbox']: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='checkbox']:checked + label .bar { width: 0;
}
input[type='checkbox']: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='checkbox']: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='checkbox']: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='checkbox']: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;
}

Swanky Pure CSS Drop Down Menu V2.0 - Script Codes JS Codes

/* No thanks! */
Swanky Pure CSS Drop Down Menu V2.0 - Script Codes
Swanky Pure CSS Drop Down Menu V2.0 - Script Codes
Home Page Home
Developer Andres
Username Angelfire
Uploaded August 26, 2022
Rating 3
Size 7,247 Kb
Views 34,408
Do you need developer help for Swanky Pure CSS Drop Down Menu V2.0?

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!

Andres (Angelfire) Script Codes
Name
Simple HTML5 CSS3 JS Project
Vue 2.0 Intro
Social Media Button
Weather App
Food Widget by Andreea Nicolaescu
CSS3 animated Pricing tables
Flexbox Admin Template
Collection CSS3 buttons
Simple Dashboard Search
Chart.js Infobox
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!