This is a navigation menu developed by jquery. It is suitable for the portal website's personal user center background. The effects and aesthetics are both very good. Previously we introduced a very cool menu navigation implemented by jquery and css3. This is a navigation menu developed by jquery. It is suitable for the portal website's personal user center background. The Effect and appearance are both very good. Let's take a look:
Source code download
Let's take a look at the implementation code:
Html code:
- Profile
- Messages 12
- Settings
- Account
- Profile
- Secruity & Privacy
- Password
- Notification
- Help
- FAQ's
- Submit a Ticket
- Network Status
- Logout
Css code:
body{background: #f7f7f7 url("1.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: #34495e; /* 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;}
Js Code:
$('.sub-menu ul').hide();$(".sub-menu").click(function () {$(this).children("ul").slideToggle("100");$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");}); //@ sourceURL=pen.js