BUX Component Development Platform

OSU Navbar 

<nav id="osu-navbar" class="bux-osu-nav" aria-label="Ohio State links">
    <div class="bux-osu-nav__overlay"></div>
    <div class="bux-osu-nav__wrapper">
        <div class="bux-container">
            <div id="osu-navname-block">
                <a class="bux-osu-nav__osu-logo-link" href="https://osu.edu">
                    <img class="bux-osu-nav__osu-logo-img" src="/images/osu-logos/navbar/osu-navbar.svg" alt="The Ohio State University Homepage" />
                </a>
            </div>
            <div id="osu-navlinks-block">
                <button type="button" id="osu-nav-trigger" aria-controls="osu-navlinks" aria-expanded="false">
                    <span class="visually-hidden">Show Links</span>
                </button>
                <ul id="osu-navlinks" aria-labelledby="osu-nav-trigger" class="bux-osu-nav__links">
                    <li class="bux-osu-nav__link"><a href="https://maps.osu.edu/">Map</a></li>
                    <li class="bux-osu-nav__link"><a href="http://buckeyelink.osu.edu/">Buckeye Link</a></li>
                    <li class="bux-osu-nav__link"><a href="https://email.osu.edu/">Webmail</a></li>
                    <li class="bux-osu-nav__link"><a href="https://www.osu.edu/search/">Search Ohio State</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
 
<nav id="osu-navbar" class="bux-osu-nav" aria-label="Ohio State links">
	<div class="bux-osu-nav__overlay"></div>
	<div class="bux-osu-nav__wrapper">
		<div class="bux-container">
			<div id="osu-navname-block">
				<a class="bux-osu-nav__osu-logo-link" href="https://osu.edu">
					<img class="bux-osu-nav__osu-logo-img" src="{{ base_path ~ directory ~ bux }}/images/osu-logos/navbar/osu-navbar.svg" alt="The Ohio State University Homepage"/>
				</a>
			</div>
			<div id="osu-navlinks-block">
				<button type="button" id="osu-nav-trigger" aria-controls="osu-navlinks" aria-expanded="false">
					<span class="visually-hidden">Show Links</span>
				</button>
				<ul id="osu-navlinks" aria-labelledby="osu-nav-trigger" class="bux-osu-nav__links">
					<li class="bux-osu-nav__link"><a href="https://maps.osu.edu/">Map</a></li>
					<li class="bux-osu-nav__link"><a href="http://buckeyelink.osu.edu/">Buckeye Link</a></li>
					<li class="bux-osu-nav__link"><a href="https://email.osu.edu/">Webmail</a></li>
					<li class="bux-osu-nav__link"><a href="https://www.osu.edu/search/">Search Ohio State</a></li>
				</ul>
			</div>
		</div>
	</div>
</nav>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
  • Content: 
    // Set breakpoint value for displaying links without toggle.
$navbar-bp: lg;

.bux-osu-nav {
	background-color: $white;
	font-family: $sans;
	padding: 10px 0;
	position: relative;
	border-bottom: 2px solid $gray-light-60;

	.bux-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	@include breakpoint($navbar-bp) {
		padding: $sp-12 0;
	}

	&__overlay {
		display: none;
		height: 100vh;
		left: 0;
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 999;
	}
	&__wrapper {
		position: relative;
		z-index: 1000;
	}
}

.bux-osu-nav__osu-logo-link {
	display: inline-block;
	&:focus {
		outline: 2px solid $focus;
	}
}

#osu-navname-block, .bux-osu-nav__osu-logo-img {
	height: 35px;
	@include breakpoint($navbar-bp) {
		height: 50px;
	}
}

// Only display links at md and above, unless #osu-nav-trigger is clicked.
#osu-navlinks {
	display: none;

	@include breakpoint($navbar-bp) {
		display: block;
	}
}

// Menu trigger for navlinks at smaller breakpoints.
#osu-navlinks-block button {
	background: none;
	display: inline-block;
	width: 44px;
	height: 44px;
	position: relative;
	right: -12px;
	z-index: 99;
	text-align: center;
	border: none;
	border-left: 2px solid $gray-light-20;
	padding-top: 10px;
	padding-left: 14px;
	z-index: 100;

	&::after {
		font-family: $icon;
		content: "\f00e";
		color: $gray-dark-80;
		font-size: 20px;
		cursor: pointer;
		font-weight: 700;
	}

	// Don't display trigger at designated breakpoint and above.
	@include breakpoint($navbar-bp) {
		display: none;
	}
}

// Show links if trigger is clicked.
#osu-nav-trigger[aria-expanded="true"] ~ #osu-navlinks {
	display: block;
	background-color: $white;
	padding: rem-calc(55 20 20);
	left: 0;
	width: 100%;
	margin: 0;
	top: 0;
	position: absolute;
	z-index: 99;
	
	@include breakpoint($navbar-bp) {
		background-color: $clear;
		padding: 0;
		margin: 0;
	}
}

// Change button icon if menu is open.
#osu-nav-trigger[aria-expanded="true"] {
	position: relative;
	border-left: none;
	z-index: 999;

	@include breakpoint(md) {
		margin-right: -2px;
	}

	&::after {
		content: "\f105";
	}

	&::before {
		color: $gray-dark-80;
		content: "";
		font-family: $sans;
		font-weight: 700;
		position: absolute;
		right: 50px;
		top: 10px;
	}
}

