JMT Alimentation Animal
Project version : 1.0.3

Navigation 

<nav class="main-nav">
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li aria-haspopup="true">

            <a href="#">Services</a>

            <ul aria-hidden="true">
                <li>
                    <a href="#">Web</a>
                </li>
                <li>
                    <a href="#">Data</a>
                </li>
                <li>
                    <a href="#">Analytics</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>
 
<nav class="main-nav">
	<ul>
		<li>
			<a href="#">Home</a>
		</li>
		<li aria-haspopup="true">
			
			<a href="#">Services</a>

			<ul aria-hidden="true">
				<li>
					<a href="#">Web</a>
				</li>
				<li>
					<a href="#">Data</a>
				</li>
				<li>
					<a href="#">Analytics</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">Contact</a>
		</li>
	</ul>
</nav>
 
/* No context defined for this component. */
  • Content: 
    nav {
	ul, ul ul {
		list-style-type: none;
		margin:  0;
		padding: 0;
	}

	ul ul {
		padding-left: 1rem;

		@media screen and(min-width: 780px) {
			padding-left: 0;
		}
	}
	
	& > ul > li > a {
		display: block;
	}
	
	& > ul > li {
		position: relative;
		vertical-align: middle;
		@media screen and(min-width: 780px) {
			display: inline-block;
		}
	}
	
	[aria-haspopup] {
		@supports(display: flex) {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		
		@media screen and(min-width: 780px) {
			display: inline-block;
		}
	}
	
	[aria-haspopup] > a, 
	[aria-haspopup] > button {
		width: 100%;
		position: relative;
		display: block;
		margin-right: .5rem;
		padding-right: 45px;
		text-align: left;
		
		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: -8.5px;
			height: 23px;
			width: 25px;
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23CCC3B9' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
			background-size: 60% auto;
			background-position: center;
			background-repeat: no-repeat;
			transform: rotate(-90deg);
		}
		
		@media screen and(min-width: 780px) {
			padding-right: 25px;
			&::after {
				right: 1rem;
				margin-top: -5.5px;
				height: 7px;
				width: 10px;
				background-size: contain;
				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B31F0F' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
				transform: rotate(0);
				transition: .2s ease;
			}

			&:hover, &:focus {
				&::after {
					transform: rotate(-180deg);
					background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
				}
			}
		}
	}

	[aria-haspopup] > ul {
		@supports(display: flex) {
			width: 100%;
			flex-basis: 100%;
		}
		
		//display: none;
		&[aria-hidden="false"] { display: block }
		@media screen and(min-width: 780px) {
			box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
			left: 0;
			min-width: 150px;
			opacity: 0;
			position: absolute;
			top: 100%;
			transition: opacity .2s ease;
		}
	}
	
	//[aria-haspopup]:hover > ul,
	[aria-haspopup] > [aria-hidden="false"] {
		@media screen and(min-width: 780px) {
			& {
				display: block;
				opacity: 1;
				transform: translateX(0);
				transition: .3s ease;
				animation: showDropdown .3s ease;
			}
		}
	}
		
	& > ul > li > a,
	[aria-haspopup] > ul > li > button {
		display: block;
		margin:  0;
		text-decoration: none;
			
		@media screen and(min-width: 780px) { 
			padding: .5rem 1rem;
			
			&:hover, &:focus {
				text-decoration: underline;
			}
		}
	}
}

@keyframes showDropdown {
	0% {
		display: none;
		opacity: 0;
		transform: translateY(-15px);
	}
	1% {
		display: block;
		opacity: 0;
		transform: translateY(-15px);
	} 
	100% {
		display: block;
		opacity: 1;
		transform: translateY(0);
	} 
}
  • URL: /components/raw/nav/_nav.scss
  • Filesystem Path: components/06-components/01-navs/01-nav/_nav.scss
  • Size: 3.2 KB
  • Content: 
    [].slice.call(document.querySelectorAll('#nav-primary > ul > li')).forEach(navItem => {
	
	navLink = navItem.querySelector('a')
	
	navLink.addEventListener('focus', () => {
		navActiveAria = document.querySelector('#nav-primary > ul > li > ul[aria-hidden="false"]')
		if(navActiveAria)
			navDropdown.setAttribute('aria-hidden', 'true')
	})
	
	if(navItem.getAttribute('aria-haspopup')) {
		navDropdown = navItem.querySelector('ul')
		
		// Active dropdown on click on button
		navItem.querySelector('button').addEventListener('click', () => {
			console.log(navDropdown.getAttribute('aria-hidden'))
			navDropdown.setAttribute(
				'aria-hidden',
				navDropdown.getAttribute('aria-hidden') == 'true' ? 'false' : 'true'
			)
		})
		
		if(window.innerWidth > 780) {
			let hoverEvent = ['mouseover', 'focus'].forEach(e => {
				navLink.addEventListener(e, () => {
					navDropdown.setAttribute('aria-hidden', 'false')
				})
			})

			navLink.addEventListener('mouseleave', () => {
				navDropdown.setAttribute('aria-hidden', 'true')
			})
		}
	}
})

/**
 * Detect if clik is outside element and close it.
 * @param {class|ID} class or ID of element to hide
 */
/*const hideElOnOutsideClick = elReference => {
	document.addEventListener('click', event => {
		let displayedEl = document.querySelector(elReference);
			
		if(displayedEl) {
			var clickedEl = event.target;

			if (!clickedEl.closest(elReference) && !clickedEl.classList.contains('[aria-haspopup]')) {
				displayedEl.setAttribute('aria-hidden', 'true')
			}
		}
	}, false);
}

// close subNav on click outside
hideElOnOutsideClick('[aria-hidden="false"]');*/
  • URL: /components/raw/nav/nav.js
  • Filesystem Path: components/06-components/01-navs/01-nav/nav.js
  • Size: 1.6 KB

There are no notes for this item.