Flat Navigation
How do I make an flat navigation?
A simple flat navigation with a working dropdown menu.. What is a flat navigation? How do you make a flat navigation? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.
Flat Navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Navigation</title> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='info'> <h1>Flat Navigation</h1> <span> Made with <i class='fa fa-heart animated infinite pulse'></i> by <a href='http://andytran.me'>Andy Tran</a> <div class='spoilers'> (Dropdown Menu) | (Very Cool!) </div> </span>
</div>
<div class='nav'> <ul> <li> <a class='logo' href='http://andytran.me'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/logo_(1).svg'> </a> </li> <li> <a href='#portfolio'>Portfolio</a> </li> <li> <a href='#calendar'> Calendar <i class='fa fa-caret-down'></i> </a> <ul class='menu'> <li> <a href='#event_one'>Event #1</a> </li> <li> <a href='#event_two'>Event #2</a> </li> <li> <a href='#event_three'>Event #3</a> </li> </ul> </li> <li> <a href='#resume'>Resume</a> </li> <li> <a href='#blog'>Blog</a> </li> <li> <a href='#contact'> <div class='fa fa-envelope'></div> </a> </li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://codepen.io/andytran/pen/vLmRVp.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flat Navigation - Script Codes CSS Codes
body { background: #e9e9e9; font-family: 'Roboto', sans-serif; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.nav { display: inline-block; background: #FFFFFF; border-radius: 3px; border-top: 2px solid #ffce54; height: 60px;
}
.nav ul { list-style: none; margin: 0; padding: 0;
}
.nav ul li { position: relative; display: inline-block; height: 60px; border-left: 1px solid rgba(0, 0, 0, 0.05); vertical-align: middle; float: left;
}
.nav ul li:first-child,
.nav ul li:nth-child(2),
.nav ul li:last-child { border-left: 0;
}
.nav ul li:nth-child(2) a:before,
.nav ul li:nth-last-child(2) a:before,
.nav ul li:nth-child(2) a:after,
.nav ul li:nth-last-child(2) a:after { -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s;
}
.nav ul li:nth-child(2) > a:before { z-index: 1; position: absolute; top: 0; left: -15px; content: ''; width: 0; height: 0; display: block; border-right: 15px solid #FFFFFF; border-top: 60px solid transparent;
}
.nav ul li:nth-last-child(2) a:after { position: absolute; z-index: 1; top: 0; right: -15px; content: ''; width: 0; height: 0; display: block; border-left: 15px solid #FFFFFF; border-bottom: 60px solid transparent;
}
.nav ul li:last-child a { background: #ffce54; padding: 0 25px 0 30px; color: #FFFFFF;
}
.nav ul li:last-child a:hover { background: #ffce54;
}
.nav ul li a { position: relative; display: block; padding: 0 25px; color: #666666; font-size: 14px; line-height: 60px; text-decoration: none; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s;
}
.nav ul li a:hover { background: #f2f2f2;
}
.nav ul li a:hover:before { border-right: 15px solid #f2f2f2;
}
.nav ul li a:hover:after { border-left: 15px solid #f2f2f2;
}
.nav ul li a.logo { background: #ffce54; width: 30px; height: 30px; padding: 15px 30px 15px 15px; line-height: 1; vertical-align: middle;
}
.nav ul li a.logo:hover { background: #ffce54;
}
.nav ul li a.logo img { width: 100%;
}
.nav ul li a i { margin: 0 0 0 6px;
}
.nav ul li .menu { display: none; position: absolute; background: #FFFFFF; top: 100%; width: 180px; border-top: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 3px solid #ffce54; border-radius: 0 0 3px 3px; overflow: hidden;
}
.nav ul li .menu li { display: block; width: 100%; height: 45px; margin: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.nav ul li .menu li:nth-child(2),
.nav ul li .menu li:nth-last-child(2) { height: 45px;
}
.nav ul li .menu li:nth-child(2) a:before,
.nav ul li .menu li:nth-last-child(2) a:before,
.nav ul li .menu li:nth-child(2) a:after,
.nav ul li .menu li:nth-last-child(2) a:after { content: ''; display: none;
}
.nav ul li .menu li a { background: #FFFFFF; padding: 0 15px 0 30px; color: #666666; line-height: 45px; text-align: left;
}
.nav ul li .menu li a:hover { background: #f2f2f2;
}
.info { width: 300px; margin: 50px auto; text-align: center;
}
.info h1 { margin: 0; padding: 0; font-size: 24px; font-weight: 400; color: #333333;
}
.info span { color: #666666; font-size: 12px;
}
.info span a { color: #000000; text-decoration: none;
}
.info span .fa { color: #ffce54;
}
.info span .spoilers { color: #999999; margin-top: 5px; font-size: 10px;
}
Flat Navigation - Script Codes JS Codes
$(".nav li").hover(function () { $(this).children("ul").stop().delay(200).animate({height: "toggle", opacity: "toggle"}, 200);
});
Developer | Andy Tran |
Username | andytran |
Uploaded | June 12, 2022 |
Rating | 4.5 |
Size | 4,567 Kb |
Views | 161,920 |
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 |
Day 23 - Interactive Wallet | 8,506 Kb |
Code Module - About FAB | 2,762 Kb |
Progress Bar | 4,669 Kb |
The Team - Grid | 7,037 Kb |
CodePen Code Generator | 6,631 Kb |
Article News Card | 5,835 Kb |
Draggable Chatbox | 5,316 Kb |
Code Module - Slide In Banner | 3,466 Kb |
Pure CSS - Menu App | 5,566 Kb |
Material Login Form | 7,138 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 |
Tooltip in table | Roine | 3,713 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Loading animation - freedom purchase | Rocbear | 2,567 Kb |
A bit of elegance | Hackthevoid | 9,095 Kb |
Blank Starter | Mhartington | 2,171 Kb |
Form Labels | Bartuc | 2,717 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 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!