Flat Vertical Navigation 2.0

Developer
Andy Tran
Size
4,126 Kb
Views
62,744
  1. Flat Vertical Navigation 2.0 Previews
  2. Flat Vertical Navigation 2.0 HTML Codes
  3. Flat Vertical Navigation 2.0 CSS Codes
  4. Flat Vertical Navigation 2.0 JS Codes

How do I make an flat vertical navigation 2.0?

A simple flat vertical navigation with multi animated drop down menu. Also including Font Awesome and Animate.css. What is a flat vertical navigation 2.0? How do you make a flat vertical navigation 2.0? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Flat Vertical Navigation 2.0 Previews
IQ Test

Flat Vertical Navigation 2.0 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Vertical Navigation 2.0</title> <link rel='stylesheet prefetch' href='http://daneden.github.io/animate.css/animate.min.css'>
<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" href="css/style.css">
</head>
<body> <nav class='animated bounceInDown'> <ul> <li> <a href='#profile'> <div class='fa fa-user'></div> Profile </a> </li> <li> <a href='#message'> <div class='fa fa-envelope'></div> Messages <span class='badge right'>12</span> </a> </li> <li class='sub-menu'> <a href='#settings'> <div class='fa fa-gear'></div> Settings <div class='fa fa-caret-down right'></div> </a> <ul> <li> <a href='#settings'> Account </a> </li> <li> <a href='#settings'> Profile </a> </li> <li> <a href='#settings'> Secruity &amp; Privacy </a> </li> <li> <a href='#settings'> Password </a> </li> <li> <a href='#settings'> Notification </a> </li> </ul> </li> <li class='sub-menu'> <a href='#message'> <div class='fa fa-question-circle'></div> Help <div class='fa fa-caret-down right'></div> </a> <ul> <li> <a href='#settings'> FAQ's </a> </li> <li> <a href='#settings'> Submit a Ticket </a> </li> <li> <a href='#settings'> Network Status </a> </li> </ul> </li> <li> <a href='#message'> <div class='fa fa-sign-out'></div> Logout </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 Vertical Navigation 2.0 - 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: #c0392b; /* IE Fallback */ background: rgba(52, 73, 94, 0.8); width: 100%; height: 100%;
}
nav { position: absolute; top: 50%; left: 50%; width: 360px; margin: -78px 0 100px -180px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
nav ul { list-style: none; margin: 0; padding: 0;
}
nav ul li { /* Sub Menu */
}
nav ul li a { display: block; background: #3498db; padding: 10px 15px; color: #fff; text-decoration: none; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear;
}
nav ul li a:hover { background: #2980b9;
}
nav ul li a .fa { width: 16px; text-align: center; margin-right: 5px;
}
nav ul li a .badge { display: inline-block; background: #fff; /* IE Fallback */ background: rgba(255, 255, 255, 0.2); padding: 3px 7px; color: #fff; font-size: 12px; font-weight: 800;
}
nav ul li ul li a { background: #444; border-left: 4px solid transparent; padding: 10px 20px;
}
nav ul li ul li a:hover { background: #333; border-left: 4px solid #3498db;
}
/* Float Right/Left */
.right { float: right;
}
.left { float: left;
}

Flat Vertical Navigation 2.0 - Script Codes JS Codes

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () { $(this).parent(".sub-menu").children("ul").slideToggle("100"); $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
Flat Vertical Navigation 2.0 - Script Codes
Flat Vertical Navigation 2.0 - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4.5
Size 4,126 Kb
Views 62,744
Do you need developer help for Flat Vertical Navigation 2.0?

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
Flat Horizontal Navigation
Flat Login Form
Article News Card
Planner Dashboard
Material Login Form
The Team - Grid
Material Playing Cards
Code Module - About FAB
Sparked Dashboard
Login Form - Modal
Create amazing captions 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!