Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
Navigation
<h1>Navigation CSS Menu</h1> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Blog</a> <a href="#">Portefolio</a> <a href="#">Contact</a> <div class="animation start-home"></div> </nav>
nav { margin: 27px auto 0; position: relative; width: 590px; height: 50px; background-color: #34495e; border-radius: 8px; font-size: 0; } nav a { line-height: 50px; height: 100%; font-size: 15px; display: inline-block; position: relative; z-index: 1; text-decoration: none; text-transform: uppercase; text-align: center; color: white; cursor: pointer; } nav .animation { position: absolute; height: 100%; top: 0; z-index: 0; transition: all .5s ease 0s; border-radius: 8px; } a:nth-child(1) { width: 100px; } a:nth-child(2) { width: 110px; } a:nth-child(3) { width: 100px; } a:nth-child(4) { width: 160px; } a:nth-child(5) { width: 120px; } nav .start-home, a:nth-child(1):hover~.animation { width: 100px; left: 0; background-color: #1abc9c; } nav .start-about, a:nth-child(2):hover~.animation { width: 110px; left: 100px; background-color: #e74c3c; } nav .start-blog, a:nth-child(3):hover~.animation { width: 100px; left: 210px; background-color: #3498db; } nav .start-portefolio, a:nth-child(4):hover~.animation { width: 160px; left: 310px; background-color: #9b59b6; } nav .start-contact, a:nth-child(5):hover~.animation { width: 120px; left: 470px; background-color: #e67e22; } body { font-size: 12px; font-family: sans-serif; background: #2c3e50; } h1 { text-align: center; margin: 40px 0 40px; text-align: center; font-size: 30px; color: #ecf0f1; text-shadow: 2px 2px 4px #000000; font-family: 'Cherry Swash', cursive; } p { position: absolute; bottom: 20px; width: 100%; text-align: center; color: #ecf0f1; font-family: 'Cherry Swash',cursive; font-size: 16px; } span { color: #2BD6B4; }
27
Navigation Menu
By:
rald_dev
<nav class="navigation"> <div id="hamburger"> <!-- for hamburger menu --> <span></span> <span></span> <span></span> <!-- nav menu--> <ul id="menu"> <a href="#"> <li>Home</li> </a> <a href="#"> <li>About</li> </a> <a href="#"> <li>Info</li> </a> <a href="#"> <li>Contact</li> </a> </ul> </div> </nav>
/*reset */ body { margin: 0; padding: 0; background: #232323; color: #cdcdcd; font-family: "Avenir Next", "Avenir", sans-serif; } #hamburger { display: block; position: relative; top: 50px; left: 50px; z-index: 1; -webkit-user-select: none; user-select: none; } #hamburger a { text-decoration: none; color: #232323; transition: color 0.3s ease; } #hamburger a:hover { color: tomato; } #hamburger input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /*hiding menu*/ z-index: 2; /*place it over the hamburger*/ -webkit-touch-callout: none; } /*span hamburger*/ #hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; } #hamburger span:first-child { transform-origin: 0% 0%; } #hamburger span:nth-last-child(2) { transform-origin: 0% 100%; } /*transform to cross mark*/ #hamburger input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #232323; } /* hinding middle bar */ #hamburger input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } /* last bar opposite direction */ #hamburger input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } /* make the absolute positioned, at the top of the screen */ #menu { position: absolute; width: 300px; margin: 50px; padding-top: 125px; background: #ededed; list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); } #menu li { padding: 10px 0; font-size: 22px; } /* slide from the left */ #hamburger input:checked ~ ul { transform: none; }
26
Hamburger Menu v2
By:
rald_dev
<div class="container"> <div class="hamburger"> <div class="menu"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> </div> </div>
.container { float: left; width: 100%; margin-top: 100px; } .hamburger { width: 60px; height: 60px; margin: 0 auto; display: flex; justify-content: center; align-items: center; position: relative; } .hamburger-init { -webkit-appearance: none; -moz-appearance: none; position: absolute; width: 100%; height: 100%; z-index: 2; cursor: pointer; outline: none; } .menu { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .menu .bar1, .menu .bar2, .menu .bar3 { width: 100%; height: 10px; background: #000; transition: all .3s; } .hamburger-init:checked + .menu .bar1 { transform: translateY(20px) rotate(45deg); } .hamburger-init:checked + .menu .bar2 { opacity: 0; } .hamburger-init:checked + .menu .bar3 { transform: translateY(-20px) rotate(-45deg); }
25
Hamburger Menu
By:
rald_dev
