One - Side Navigation

Developer
Ryan Hulseberg
Size
4,691 Kb
Views
30,360
  1. One - Side Navigation Previews
  2. One - Side Navigation HTML Codes
  3. One - Side Navigation CSS Codes

How do I make an one - side navigation?

What is a one - side navigation? How do you make a one - side navigation? This script and codes were developed by Ryan Hulseberg on 11 September 2022, Sunday.

One - Side Navigation Previews
IQ Test

One - Side Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>One - Side Navigation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://themify.me/wp-content/themes/themify-v3/themify-icons/themify-icons.css?ver=1.2.2'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <aside class="sidebar"> <div class="main-nav"> <ul> <li class='logo'> <a>One</a>
<!-- <span><img class="logo" height="34" src="https://s33.postimg.org/rbs19qhkv/ou_logo.png"></span> --> <span>Logo</span> </li> <li> <a>Student</a> <span class="mdi-social-school active"></span> </li> <li> <a>Student</a> <span class="mdi-action-wallet-travel"></span> </li> <div class="sidebar__separator"></div> <li> <a>Advisor</a> <span class="mdi-image-brightness-1"></span> </li> <li> <a>Faculty</a> <span class="mdi-image-brightness-1"></span> </li> <li> <a>Executive</a> <span class="mdi-image-brightness-1"></span> </li> </ul> </div>
</aside>
<nav class="top-nav">
</nav>
<main> <div class="notification-container"> <ul class="card-container"> <li> <div class="card"> <div class="card__button"> <a href="#">Get Started</a> </div> </div> </li> <li> <div class="card"> <div class="card__button"> <a href="#">Get Started</a> </div> </div> </li> <li> <div class="card"> <div class="card__button"> <a href="#">Get Started</a> </div> </div> </li> </ul> </div> <div class="class-container"> <div class="class__updates"></div> </div>
</main>
</body>
</html>

One - Side Navigation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
body { font-family: 'open sans'; background: #FBFBFB;
}
.sidebar { position: fixed; top: 0; left: 0; width: 268px; height: 100%; background-color: white; border-right: 1px solid #D4D8DF; color: #fff; overflow: hidden; -webkit-transition: width .3s ease-in-out; transition: width .3s ease-in-out; z-index: 100;
}
.sidebar__separator { border-radius: 50%; background-color: #141414; height: 5px; margin: 16px 34px; left: -1px; position: relative; width: 5px;
}
.sidebar .main-nav ul li a { opacity: 1; left: 0; -webkit-transition-delay: .2s; transition-delay: .2s;
}
.top-nav { height: 60px; background: white; border-bottom: 1px solid #D4D8DF;
}
.main-nav ul li { min-height: 50px; line-height: 50px; position: relative; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; color: #292A33;
}
.main-nav ul li.logo { line-height: 70px; margin-bottom: 20px;
}
.main-nav ul li.logo span { color: black; opacity: 1;
}
.main-nav ul li.logo span:before { color: #ea4c89; font-size: 2.15em;
}
.main-nav ul li.logo span img { vertical-align: middle;
}
.main-nav ul li a { display: block; padding-left: 70px; position: relative; left: 15px; opacity: 0; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition-delay: 0s; transition-delay: 0s; cursor: pointer; font-weight: 300;
}
.main-nav ul li span { position: absolute; width: 70px; height: 50px; top: 0; left: 0; text-align: center; opacity: .3; -webkit-transition: .25s ease; transition: .25s ease;
}
.main-nav ul li span.active { opacity: 1;
}
.main-nav ul li span.active:hover { opacity: 1;
}
.main-nav ul li span.mdi-image-brightness-1:before { font-size: 1.75em;
}
.main-nav ul li span:before { font-size: 1.25em; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
.main-nav ul li:hover span { cursor: pointer; opacity: .4;
}
@font-face { font-family: "Material-Design-Icons"; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/Material-Design-Icons.eot"); src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/Material-Design-Icons.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/Material-Design-Icons.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/Material-Design-Icons.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/Material-Design-Icons.svg#Material-Design-Icons") format("svg"); font-weight: normal; font-style: normal;
}
[class^="mdi-"], .select-wrapper span.select-dropdown:after, [class*=" mdi-"] { font-family: "Material-Design-Icons"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 18px;
}
.mdi-social-school:before { content: "\e8de";
}
.mdi-action-work:before { content: "\e69f";
}
.mdi-action-wallet-travel:before { content: "\e69e";
}
.mdi-image-brightness-1:before { content: "\e7da";
}
main { padding-left: 268px;
}
.notification-container { background: #EDEDED; padding: 40px; overflow: hidden;
}
.card-container { box-sizing: border-box; width: 100%; float: left; padding-left: 10px; padding-right: 10px; margin: 0 auto; float: none; overflow: hidden;
}
.card-container li { box-sizing: border-box; width: 25%; float: left; padding-left: 10px; padding-right: 10px; padding: 0 10px;
}
.card { background: white; height: 225px; box-shadow: 0px 1px 2px 0px rgba(40, 42, 51, 0.2); position: relative;
}
.card__button { height: 56px; background: #FAFBFF; border-top: 1px solid #EBECF0; position: absolute; bottom: 0; width: 100%;
}
.card__button a { color: #1DA8FF; text-decoration: none; padding-left: 20px; line-height: 56px;
}
.class-container { padding: 40px; overflow: hidden;
}
.class__updates { box-sizing: border-box; width: 100%; float: left; padding-left: 10px; padding-right: 10px; margin: 0 auto; float: none; background: white; box-shadow: 0px 1px 2px 0px rgba(40, 42, 51, 0.2); height: 748px;
}
One - Side Navigation - Script Codes
One - Side Navigation - Script Codes
Home Page Home
Developer Ryan Hulseberg
Username ryanhulseberg
Uploaded September 11, 2022
Rating 3
Size 4,691 Kb
Views 30,360
Do you need developer help for One - Side Navigation?

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!

Ryan Hulseberg (ryanhulseberg) Script Codes
Name
One - Expansion Table
One, Modal
One - Drawer Interaction
One - Dropdown Mobile
One - Loading Animation
One - Loading Indicator
Design System, Buttons
One - Icon Tooltip
One - Announcement Banner
One - Typography
Create amazing art & images 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!