Dropdown Navigation

Developer
Kyle Houston
Size
2,751 Kb
Views
30,360
  1. Dropdown Navigation Previews
  2. Dropdown Navigation HTML Codes
  3. Dropdown Navigation CSS Codes
  4. Dropdown Navigation JS Codes

How do I make an dropdown navigation?

What is a dropdown navigation? How do you make a dropdown navigation? This script and codes were developed by Kyle Houston on 25 August 2022, Thursday.

Dropdown Navigation Previews
IQ Test

Dropdown Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dropdown Navigation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { font-family: Arial; font-size: 16px; line-height: 16px; color: white; padding: 0 0 20px 0;
}
a { text-decoration: none; transition: background .3s;
}
nav { background: #9BD2C7;
}
/* Main Nav */
nav > ul {
}
nav > ul > li { display: inline-block; position: relative; height: 50px; line-height: 50px; border-right: 1px solid rgba(0,0,0,.2); margin-right: -4px;
}
nav > ul > li > a { color: white; display: block; line-height: 50px; padding: 0 35px;
}
nav > ul > li > a:hover { background: rgba(255,255,255,.2);
}
/* Sub Nav */
nav > ul > li > ul { position: absolute; top: 100%; left: 0; background: #2c2c2c; width: 200px; z-index: 3; display: none;
}
nav > ul > li > ul > li { border-bottom: 1px solid rgba(255,255,255,.1);
}
nav > ul > li > ul > li > a { color: #eee; display: block; padding: 0 35px;
}
nav > ul > li > ul > li > a:hover { background: rgba(255,255,255,.1);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav id="main-nav"> <ul> <li><a href="#">Link</a> <ul> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a> <ul> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a> <ul> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> <li><a href="#">Inner Link</a></li> </ul> </li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cherne.net/brian/resources/jquery.hoverIntent.minified.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dropdown Navigation - Script Codes CSS Codes

body { font-family: Arial; font-size: 16px; line-height: 16px; color: white; padding: 0 0 20px 0;
}
a { text-decoration: none; transition: background .3s;
}
nav { background: #9BD2C7;
}
/* Main Nav */
nav > ul {
}
nav > ul > li { display: inline-block; position: relative; height: 50px; line-height: 50px; border-right: 1px solid rgba(0,0,0,.2); margin-right: -4px;
}
nav > ul > li > a { color: white; display: block; line-height: 50px; padding: 0 35px;
}
nav > ul > li > a:hover { background: rgba(255,255,255,.2);
}
/* Sub Nav */
nav > ul > li > ul { position: absolute; top: 100%; left: 0; background: #2c2c2c; width: 200px; z-index: 3; display: none;
}
nav > ul > li > ul > li { border-bottom: 1px solid rgba(255,255,255,.1);
}
nav > ul > li > ul > li > a { color: #eee; display: block; padding: 0 35px;
}
nav > ul > li > ul > li > a:hover { background: rgba(255,255,255,.1);
}

Dropdown Navigation - Script Codes JS Codes

var mainNav = $('#main-nav'), mainNavCtn = mainNav.children('ul'), mainNavItems = mainNavCtn.children('li'), subNav;
mainNavItems.hoverIntent({ over: function() { var el = $(this); if (el.children('ul').length > 0) { subNav = el.children('ul'); subNav.stop(true,true).slideDown(); } }, out: function() { if ( !subNav ) return;	subNav.stop(true,false).slideUp(); }, timeout: 300, interval: 200
});
Dropdown Navigation - Script Codes
Dropdown Navigation - Script Codes
Home Page Home
Developer Kyle Houston
Username styler
Uploaded August 25, 2022
Rating 3
Size 2,751 Kb
Views 30,360
Do you need developer help for Dropdown 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!

Kyle Houston (styler) Script Codes
Name
Floating Material Input
Backbone 101 - Movie App
Flexbox thumbnail grid
Velocity Rotate Test
Flexbox - Align a single element to the right inside a flex container
Circle border hover effect
ReactJS Instragram Feed
Meet the team
Material Design Ripple Button
Fluid grid
Create amazing love letters 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!