HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<header>
<div class="cd-dropdown-wrapper">
<a class="cd-dropdown-trigger" href="#0">Dropdown</a>
<nav class="cd-dropdown">
<h2>Title</h2>
<a href="#0" class="cd-close">Close</a>
<ul class="cd-dropdown-content">
<li>
<form class="cd-search">
<input type="search" placeholder="Search...">
</form>
</li>
<li class="has-children">
<a href="https://codyhouse.co/?p=748">Clothing</a>
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="https://codyhouse.co/?p=748">All Clothing</a></li>
<li class="has-children">
<a href="https://codyhouse.co/?p=748">Accessories</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="https://codyhouse.co/?p=748">All Accessories</a></li>
<li class="has-children">
<a href="#0">Beanies</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Accessories</a></li>
<li class="see-all"><a href="https://codyhouse.co/?p=748">All Benies</a></li>
<li><a href="https://codyhouse.co/?p=748">Caps & Hats</a></li>
<li><a href="https://codyhouse.co/?p=748">Gifts</a></li>
<li><a href="https://codyhouse.co/?p=748">Scarves & Snoods</a></li>
</ul>
</li>
<li class="has-children">
<a href="#0">Caps & Hats</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Accessories</a></li>
<li class="see-all"><a href="https://codyhouse.co/?p=748">All Caps & Hats</a></li>
<li><a href="https://codyhouse.co/?p=748">Beanies</a></li>
<li><a href="https://codyhouse.co/?p=748">Caps</a></li>
<li><a href="https://codyhouse.co/?p=748">Hats</a></li>
</ul>
</li>
<li><a href="https://codyhouse.co/?p=748">Glasses</a></li>
<li><a href="https://codyhouse.co/?p=748">Gloves</a></li>
<li><a href="https://codyhouse.co/?p=748">Jewellery</a></li>
<li><a href="https://codyhouse.co/?p=748">Scarves</a></li>
</ul>
</li>
<li class="has-children">
<a href="https://codyhouse.co/?p=748">Bottoms</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="https://codyhouse.co/?p=748">All Bottoms</a></li>
<li><a href="https://codyhouse.co/?p=748">Casual Trousers</a></li>
<li class="has-children">
<a href="#0">Jeans</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Bottoms</a></li>
<li class="see-all"><a href="https://codyhouse.co/?p=748">All Jeans</a></li>
<li><a href="https://codyhouse.co/?p=748">Ripped</a></li>
<li><a href="https://codyhouse.co/?p=748">Skinny</a></li>
<li><a href="https://codyhouse.co/?p=748">Slim</a></li>
<li><a href="https://codyhouse.co/?p=748">Straight</a></li>
</ul>
</li>
<li><a href="#0">Leggings</a></li>
<li><a href="#0">Shorts</a></li>
</ul>
</li>
<li class="has-children">
<a href="https://codyhouse.co/?p=748">Jackets</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="https://codyhouse.co/?p=748">All Jackets</a></li>
<li><a href="https://codyhouse.co/?p=748">Blazers</a></li>
<li><a href="https://codyhouse.co/?p=748">Bomber jackets</a></li>
<li><a href="https://codyhouse.co/?p=748">Denim Jackets</a></li>
<li><a href="https://codyhouse.co/?p=748">Duffle Coats</a></li>
<li><a href="https://codyhouse.co/?p=748">Leather Jackets</a></li>
<li><a href="https://codyhouse.co/?p=748">Parkas</a></li>
</ul>
</li>
<li class="has-children">
<a href="https://codyhouse.co/?p=748">Tops</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="https://codyhouse.co/?p=748">All Tops</a></li>
<li><a href="https://codyhouse.co/?p=748">Cardigans</a></li>
<li><a href="https://codyhouse.co/?p=748">Coats</a></li>
<li><a href="https://codyhouse.co/?p=748">Polo Shirts</a></li>
<li><a href="https://codyhouse.co/?p=748">Shirts</a></li>
<li class="has-children">
<a href="#0">T-Shirts</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Tops</a></li>
<li class="see-all"><a href="https://codyhouse.co/?p=748">All T-shirts</a></li>
<li><a href="https://codyhouse.co/?p=748">Plain</a></li>
<li><a href="https://codyhouse.co/?p=748">Print</a></li>
<li><a href="https://codyhouse.co/?p=748">Striped</a></li>
<li><a href="https://codyhouse.co/?p=748">Long sleeved</a></li>
</ul>
</li>
<li><a href="https://codyhouse.co/?p=748">Vests</a></li>
</ul>
</li>
</ul>
<!-- .cd-secondary-dropdown -->
</li>
<!-- .has-children -->
<li class="has-children">
<a href="https://codyhouse.co/?p=748">Gallery</a>
<ul class="cd-dropdown-gallery is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="https://codyhouse.co/?p=748">Browse Gallery</a></li>
<li>
<a class="cd-dropdown-item" href="https://codyhouse.co/?p=748">
<img src="img/img.png" alt="Product Image">
<h3>Product #1</h3>
</a>
</li>
<li>
<a class="cd-dropdown-item" href="https://codyhouse.co/?p=748">
<img src="img/img.png" alt="Product Image">
<h3>Product #2</h3>
</a>
</li>
<li>
<a class="cd-dropdown-item" href="https://codyhouse.co/?p=748">
<img src="img/img.png" alt="Product Image">
<h3>Product #3</h3>
</a>
</li>
<li>
<a class="cd-dropdown-item" href="https://codyhouse.co/?p=748">
<img src="img/img.png" alt="Product Image">
<h3>Product #4</h3>
</a>
</li>
</ul>
<!-- .cd-dropdown-gallery -->
</li>
<!-- .has-children -->
<li class="has-children">
<a href="https://codyhouse.co/?p=748">Services</a>
<ul class="cd-dropdown-icons is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="https://codyhouse.co/?p=748">Browse Services</a></li>
<li>
<a class="cd-dropdown-item item-1" href="https://codyhouse.co/?p=748">
<h3>Service #1</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-dropdown-item item-2" href="https://codyhouse.co/?p=748">
<h3>Service #2</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-dropdown-item item-3" href="https://codyhouse.co/?p=748">
<h3>Service #3</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-dropdown-item item-4" href="https://codyhouse.co/?p=748">
<h3>Service #4</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-dropdown-item item-5" href="https://codyhouse.co/?p=748">
<h3>Service #5</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-dropdown-item item-6" href="https://codyhouse.co/?p=748">
<h3>Service #6</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-dropdown-item item-7" href="https://codyhouse.co/?p=748">
<h3>Service #7</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-dropdown-item item-8" href="https://codyhouse.co/?p=748">
<h3>Service #8</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-dropdown-item item-9" href="https://codyhouse.co/?p=748">
<h3>Service #9</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-dropdown-item item-10" href="https://codyhouse.co/?p=748">
<h3>Service #10</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-dropdown-item item-11" href="https://codyhouse.co/?p=748">
<h3>Service #11</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-dropdown-item item-12" href="https://codyhouse.co/?p=748">
<h3>Service #12</h3>
<p>This is the item description</p>
</a>
</li>
</ul>
<!-- .cd-dropdown-icons -->
</li>
<!-- .has-children -->
<li class="cd-divider">Divider</li>
<li><a href="https://codyhouse.co/?p=748">Page 1</a></li>
<li><a href="https://codyhouse.co/?p=748">Page 2</a></li>
<li><a href="https://codyhouse.co/?p=748">Page 3</a></li>
</ul>
<!-- .cd-dropdown-content -->
</nav>
<!-- .cd-dropdown -->
</div>
<!-- .cd-dropdown-wrapper -->
</header>
@charset "UTF-8";
/* --------------------------------
Primary style
-------------------------------- */
*, *::after, *::before {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: sans-serif;
color: #111433;
background-color: #ffffff;
}
a {
color: #3f8654;
text-decoration: none;
}
img {
max-width: 100%;
}
input {
font-family: sans-serif;
font-size: 1.6rem;
}
/* remove “X” from search input field */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type=text]::-ms-clear {
display: none;
width: 0;
height: 0;
}
input[type=text]::-ms-reveal {
display: none;
width: 0;
height: 0;
}
/* --------------------------------
Main Components
-------------------------------- */
header {
height: 100px;
background: #ffffff;
}
.cd-dropdown-wrapper {
display: inline-block;
position: relative;
height: 40px;
margin: 30px 0 0 5%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cd-dropdown-trigger {
display: block;
position: relative;
padding: 0 36px 0 20px;
line-height: 40px;
background-color: #111433;
color: #ffffff;
border-radius: 3px;
}
.no-touch .cd-dropdown-trigger:hover {
background-color: #171b46;
}
.cd-dropdown-trigger::before, .cd-dropdown-trigger::after {
/* this is the arrow inside the dropdown trigger*/
content: '';
position: absolute;
top: 50%;
margin-top: -1px;
height: 2px;
width: 9px;
background: #ffffff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: width 0.3s, -webkit-transform 0.3s;
-moz-transition: width 0.3s, -moz-transform 0.3s;
transition: width 0.3s, transform 0.3s;
}
.cd-dropdown-trigger::before {
right: 22px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-dropdown-trigger::after {
right: 17px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media only screen and (min-width: 1024px) {
.cd-dropdown-trigger {
font-size: 1.5rem;
}
.cd-dropdown-trigger.dropdown-is-active {
background-color: #3f8654;
}
.no-touch .cd-dropdown-trigger.dropdown-is-active:hover {
background-color: #47975f;
}
.cd-dropdown-trigger.dropdown-is-active::before, .cd-dropdown-trigger.dropdown-is-active::after {
/* transform the arrow into a 'X' */
width: 14px;
}
.cd-dropdown-trigger.dropdown-is-active::before {
/* transform the arrow into a 'X' */
-webkit-transform: translateX(5px) rotate(-45deg);
-moz-transform: translateX(5px) rotate(-45deg);
-ms-transform: translateX(5px) rotate(-45deg);
-o-transform: translateX(5px) rotate(-45deg);
transform: translateX(5px) rotate(-45deg);
}
.cd-dropdown-trigger.dropdown-is-active::after {
/* transform the arrow into a 'X' */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
.cd-dropdown h2,
.cd-dropdown-content a,
.cd-dropdown-content ul a {
height: 50px;
line-height: 50px;
}
@media only screen and (min-width: 768px) {
.cd-dropdown h2,
.cd-dropdown-content a,
.cd-dropdown-content ul a {
height: 60px;
line-height: 60px;
}
}
@media only screen and (min-width: 1024px) {
.cd-dropdown h2,
.cd-dropdown-content a,
.cd-dropdown-content ul a {
height: 50px;
line-height: 50px;
}
}
.cd-dropdown h2,
.cd-dropdown-content a,
.cd-dropdown-content ul a,
.cd-dropdown-content .cd-divider {
padding: 0 20px;
}
.cd-dropdown {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #111433;
color: #ffffff;
visibility: hidden;
/* Force Hardware Acceleration */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
-moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
transition: transform 0.5s 0s, visibility 0s 0.5s;
}
.cd-dropdown h2 {
/* dropdown title - mobile version only */
position: relative;
z-index: 1;
color: #585a70;
background-color: #111433;
border-bottom: 1px solid #242643;
}
.cd-dropdown .cd-close {
/* 'X' close icon - mobile version only */
position: absolute;
z-index: 1;
right: 0;
top: 0;
height: 50px;
width: 50px;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
color: transparent;
}
.cd-dropdown .cd-close::after, .cd-dropdown .cd-close::before {
/* this is the 'X' icon */
content: '';
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
height: 20px;
width: 2px;
background-color: #ffffff;
}
.cd-dropdown .cd-close::after {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.cd-dropdown .cd-close::before {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.cd-dropdown.dropdown-is-active {
visibility: visible;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0s;
-moz-transition: -moz-transform 0.5s 0s, visibility 0s 0s;
transition: transform 0.5s 0s, visibility 0s 0s;
}
@media only screen and (min-width: 768px) {
.cd-dropdown .cd-close {
top: 5px;
}
}
@media only screen and (min-width: 1024px) {
.cd-dropdown {
position: absolute;
top: calc(100% - 2px);
/* reset style*/
height: auto;
width: auto;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
background-color: #ffffff;
color: #111433;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
opacity: 0;
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}
.open-to-left .cd-dropdown {
/* use the .open-to-left class if you want to open the dropdown on the left */
right: 0;
left: auto;
}
.cd-dropdown h2, .cd-dropdown .cd-close {
/* on desktop - hide title and 'X' */
display: none;
}
.cd-dropdown.dropdown-is-active {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s, -webkit-transform 0.3s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s;
transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
}
}
.cd-dropdown-content, .cd-dropdown-content ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
padding-top: 50px;
}
.cd-dropdown-content a, .cd-dropdown-content ul a {
display: block;
color: #ffffff;
/* truncate text with ellipsis if too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-top-width: 1px;
border-color: #242643;
border-style: solid;
}
.cd-dropdown-content li:first-of-type > a, .cd-dropdown-content ul li:first-of-type > a {
border-top-width: 0;
}
.cd-dropdown-content li:last-of-type > a, .cd-dropdown-content ul li:last-of-type > a {
border-bottom-width: 1px;
}
.cd-dropdown-content .cd-divider, .cd-dropdown-content ul .cd-divider {
padding-top: 10px;
padding-bottom: 10px;
background-color: #0b0e23;
font-size: 1.1rem;
font-weight: bold;
letter-spacing: 1px;
color: #585a70;
text-transform: uppercase;
}
.cd-dropdown-content .cd-divider + li > a, .cd-dropdown-content ul .cd-divider + li > a {
border-top-width: 0;
}
.cd-dropdown-content a, .cd-dropdown-content .cd-search, .cd-dropdown-content .cd-divider, .cd-dropdown-content ul a, .cd-dropdown-content ul .cd-search, .cd-dropdown-content ul .cd-divider {
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.cd-dropdown-content.is-hidden, .cd-dropdown-content ul.is-hidden {
/* push the secondary dropdown items to the right */
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-dropdown-content.is-hidden > li > a, .cd-dropdown-content.is-hidden > li > .cd-search, .cd-dropdown-content.is-hidden > .cd-divider, .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.is-hidden > li > a, .cd-dropdown-content ul.is-hidden > li > .cd-search, .cd-dropdown-content ul.is-hidden > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider {
/* lower down the dropdown items opacity - when secondary dropdown slides in or for dropdown items hidden on the right */
opacity: 0;
}
.cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider {
/* push the dropdown items to the left when secondary dropdown slides in */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.dropdown-is-active .cd-dropdown-content, .dropdown-is-active .cd-dropdown-content ul {
-webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 768px) {
.cd-dropdown-content, .cd-dropdown-content ul {
padding-top: 60px;
}
.cd-dropdown-content a, .cd-dropdown-content ul a {
font-size: 1.8rem;
}
}
@media only screen and (min-width: 1024px) {
.cd-dropdown-content, .cd-dropdown-content ul {
padding-top: 0;
overflow: visible;
}
.cd-dropdown-content a, .cd-dropdown-content ul a {
color: #111433;
height: 50px;
line-height: 50px;
font-size: 1.5rem;
border-color: #ebebeb;
}
.cd-dropdown-content .cd-divider, .cd-dropdown-content ul .cd-divider {
background-color: transparent;
color: #b3b3b3;
border-top: 1px solid #ebebeb;
}
.cd-dropdown-content .cd-divider + li > a, .cd-dropdown-content ul .cd-divider + li > a {
border-top-width: 1px;
}
.cd-dropdown-content.is-hidden > li > a, .cd-dropdown-content.is-hidden > li > .cd-search, .cd-dropdown-content.is-hidden > .cd-divider, .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.is-hidden > li > a, .cd-dropdown-content ul.is-hidden > li > .cd-search, .cd-dropdown-content ul.is-hidden > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider {
/* reset mobile style */
opacity: 1;
}
}
.cd-dropdown-content .see-all a {
/* different style for the See all links */
color: #3f8654;
}
.cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
/* items with picture (or icon) and title */
height: 80px;
line-height: 80px;
}
.cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item h3, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
/* truncate text with ellipsis if too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
padding-left: 90px;
}
.cd-dropdown-content .cd-dropdown-gallery img {
position: absolute;
display: block;
height: 40px;
width: auto;
left: 20px;
top: 50%;
margin-top: -20px;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
padding-left: 75px;
position: relative;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
color: #111433;
font-size: 1.3rem;
/* hide description on small devices */
display: none;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
/* item icon */
content: '';
display: block;
position: absolute;
left: 20px;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center center;
background-size: 40px 40px;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-1::before {
background-image: url("../img/nucleo-icon-1.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-2::before {
background-image: url("../img/nucleo-icon-2.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-3::before {
background-image: url("../img/nucleo-icon-3.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-4::before {
background-image: url("../img/nucleo-icon-4.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-5::before {
background-image: url("../img/nucleo-icon-5.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-6::before {
background-image: url("../img/nucleo-icon-6.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-7::before {
background-image: url("../img/nucleo-icon-7.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-8::before {
background-image: url("../img/nucleo-icon-8.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-9::before {
background-image: url("../img/nucleo-icon-9.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-10::before {
background-image: url("../img/nucleo-icon-10.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-11::before {
background-image: url("../img/nucleo-icon-11.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-12::before {
background-image: url("../img/nucleo-icon-12.svg");
}
@media only screen and (min-width: 1024px) {
.cd-dropdown-content {
/* reset mobile style */
position: static;
height: auto;
width: 280px;
}
.cd-dropdown-content > li:last-of-type a {
border-bottom: none;
}
.no-touch .cd-dropdown-content > li:not(.has-children) a:hover {
color: #3f8654;
}
.cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider {
/* reset mobile style */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.cd-dropdown-content .cd-secondary-dropdown, .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
left: 100%;
height: auto;
background-color: #ffffff;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}
.cd-dropdown-content .cd-secondary-dropdown::after, .cd-dropdown-content .cd-dropdown-gallery::after, .cd-dropdown-content .cd-dropdown-icons::after {
clear: both;
content: "";
display: table;
}
.open-to-left .cd-dropdown-content .cd-secondary-dropdown, .open-to-left .cd-dropdown-content .cd-dropdown-gallery, .open-to-left .cd-dropdown-content .cd-dropdown-icons {
/* use the .open-to-left class if you want to open the dropdown on the left */
left: auto;
right: 100%;
}
.cd-dropdown-content .cd-secondary-dropdown.is-hidden, .cd-dropdown-content .cd-dropdown-gallery.is-hidden, .cd-dropdown-content .cd-dropdown-icons.is-hidden {
/* reset mobile style */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-dropdown-content .cd-secondary-dropdown.fade-in, .cd-dropdown-content .cd-dropdown-gallery.fade-in, .cd-dropdown-content .cd-dropdown-icons.fade-in {
/* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
-webkit-animation: cd-fade-in 0.2s;
-moz-animation: cd-fade-in 0.2s;
animation: cd-fade-in 0.2s;
}
.cd-dropdown-content .cd-secondary-dropdown.fade-out, .cd-dropdown-content .cd-dropdown-gallery.fade-out, .cd-dropdown-content .cd-dropdown-icons.fade-out {
/* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
-webkit-animation: cd-fade-out 0.2s;
-moz-animation: cd-fade-out 0.2s;
animation: cd-fade-out 0.2s;
}
.cd-dropdown-content .cd-secondary-dropdown > .go-back, .cd-dropdown-content .cd-dropdown-gallery > .go-back, .cd-dropdown-content .cd-dropdown-icons > .go-back {
display: none;
}
.cd-dropdown-content .cd-secondary-dropdown > .see-all, .cd-dropdown-content .cd-dropdown-gallery > .see-all, .cd-dropdown-content .cd-dropdown-icons > .see-all {
position: absolute;
bottom: 20px;
height: 45px;
text-align: center;
}
.cd-dropdown-content .cd-secondary-dropdown > .see-all a, .cd-dropdown-content .cd-dropdown-gallery > .see-all a, .cd-dropdown-content .cd-dropdown-icons > .see-all a {
margin: 0;
height: 100%;
line-height: 45px;
background: #ebebeb;
pointer-events: auto;
-webkit-transition: color 0.2s, background-color 0.2s;
-moz-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
.no-touch .cd-dropdown-content .cd-secondary-dropdown > .see-all a:hover, .no-touch .cd-dropdown-content .cd-dropdown-gallery > .see-all a:hover, .no-touch .cd-dropdown-content .cd-dropdown-icons > .see-all a:hover {
color: #ffffff;
background-color: #111433;
}
.cd-dropdown-content .cd-secondary-dropdown .cd-dropdown-item, .cd-dropdown-content .cd-secondary-dropdown a, .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-gallery a, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-icons a {
border: none;
}
.cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
padding: 20px 30px 100px;
}
.cd-dropdown-content .cd-dropdown-gallery > .see-all, .cd-dropdown-content .cd-dropdown-icons > .see-all {
width: calc(100% - 60px);
}
.cd-dropdown-content .cd-dropdown-icons > li, .cd-dropdown-content .cd-secondary-dropdown > li {
width: 50%;
float: left;
}
.cd-dropdown-content .cd-secondary-dropdown {
overflow: hidden;
width: 550px;
padding-bottom: 65px;
}
.cd-dropdown-content .cd-secondary-dropdown::before {
/* this is the separation line in the middle of the .cd-secondary-dropdown element */
position: absolute;
content: '';
top: 290px;
left: 15px;
height: 1px;
width: 520px;
background-color: #ebebeb;
}
.cd-dropdown-content .cd-secondary-dropdown > li > a {
color: #3f8654;
font-size: 1.6rem;
margin-bottom: 10px;
line-height: 30px;
height: 30px;
pointer-events: none;
}
.cd-dropdown-content .cd-secondary-dropdown > li > a::after, .cd-dropdown-content .cd-secondary-dropdown > li > a::before {
/* hide the arrow */
display: none;
}
.cd-dropdown-content .cd-secondary-dropdown.move-out > li > a {
/* reset mobile style */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-dropdown-content .cd-secondary-dropdown > li {
margin: 20px 0;
border-right-width: 1px;
border-color: #ebebeb;
border-style: solid;
padding: 0 30px;
height: 250px;
}
.cd-dropdown-content .cd-secondary-dropdown > li:nth-of-type(2n) {
border-right-width: 0;
}
.cd-dropdown-content .cd-secondary-dropdown > li > ul {
/* reset mobile style */
-webkit-transform: translate(0);
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
transform: translate(0);
position: relative;
height: auto;
}
.cd-dropdown-content .cd-secondary-dropdown > li > ul > .go-back {
display: none;
}
.cd-dropdown-content .cd-secondary-dropdown a {
line-height: 25px;
height: 25px;
font-size: 1.3rem;
padding-left: 0;
}
.no-touch .cd-dropdown-content .cd-secondary-dropdown a:hover {
color: #3f8654;
}
.cd-dropdown-content .cd-secondary-dropdown ul {
padding-bottom: 25px;
overflow: hidden;
height: auto;
}
.cd-dropdown-content .cd-secondary-dropdown .go-back a {
padding-left: 20px;
color: transparent;
}
.no-touch .cd-dropdown-content .cd-secondary-dropdown .go-back a:hover {
color: transparent;
}
.cd-dropdown-content .cd-secondary-dropdown .go-back a::before, .cd-dropdown-content .cd-secondary-dropdown .go-back a::after {
left: 0;
}
.cd-dropdown-content .cd-secondary-dropdown .see-all {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.cd-dropdown-content .cd-dropdown-gallery {
width: 600px;
padding-bottom: 100px;
}
.cd-dropdown-content .cd-dropdown-gallery > li {
width: 48%;
float: left;
margin-right: 4%;
}
.cd-dropdown-content .cd-dropdown-gallery > li:nth-of-type(2n) {
margin-right: 0;
}
.cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
padding: 0;
height: auto;
line-height: normal;
color: #3f8654;
margin-bottom: 2em;
}
.cd-dropdown-content .cd-dropdown-gallery > li:nth-last-of-type(2) a,
.cd-dropdown-content .cd-dropdown-gallery > li:last-of-type a {
margin-bottom: 0;
}
.cd-dropdown-content .cd-dropdown-gallery img {
position: static;
height: auto;
width: 100%;
margin: 0 0 0.6em;
}
.cd-dropdown-content .cd-dropdown-icons {
width: 600px;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
height: 80px;
line-height: 1.2;
padding: 24px 0 0 85px;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item:hover {
background: #ebebeb;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
color: #3f8654;
font-weight: bold;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
display: block;
font-size: 1.2rem;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
left: 25px;
}
.cd-dropdown-content > .has-children > ul {
visibility: hidden;
}
.cd-dropdown-content > .has-children > ul.is-active {
/* when hover over .cd-dropdown-content items - show subnavigation */
visibility: visible;
}
.cd-dropdown-content > .has-children > .cd-secondary-dropdown.is-active > li > ul {
/* if .cd-secondary-dropdown is visible - show also subnavigation */
visibility: visible;
}
.cd-dropdown-content > .has-children > a.is-active {
/* hover effect for .cd-dropdown-content items with subnavigation */
box-shadow: inset 2px 0 0 #3f8654;
color: #3f8654;
}
.cd-dropdown-content > .has-children > a.is-active::before, .cd-dropdown-content > .has-children > a.is-active::after {
background: #3f8654;
}
.open-to-left .cd-dropdown-content > .has-children > a.is-active {
box-shadow: inset -2px 0 0 #3f8654;
}
}
@-webkit-keyframes cd-fade-in {
0% {
opacity: 0;
visibility: visible;
}
100% {
opacity: 1;
visibility: visible;
}
}
@-moz-keyframes cd-fade-in {
0% {
opacity: 0;
visibility: visible;
}
100% {
opacity: 1;
visibility: visible;
}
}
@keyframes cd-fade-in {
0% {
opacity: 0;
visibility: visible;
}
100% {
opacity: 1;
visibility: visible;
}
}
@-webkit-keyframes cd-fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: visible;
}
}
@-moz-keyframes cd-fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: visible;
}
}
@keyframes cd-fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: visible;
}
}
.cd-search input[type="search"] {
width: 100%;
height: 50px;
padding: 0 20px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
background-color: #242643;
color: #ffffff;
border: none;
border-radius: 0;
}
.cd-search input[type="search"]::-webkit-input-placeholder {
color: #ffffff;
}
.cd-search input[type="search"]::-moz-placeholder {
color: #ffffff;
}
.cd-search input[type="search"]:-moz-placeholder {
color: #ffffff;
}
.cd-search input[type="search"]:-ms-input-placeholder {
color: #ffffff;
}
.cd-search input[type="search"]:focus {
background: #ffffff;
color: #111433;
outline: none;
}
.cd-search input[type="search"]:focus::-webkit-input-placeholder {
color: rgba(17, 20, 51, 0.4);
}
.cd-search input[type="search"]:focus::-moz-placeholder {
color: rgba(17, 20, 51, 0.4);
}
.cd-search input[type="search"]:focus:-moz-placeholder {
color: rgba(17, 20, 51, 0.4);
}
.cd-search input[type="search"]:focus:-ms-input-placeholder {
color: rgba(17, 20, 51, 0.4);
}
@media only screen and (min-width: 1024px) {
.cd-search input[type="search"] {
background-color: #ebebeb;
}
.cd-search input[type="search"]::-webkit-input-placeholder {
color: #b3b3b3;
}
.cd-search input[type="search"]::-moz-placeholder {
color: #b3b3b3;
}
.cd-search input[type="search"]:-moz-placeholder {
color: #b3b3b3;
}
.cd-search input[type="search"]:-ms-input-placeholder {
color: #b3b3b3;
}
}
.has-children > a, .go-back a {
position: relative;
}
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
/* arrow icon in CSS - for element with nested unordered lists */
content: '';
position: absolute;
top: 50%;
margin-top: -1px;
display: inline-block;
height: 2px;
width: 10px;
background: #ffffff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.has-children > a::before, .go-back a::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.has-children > a::after, .go-back a::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media only screen and (min-width: 1024px) {
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
background: #b3b3b3;
}
}
.has-children > a {
padding-right: 40px;
}
.has-children > a::before, .has-children > a::after {
/* arrow goes on the right side - children navigation */
right: 20px;
-webkit-transform-origin: 9px 50%;
-moz-transform-origin: 9px 50%;
-ms-transform-origin: 9px 50%;
-o-transform-origin: 9px 50%;
transform-origin: 9px 50%;
}
@media only screen and (min-width: 1024px) {
.open-to-left .cd-dropdown-content > .has-children > a {
padding-left: 40px;
padding-right: 20px;
}
.open-to-left .cd-dropdown-content > .has-children > a::before, .open-to-left .cd-dropdown-content > .has-children > a::after {
right: auto;
left: 20px;
-webkit-transform-origin: 1px 50%;
-moz-transform-origin: 1px 50%;
-ms-transform-origin: 1px 50%;
-o-transform-origin: 1px 50%;
transform-origin: 1px 50%;
}
}
.cd-dropdown-content .go-back a {
padding-left: 40px;
}
.cd-dropdown-content .go-back a::before, .cd-dropdown-content .go-back a::after {
/* arrow goes on the left side - go back button */
left: 20px;
-webkit-transform-origin: 1px 50%;
-moz-transform-origin: 1px 50%;
-ms-transform-origin: 1px 50%;
-o-transform-origin: 1px 50%;
transform-origin: 1px 50%;
}
.cd-main-content {
background-color: #e6e6e6;
min-height: calc(100vh - 100px);
padding: 2em 5%;
line-height: 2;
}
.no-js .cd-dropdown-wrapper:hover .cd-dropdown {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.no-js .cd-dropdown-wrapper .cd-close {
display: none;
}
/**
* menu-aim is a jQuery plugin for dropdown menus that can differentiate
* between a user trying hover over a dropdown item vs trying to navigate into
* a submenu's contents.
*
* menu-aim assumes that you have are using a menu with submenus that expand
* to the menu's right. It will fire events when the user's mouse enters a new
* dropdown item *and* when that item is being intentionally hovered over.
*
* __________________________
* | Monkeys >| Gorilla |
* | Gorillas >| Content |
* | Chimps >| Here |
* |___________|____________|
*
* In the above example, "Gorillas" is selected and its submenu content is
* being shown on the right. Imagine that the user's cursor is hovering over
* "Gorillas." When they move their mouse into the "Gorilla Content" area, they
* may briefly hover over "Chimps." This shouldn't close the "Gorilla Content"
* area.
*
* This problem is normally solved using timeouts and delays. menu-aim tries to
* solve this by detecting the direction of the user's mouse movement. This can
* make for quicker transitions when navigating up and down the menu. The
* experience is hopefully similar to amazon.com/'s "Shop by Department"
* dropdown.
*
* Use like so:
*
* $("#menu").menuAim({
* activate: $.noop, // fired on row activation
* deactivate: $.noop // fired on row deactivation
* });
*
* ...to receive events when a menu's row has been purposefully (de)activated.
*
* The following options can be passed to menuAim. All functions execute with
* the relevant row's HTML element as the execution context ('this'):
*
* .menuAim({
* // Function to call when a row is purposefully activated. Use this
* // to show a submenu's content for the activated row.
* activate: function() {},
*
* // Function to call when a row is deactivated.
* deactivate: function() {},
*
* // Function to call when mouse enters a menu row. Entering a row
* // does not mean the row has been activated, as the user may be
* // mousing over to a submenu.
* enter: function() {},
*
* // Function to call when mouse exits a menu row.
* exit: function() {},
*
* // Selector for identifying which elements in the menu are rows
* // that can trigger the above events. Defaults to "> li".
* rowSelector: "> li",
*
* // You may have some menu rows that aren't submenus and therefore
* // shouldn't ever need to "activate." If so, filter submenu rows w/
* // this selector. Defaults to "*" (all elements).
* submenuSelector: "*",
*
* // Direction the submenu opens relative to the main menu. Can be
* // left, right, above, or below. Defaults to "right".
* submenuDirection: "right"
* });
*
* https://github.com/kamens/jQuery-menu-aim
* MIT License
*/
(function($) {
$.fn.menuAim = function(opts) {
// Initialize menu-aim for all elements in jQuery collection
this.each(function() {
init.call(this, opts);
});
return this;
};
function init(opts) {
var $menu = $(this),
activeRow = null,
mouseLocs = [],
lastDelayLoc = null,
timeoutId = null,
options = $.extend({
rowSelector: "> li",
submenuSelector: "*",
submenuDirection: "right",
tolerance: 75, // bigger = more forgivey when entering submenu
enter: $.noop,
exit: $.noop,
activate: $.noop,
deactivate: $.noop,
exitMenu: $.noop
}, opts);
var MOUSE_LOCS_TRACKED = 3, // number of past mouse locations to track
DELAY = 300; // ms delay when user appears to be entering submenu
/**
* Keep track of the last few locations of the mouse.
*/
var mousemoveDocument = function(e) {
mouseLocs.push({x: e.pageX, y: e.pageY});
if (mouseLocs.length > MOUSE_LOCS_TRACKED) {
mouseLocs.shift();
}
};
/**
* Cancel possible row activations when leaving the menu entirely
*/
var mouseleaveMenu = function() {
if (timeoutId) {
clearTimeout(timeoutId);
}
// If exitMenu is supplied and returns true, deactivate the
// currently active row on menu exit.
if (options.exitMenu(this)) {
if (activeRow) {
options.deactivate(activeRow);
}
activeRow = null;
}
};
/**
* Trigger a possible row activation whenever entering a new row.
*/
var mouseenterRow = function() {
if (timeoutId) {
// Cancel any previous activation delays
clearTimeout(timeoutId);
}
options.enter(this);
possiblyActivate(this);
},
mouseleaveRow = function() {
options.exit(this);
};
/*
* Immediately activate a row if the user clicks on it.
*/
var clickRow = function() {
activate(this);
};
/**
* Activate a menu row.
*/
var activate = function(row) {
if (row == activeRow) {
return;
}
if (activeRow) {
options.deactivate(activeRow);
}
options.activate(row);
activeRow = row;
};
/**
* Possibly activate a menu row. If mouse movement indicates that we
* shouldn't activate yet because user may be trying to enter
* a submenu's content, then delay and check again later.
*/
var possiblyActivate = function(row) {
var delay = activationDelay();
if (delay) {
timeoutId = setTimeout(function() {
possiblyActivate(row);
}, delay);
} else {
activate(row);
}
};
/**
* Return the amount of time that should be used as a delay before the
* currently hovered row is activated.
*
* Returns 0 if the activation should happen immediately. Otherwise,
* returns the number of milliseconds that should be delayed before
* checking again to see if the row should be activated.
*/
var activationDelay = function() {
if (!activeRow || !$(activeRow).is(options.submenuSelector)) {
// If there is no other submenu row already active, then
// go ahead and activate immediately.
return 0;
}
var offset = $menu.offset(),
upperLeft = {
x: offset.left,
y: offset.top - options.tolerance
},
upperRight = {
x: offset.left + $menu.outerWidth(),
y: upperLeft.y
},
lowerLeft = {
x: offset.left,
y: offset.top + $menu.outerHeight() + options.tolerance
},
lowerRight = {
x: offset.left + $menu.outerWidth(),
y: lowerLeft.y
},
loc = mouseLocs[mouseLocs.length - 1],
prevLoc = mouseLocs[0];
if (!loc) {
return 0;
}
if (!prevLoc) {
prevLoc = loc;
}
if (prevLoc.x < offset.left || prevLoc.x > lowerRight.x ||
prevLoc.y < offset.top || prevLoc.y > lowerRight.y) {
// If the previous mouse location was outside of the entire
// menu's bounds, immediately activate.
return 0;
}
if (lastDelayLoc &&
loc.x == lastDelayLoc.x && loc.y == lastDelayLoc.y) {
// If the mouse hasn't moved since the last time we checked
// for activation status, immediately activate.
return 0;
}
// Detect if the user is moving towards the currently activated
// submenu.
//
// If the mouse is heading relatively clearly towards
// the submenu's content, we should wait and give the user more
// time before activating a new row. If the mouse is heading
// elsewhere, we can immediately activate a new row.
//
// We detect this by calculating the slope formed between the
// current mouse location and the upper/lower right points of
// the menu. We do the same for the previous mouse location.
// If the current mouse location's slopes are
// increasing/decreasing appropriately compared to the
// previous's, we know the user is moving toward the submenu.
//
// Note that since the y-axis increases as the cursor moves
// down the screen, we are looking for the slope between the
// cursor and the upper right corner to decrease over time, not
// increase (somewhat counterintuitively).
function slope(a, b) {
return (b.y - a.y) / (b.x - a.x);
};
var decreasingCorner = upperRight,
increasingCorner = lowerRight;
// Our expectations for decreasing or increasing slope values
// depends on which direction the submenu opens relative to the
// main menu. By default, if the menu opens on the right, we
// expect the slope between the cursor and the upper right
// corner to decrease over time, as explained above. If the
// submenu opens in a different direction, we change our slope
// expectations.
if (options.submenuDirection == "left") {
decreasingCorner = lowerLeft;
increasingCorner = upperLeft;
} else if (options.submenuDirection == "below") {
decreasingCorner = lowerRight;
increasingCorner = lowerLeft;
} else if (options.submenuDirection == "above") {
decreasingCorner = upperLeft;
increasingCorner = upperRight;
}
var decreasingSlope = slope(loc, decreasingCorner),
increasingSlope = slope(loc, increasingCorner),
prevDecreasingSlope = slope(prevLoc, decreasingCorner),
prevIncreasingSlope = slope(prevLoc, increasingCorner);
if (decreasingSlope < prevDecreasingSlope &&
increasingSlope > prevIncreasingSlope) {
// Mouse is moving from previous location towards the
// currently activated submenu. Delay before activating a
// new menu row, because user may be moving into submenu.
lastDelayLoc = loc;
return DELAY;
}
lastDelayLoc = null;
return 0;
};
/**
* Hook up initial menu events
*/
$menu
.mouseleave(mouseleaveMenu)
.find(options.rowSelector)
.mouseenter(mouseenterRow)
.mouseleave(mouseleaveRow)
.click(clickRow);
$(document).mousemove(mousemoveDocument);
};
})(jQuery);
jQuery(document).ready(function($){
//open/close mega-navigation
$('.cd-dropdown-trigger').on('click', function(event){
event.preventDefault();
toggleNav();
});
//close meganavigation
$('.cd-dropdown .cd-close').on('click', function(event){
event.preventDefault();
toggleNav();
});
//on mobile - open submenu
$('.has-children').children('a').on('click', function(event){
//prevent default clicking on direct children of .has-children
event.preventDefault();
var selected = $(this);
selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out');
});
//on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents
var submenuDirection = ( !$('.cd-dropdown-wrapper').hasClass('open-to-left') ) ? 'right' : 'left';
$('.cd-dropdown-content').menuAim({
activate: function(row) {
$(row).children().addClass('is-active').removeClass('fade-out');
if( $('.cd-dropdown-content .fade-in').length == 0 ) $(row).children('ul').addClass('fade-in');
},
deactivate: function(row) {
$(row).children().removeClass('is-active');
if( $('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row)) ) {
$('.cd-dropdown-content').find('.fade-in').removeClass('fade-in');
$(row).children('ul').addClass('fade-out')
}
},
exitMenu: function() {
$('.cd-dropdown-content').find('.is-active').removeClass('is-active');
return true;
},
submenuDirection: submenuDirection,
});
//submenu items - go back link
$('.go-back').on('click', function(){
var selected = $(this),
visibleNav = $(this).parent('ul').parent('.has-children').parent('ul');
selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
});
function toggleNav(){
var navIsVisible = ( !$('.cd-dropdown').hasClass('dropdown-is-active') ) ? true : false;
$('.cd-dropdown').toggleClass('dropdown-is-active', navIsVisible);
$('.cd-dropdown-trigger').toggleClass('dropdown-is-active', navIsVisible);
if( !navIsVisible ) {
$('.cd-dropdown').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
$('.has-children ul').addClass('is-hidden');
$('.move-out').removeClass('move-out');
$('.is-active').removeClass('is-active');
});
}
}
//IE9 placeholder fallback
//credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
});
Also see: Tab Triggers