// Style links.
.bux-osu-nav__link {
	@include breakpoint($navbar-bp) {
		padding: $sp-12;
	}
	border-bottom: 2px solid $gray-light-60;

	&:first-child {
		border-top: 2px solid $gray-light-60;
	}

	a {
		@include link-base(light, no);
		border-bottom: none;
		color: $gray-dark-60;
		display: block;
		padding: $sp-12;
		font-weight: 700;
		@include breakpoint($navbar-bp) {
			display: inline;
			padding: 0;
		}
		&:hover,
		&:focus {
			border-left: 4px solid #3f4443;
			padding-left: 8px;
			color: $scarlet;

			@include breakpoint($navbar-bp) {
				border-left: none;
				padding-left: 0;
			}
		}
	}

	@include breakpoint($navbar-bp) {
		display: inline-block;
		margin: 0;
		margin-left: $sp-8;
		border-bottom: none;

		&:first-child {
			border-top: none;
		}

		a {
			font-size: $ts-base;

			&:hover {
				color: $scarlet;
				border-bottom: 1px solid $scarlet;
			}
		}
	}
}
  • URL: /components/raw/osu-navbar/_osu-navbar.scss
  • Filesystem Path: src/components/osu-navbar/_osu-navbar.scss
  • Size: 3.2 KB
  • Content: 
    const osuNavs = Array.from(document.querySelectorAll(".bux-osu-nav"));
if (osuNavs) {
    osuNavs.forEach((osuNav) => {
        let isMobile = false;
        let isOpen = false;
        const navButton = osuNav.querySelector("#osu-nav-trigger");
        let navLinks = osuNav.querySelectorAll(".bux-osu-nav__link > a");
        navLinks = Array.prototype.slice.call(navLinks);
        const navOverlay = osuNav.querySelector(".bux-osu-nav__overlay");
        const navMenu = osuNav.querySelector("#osu-navlinks-block");
        // const osuNav = document.querySelector('#osu-navlinks');
        // Toggles menu open and closed
        navButton.addEventListener("click", () => {
            if (navButton.getAttribute("aria-expanded") === "false") {
                // open dropdown menu
                navButton.setAttribute("aria-expanded", "true");
                navOverlay.style.display = "block";
                isOpen = true;
                navMenu.setAttribute("aria-modal", "true");
                const menuLinksHeight =
                    document.querySelector("#osu-navlinks").clientHeight - 55; 
                osuNav.style.marginBottom = menuLinksHeight + "px";
            } else {
                closeMenu();
            }
        });

        navButton.addEventListener("keydown", (e) => {
            switch (e.keyCode) {
                case 13: // Enter key
                    e.preventDefault();
                    if (navButton.getAttribute("aria-expanded") === "false") {
                        // open dropdown menu
                        navButton.setAttribute("aria-expanded", "true");
                        navOverlay.style.display = "block";
                        isOpen = true;
                        navMenu.setAttribute("aria-modal", "true");
                        const menuLinksHeight =
                            document.querySelector(
                                "#osu-navlinks"
                            ).clientHeight - 55;
                        osuNav.style.marginBottom = menuLinksHeight + "px";
                    } else {
                        closeMenu();
                    }
                    break;

                case 27: // Escape key
                    closeMenu();
                    break;

                case 9: // Tab key
                    // If moving focus backwards, move focus to last nav item
                    if (e.shiftKey && isOpen) {
                        e.preventDefault();
                        navLinks[navLinks.length - 1].focus();
                    }
                    break;
            }
        });

        osuNav.addEventListener("keydown", (e) => {
            if (isMobile) {
                switch (e.keyCode) {
                    case 27: // Escape key
                        closeMenu();
                        break;

                    case 9: // Tab key
                        // Move focus to navButton if on last nav item
                        if (
                            e.target === navLinks[navLinks.length - 1] &&
                            !e.shiftKey
                        ) {
                            e.preventDefault();
                            navButton.focus();
                        }
                        break;
                }
            }
        });

        navOverlay.addEventListener("click", () => {
            closeMenu();
        });

        function closeMenu() {
            navButton.setAttribute("aria-expanded", "false");
            navOverlay.style.display = "none";
            navMenu.removeAttribute("aria-modal");
            isOpen = false;
            // Move focus back to navButton
            navButton.focus();
            osuNav.style.marginBottom = 0;
        }

        function resetAria() {
            if (!isMobile) {
                osuNav.removeAttribute("aria-labelledby");
            } else {
                osuNav.setAttribute("aria-labelledby", "osu-nav-trigger");
            }
            if (isOpen) {
                osuNav.removeAttribute("aria-modal");
            } else if (!isOpen) {
                osuNav.setAttribute("aria-modal", "true");
            }
        }

        function handleResize() {
            const currentViewport = isMobile;
            // check if mobile viewport size
            if (
                window
                    .getComputedStyle(
                        document.querySelector("#osu-nav-trigger"),
                        null
                    )
                    .getPropertyValue("display") === "none"
            ) {
                isMobile = false;
            } else {
                isMobile = true;
            }

            if (currentViewport !== isMobile) {
                // viewport has changed between mobile and desktop widths
                resetAria();
                if (!isMobile) {
                    closeMenu();
                }
            }
        }

        handleResize();
        window.addEventListener("resize", function () {
            handleResize();
        });
    });
}
  • URL: /components/raw/osu-navbar/osu-navbar.js
  • Filesystem Path: src/components/osu-navbar/osu-navbar.js
  • Size: 5.1 KB

No notes defined.