Flat sidebar
How do I make an flat sidebar?
Flat sidebar with animations, fadeouts, lots of pseudo elements and turquoise color.. What is a flat sidebar? How do you make a flat sidebar? This script and codes were developed by Miro Karilahti on 07 July 2022, Thursday.
Flat sidebar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat sidebar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <div class="icon fi-list"></div> <header><a href="#">Header</a></header> <ul> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> <li><a href="#">Fourth</a></li> <li><a href="#">Fifth</a></li> <li><a href="#">Sixth</a></li> <li><a href="#">Seventh</a></li> </ul>
</nav>
<div id="content"> <div id="wrap"> <h1>Flat sidebar</h1> <p>Animations, fadeouts and all.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum officia impedit consectetur voluptas esse beatae quos mollitia quibusdam molestiae magni laboriosam ea minus animi. Voluptas dignissimos exercitationem animi qui assumenda perspiciatis consectetur eum excepturi veritatis harum optio vel dolorem culpa doloribus a? Eius expedita rerum quidem quibusdam doloribus vel voluptates?</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Flat sidebar - Script Codes CSS Codes
/* External CSS */
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
@import url('http://tyy.li/foundation-icons/foundation-icons.css');
/* Simple reset */
*{ margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
/* Basic elements */
body{ background: #000; font-family: 'Open Sans', sans-serif; color: #333;
}
/* Navigation */
nav{ width: 300px; height: 100%; background: #333; position: fixed; top: 0; left: -236px; z-index: 2; transition: left .7s; -webkit-transition: left .7s;
}
nav:hover{ left: 0;
}
nav:hover ~ #content{ opacity: .3;
}
nav a, nav a:hover{ text-decoration: none;
}
/* Navigation -- Icon */
nav .icon{ width: 32px; height: 32px; float: right; margin: 20px 16px 0 0; font-size: 36px; text-align: center; line-height: 32px; color: rgba(0,0,0,.3); transition: opacity .7s; -webkit-transition: opacity .7s;
}
nav:hover .icon{ opacity: 0;
}
/* Navigation -- Header */
nav header{ margin: 40px 20px 30px;
}
nav header a{ font-size: 2.7em; font-weight: 300; text-transform: uppercase; color: rgba(240,240,240,.7);
}
nav header a:hover{ color: #eee;
}
/* Navigation -- Links */
nav ul{ padding-left: 0; list-style: none;
}
nav li a{ display: block; border-left: 3px solid transparent; padding: 16px 20px; font-weight: 600; color: rgba(200,200,200,.5);
}
nav li a:hover{ background: rgba(0,0,0,.1); border-color: #1b9; color: #eee;
}
nav li a:before{ content: ''; width: 0; height: 0; display: inline-block; margin: 3px 0 0 -20px; border: 8px solid transparent;
}
nav li a:hover:before{ border-left-color: #1b9;
}
/* Content */
#content{ width: 100%; height: 100%; background: #f0f0f0; position: fixed; top: 0; left: 0; z-index: 0; overflow: auto; transition: opacity .7s; -webkit-transition: opacity .7s;
}
#content #wrap{ width: 900px; min-height: 100%; background: #fff; position: absolute; top: 0; left: 50%; margin-left: -450px; padding: 30px 20px;
}
#content h1{ font-size: 3.2em; font-weight: 300; color: #444;
}
#content p{ padding: 4px 0; line-height: 1.5em;
}
@media screen and (max-width: 1000px){ #content{ background: #fff; } #content #wrap{ width: 90%; left: auto; margin-left: 10%; }
}
Developer | Miro Karilahti |
Username | miroot |
Uploaded | July 07, 2022 |
Rating | 3.5 |
Size | 2,664 Kb |
Views | 66,792 |
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!
Name | Size |
Background change in pure CSS | 3,236 Kb |
Pure CSS Card Deck | 3,245 Kb |
Login Form | 2,519 Kb |
Calendar | 2,033 Kb |
Simple personal profile | 2,856 Kb |
Color changing text | 2,068 Kb |
Expanding Photo Stack | 2,083 Kb |
Button with sliding information | 2,387 Kb |
Long Shadow Camera Icon | 1,825 Kb |
Navigation | 2,298 Kb |
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!
Name | Username | Size |
Subtle site navigation with description | Necks | 3,206 Kb |
Cool audio | Bigliam | 1,868 Kb |
Algorithm practice | Abensur | 5,620 Kb |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
Hmmm... | Rk007 | 4,848 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Adding Items | Valhead | 4,008 Kb |
Css color for svg | Ademilter | 2,392 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!