CSS Navigation

Developer
Alex Loomer
Size
3,129 Kb
Views
24,288
  1. CSS Navigation Previews
  2. CSS Navigation HTML Codes
  3. CSS Navigation CSS Codes
  4. CSS Navigation JS Codes

How do I make an css navigation?

UX navigation concept using only CSS.. What is a css navigation? How do you make a css navigation? This script and codes were developed by Alex Loomer on 25 September 2022, Sunday.

CSS Navigation Previews
IQ Test

CSS Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Navigation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Navigation Button -->
<div id="nav-bar"> <input type="checkbox" class="check" id="checked"> <p>Menu</p> <label class="menu-btn" for="checked"> <span class="bar top"></span> <span class="bar middle"></span> <span class="bar bottom"></span> <span class="menu-btn__text"></span> </label>
<!-- Navigation Links --> <nav class="drawer-menu"> <ul> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Products</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Support</span></a></li> </ul> </nav>
</div>
<!-- Body Content -->
<div id="landing-page"> <h1>Pure <span>CSS</span> Navigation</h1>
</div> <script src="js/index.js"></script>
</body>
</html>

CSS Navigation - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');
body { background: #20242B; font-family: 'Raleway', sans-serif;
}
/* Navigation bar - not visible */
#nav-bar { width: 100%; height: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden;
}
#nav-bar p { padding: 0; color: #D7F2BA; font-weight: lighter; z-index: 9999; text-transform: uppercase; font-size: .65em; letter-spacing: 2px;
}
/* Menu */
.drawer-menu { background: #A0A0A0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 9999; box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 120px 0 120px 0; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .8s; transition-duration: .8s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(-250vh); transform: translateY(-250vh); opacity: 1; overflow: scroll;
}
.drawer-menu ul { padding-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.drawer-menu li { text-align: center; list-style-type: none;
}
.drawer-menu li a { display: block; height: 60px; line-height: 62px; padding: 8px; font-size: 19px; color: #20242B; text-decoration: none; -webkit-transition: all .5s; transition: all .5s; text-transform: uppercase; letter-spacing: 4px; font-size: 1.3em;
}
/* Don't display checkbox */
.check { display: none;
}
/* Menu button - label tag */
.menu-btn { width: 40px; height: 40px; cursor: pointer; z-index: 9999; padding: 0 30px 0 15px;
}
/* Navigation icon */
.bar { display: block; height: 1px; margin-top: 8px; background: #D7F2BA; -webkit-transition: all .5s; transition: all .5s; -webkit-transform-origin: left top; transform-origin: left top;
}
/* Navigation icon bars */
.bar.top { width: 40px;
}
.bar.middle { top: 10px; width: 20px; opacity: 1;
}
.bar.bottom { top: 20px; width: 35px; -webkit-transform-origin: left bottom; transform-origin: left bottom;
}
/* Checked effects */
.check:checked ~ .drawer-menu { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: none; transform: none; opacity: 1; z-index: 999; overflow: scroll;
}
.check:checked ~ .menu-btn .menu-btn__text { visibility: hidden; opacity: 0;
}
.check:checked ~ .menu-btn .bar.top { width: 30px; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.check:checked ~ .menu-btn .bar.middle { opacity: 0; -webkit-transform: translateX(100px); transform: translateX(100px);
}
.check:checked ~ .menu-btn .bar.bottom { width: 30px; margin-top: 11px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
/* Hover strikethrough */
.drawer-menu span { position: relative; display: block; cursor: pointer; overflow: hidden;
}
.drawer-menu span:before,
span:after { content: ''; position: absolute; width: 0%; height: 1px; top: 50%; margin-top: -0.5px; background: #D7F2BA;
}
.drawer-menu span:before { left: -2.5px;
}
.drawer-menu span:after { right: 2.5px; background: #D7F2BA; -webkit-transition: width 0.5s ease-Out; transition: width 0.5s ease-Out;
}
.drawer-menu span:hover:before { background: #D7F2BA; width: 100%; -webkit-transition: width 0.5s ease-Out; transition: width 0.5s ease-Out;
}
.drawer-menu span:hover:after { background: transparent; width: 100%; -webkit-transition: 0s; transition: 0s;
}
/* Body content */
#landing-page { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 90vh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: -80px; overflow: hidden;
}
h1 { font-weight: 300; color: #D7F2BA; letter-spacing: 2px; font-size: 1em;
}
#landing-page span { padding: 10px 0; border-bottom: 1px solid #D7F2BA;
}
@media screen and (min-width:768px) { #landing-page h1 { font-size: 2em; }
}

CSS Navigation - Script Codes JS Codes

// not a damn thing
CSS Navigation - Script Codes
CSS Navigation - Script Codes
Home Page Home
Developer Alex Loomer
Username atloomer
Uploaded September 25, 2022
Rating 3
Size 3,129 Kb
Views 24,288
Do you need developer help for CSS 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!

Alex Loomer (atloomer) Script Codes
Name
Resume
Neature
CSS Masonry Image Gallery
CSS Button Animations
Simple CSS Animated Skill Bars
Photography
CSS Page loader
Pitch Page Using Flexbox
Homepage
Mobile Navigation Bar
Create amazing video scripts 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!