Flat Horizontal Navigation

Developer
Andy Tran
Size
3,783 Kb
Views
68,816
  1. Flat Horizontal Navigation Previews
  2. Flat Horizontal Navigation HTML Codes
  3. Flat Horizontal Navigation CSS Codes
  4. Flat Horizontal Navigation JS Codes

How do I make an flat horizontal navigation?

A flat horizontal navigation that uses jQuery for a clean dropdown menu alongside with animate.css for the nice flip at the beginning.. What is a flat horizontal navigation? How do you make a flat horizontal navigation? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Flat Horizontal Navigation Previews
IQ Test

Flat Horizontal Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Horizontal Navigation</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'>
<link rel='stylesheet prefetch' href='http://andytran.me/lib/css/animate.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class='animated flipInX'> <ul> <li> <a href='#'> <div class='fa fa-home'></div> </a> </li> <li> <a href='#'> About </a> </li> <li class='sub-menu'> <a href='#'> Products <i class='fa fa-angle-down'></i> </a> <ul> <li> <a href='#'> Product Item </a> </li> <li> <a href='#'> Product Item </a> </li> <li> <a href='#'> Product Item </a> </li> </ul> </li> <li class='sub-menu'> <a href='#'> Services <i class='fa fa-angle-down'></i> </a> <ul> <li> <a href='#'> Product Item </a> </li> <li> <a href='#'> Product Item </a> </li> <li> <a href='#'> Product Item </a> </li> </ul> </li> <li> <a href='#'> Contact Us </a> </li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat Horizontal Navigation - Script Codes CSS Codes

body { background: #f7f7f7 url("http://38.media.tumblr.com/c026c2203f47be8d0f3fb81f6c5aee25/tumblr_n2hutxfrNr1tubinno1_1280.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: "Roboto"; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body::before { content: ''; position: fixed; z-index: -1; top: 0; left: 0; background: #e74c3c; /* IE Fallback */ background: rgba(67, 74, 84, 0.8); width: 100%; height: 100%;
}
nav { position: absolute; width: 480px; top: 50%; left: 50%; margin: -23px 0 0 -240px;
}
nav ul { background: #48cfad; list-style: none; margin: 0; padding: 0;
}
nav ul li { position: relative; display: inline-block; margin-right: -4px; text-align: center;
}
nav ul li:first-child a { background: #37bc9b; width: 49px; padding: 15px 0;
}
nav ul li:last-child { margin: 0;
}
nav ul li a { display: block; background: #48cfad; padding: 15px 20px; color: #fff; font-size: 14px; text-decoration: none; transition: 0.2s linear;
}
nav ul li a:hover { background: #37bc9b;
}
nav ul li ul { position: absolute; top: 100%; left: 0; width: 240px; border-bottom: 4px solid #48cfad;
}
nav ul li ul li { display: block; width: 100%; margin: 0; text-align: left;
}
nav ul li ul li a { display: block; background: #3a3a3a; padding: 10px 15px;
}
nav ul li ul li a:first-child { background: #3a3a3a; width: auto; border-left: 4px solid transparent; padding: 10px 15px; font-size: 14px;
}
nav ul li ul li a:hover { background: #333; border-left: 4px solid #48cfad;
}

Flat Horizontal Navigation - Script Codes JS Codes

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () { $(this).parent(".sub-menu").children("ul").slideToggle("200"); $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});
Flat Horizontal Navigation - Script Codes
Flat Horizontal Navigation - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4.5
Size 3,783 Kb
Views 68,816
Do you need developer help for Flat Horizontal 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!

Andy Tran (andytran) Script Codes
Name
Material Playing Cards
Flat Login Form
Planner Dashboard
Login Form - Modal
Code Module - Slide In Banner
Progress Bar
Material Login Form
Flat Navigation
Code Module - Floating Action Menu
Information Card Slider
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!