Side Navigation: Default

Exported

Notes
HTML
SCSS
View

Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/navigation-standard.html#mobile-navigations

Implementation Notes

The Side-Navigation is intended to provide users with an alternate (smaller) level navigation. Utilized by subfolders within a college site (think internal department pages). For examples of correct usage of this component, please see any of the Reference Pages.


        
        <!-- Side Navigation -->
<div class="department-menu-bar">
    <div class="des-default-show">
        <div class="sidebar">
            <ul class="list-unstyled">
                <li class="nav-item"><a href="#" aria-label="Virtual Visit">Virtual Visit</a></li>
                <li class="nav-item"><a href="#" aria-label="Request Information">Request Information</a></li>
                <li class="nav-item ">
                    <button class="drop-down-btn plus-toggle" data-bs-toggle="dropdown" aria-label="plus button" aria-expanded="false">

                        <span id="admissionRequirements" aria-label="admissionRequirements menu dropdown" class="dropdown-label">Admission Requirements</span>
                        <span class="plus-icn"><i class="fas fa-plus" aria-hidden="true"></i></span>
                        <span class="minus-icn" style="display: none;"><i class="fas fa-minus" aria-hidden="true"></i></span>
                    </button>
                    <div class="dropdown-menu position-relative" style="">
                        <a class="dropdown-item normal-link" href="#" aria-label="Normal">Normal</a>
                        <a class="dropdown-item active-link" href="#" aria-label="Active">Active</a>
                        <a class="dropdown-item disabled-link" href="#" aria-label="Disabled">Disabled</a>
                    </div>
                </li>
                <li class="nav-item"><a href="#" aria-label="Admission Forms">Admission Forms</a></li>
                <li class="nav-item"><a href="#" aria-label="Scholarships &amp; Financial Aid">Scholarships &amp; Financial Aid</a></li>
                <li class="nav-item"><a href="#" aria-label="Net Price Calculator">Net Price Calculator</a></li>
                <li class="mobile-nav-btns orange-action-btn">
                    <a href="#" class="action-btn display-block">Apply <span class="white acton-icon"><i class="fas fa-arrow-right"></i></span></a>
                    <a href="#" class="action-btn display-block">Visit <span class="white acton-icon"><i class="fas fa-arrow-right"></i></span></a>
                    <a href="#" class="action-btn display-block">Request Info<span class="white acton-icon"><i class="fas fa-arrow-right"></i></span></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- End Side Navigation -->

File:

Content:


                                /* components/02-components/07-navigation/03-side-navigation/side-navigation.scss */
/* BEGIN side-navigation.scss */
.department-menu-bar>.dropdown-toggle.show::after {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.department-menu-bar>.dropdown-toggle::after {
	font-size: 30px;
	position: absolute;
	right: 35px;
	top: 40px;
}

.department-menu-bar.show>.dropdown-toggle::after {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.department-menu-bar {
	position: relative;
	padding: 0 0 0 30px;
	
	.nav-item button a {
		width: 100%;
	}

	.dropdown-menu {
		width: 100%;
		position: initial !important;
		-webkit-transform: none !important;
		-ms-transform: none !important;
		transform: none !important;
	}

	.sidebar {
		background-color: $white;

		a {
			text-decoration: none;
		}

		li.nav-item.heading a, li.nav-item.heading span.heading {
			font-weight: 800;
			font-size: 1.4rem;

		}
		
		li.nav-item.heading > div.dropdown-menu > a.dropdown-item {
			font-size: 17px;
			font-weight: 400;
		}

		li.nav-item:first-child {
			a, span.heading {
				border-top: 1px $orange-a11y solid;
			}

			div.dropdown-menu a {
				border-top: none;
			}
		}

		li.nav-item a, li.nav-item span.heading, li.nav-item button span:first-child, li.nav-item span.no-link {
			font-size: 1.2rem;
			border-bottom: 1px $orange-a11y solid;
		}

		.nav-item {
			position: relative;
			margin-bottom: 0;
			//unset normal bootstrap ::after look/feel
			.dropdown-toggle::after {
				content: unset;
			}	
		}

		.nav-item .plus-toggle {
			position: relative;
			width: 100%;
			color: $orange-a11y;
			z-index: 9;
			cursor: pointer;
			background-color: transparent;
			padding: 0px;
			border: none;
		}

		.nav-item {
			.plus-icn, .minus-icn {
				position: absolute;
				right: 10px;
				top: 17px;
				width: 3%;
			}
		}

		.nav-item .plus-toggle.show .plus-icn {
			display: none;
		}

		.nav-item .plus-toggle.show .minus-icn {
			display: block !important;
		}

		.nav-item.show .plus-icn {
			display: none;
		}

		.nav-item.show .minus-icn {
			display: block !important;
		}

		.mobile-nav-btns .action-btn {
			margin-bottom: 12px;
		}

		li.nav-item a, li.nav-item span.heading {
			font-size: 17px;
			color: $blue;
			font-weight: 400;
			display: block;
			padding-bottom: 14px;
			padding-top: 14px;
			padding-left: 15px;
			padding-right: 15px;
		}

		li.nav-item span.no-link {
			font-size: 17px;
			color: $grey-e;
			font-weight: 400;
			display: block;
			padding-bottom: 14px;
			padding-top: 14px;
			padding-left: 15px;
			padding-right: 15px;
		}

		li.nav-item button a, li.nav-item button span:first-child {
			font-size: 17px;
			color: $blue;
			font-weight: 400;
			display: block;
			padding-bottom: 14px;
			padding-top: 14px;
			padding-left: 15px;
			padding-right: 15px;
			text-align: left;
		}

		.active-link {
			background-color: $orange-a11y;
			color: $white !important;
		}

		.active-link:hover {
			background-color: $grey !important;
			color: $grey-e !important;
		}

		.normal-link:hover {
			background-color: $grey !important;
			color: $grey-e !important;
		}

		.disabled-link {
			pointer-events: none;
			-webkit-filter: blur(0.6px);
			filter: blur(0.6px);
		}

		.dropdown-menu {
			-webkit-transform: none !important;
			-ms-transform: none !important;
			transform: none !important;
			width: 100% !important;
			border: none !important;
			background-color: $white-b;
			margin: 0px;
			padding-left: 15px;
			padding-right: 15px;
			margin-bottom: 15px;
			padding-bottom: 10px;
		}

		.dropdown-menu .dropdown-item:last-child {
			border: none;
		}

		.nav-item.show {
			background-color: transparent;
		}

		.nav-item.show>a {
			border-bottom: none;
		}

		.nav-item>a.drop-down-btn {
			position: relative;
		}

		// .nav-item>a.show>.drop-down-btn::after {
		// 	content: '+';
		// 	position: absolute;
		// 	right: 0px;
		// 	color: $orange-b;
		// 	border: none;
		// }

		// .nav-item>a.drop-down-btn::after {
		// 	content: '+';
		// 	position: absolute;
		// 	right: 0px;
		// 	color: $orange-b;
		// 	border: none;
		// }

		.dropdown-item {
			padding: 0px;
			cursor: pointer;
			white-space: normal;
		}

		// .nav-item.show>a.drop-down-btn::after {
		// 	content: '-';
		// }

		// .nav-item.show>a.dropdown-toggle::after {
		// 	content: '-';
		// }

		button.dropdown-toggle.lgs-hide.show {
			background: $grey;
			color: $blue;
		}
	}

}

@include media-breakpoint-down(lg) {
	.department-menu-bar>.dropdown-toggle {
		font-size: 18px;
	}

	.department-menu-bar>.dropdown-toggle::after {
		right: 15px;
		top: 35px;
	}

	.department-menu-bar {
		.sidebar {
			background-color: #fff;
			padding: 16px 30px;
		}

		.nav-item>a.drop-down-btn::after {
			right: 0px;
		}
	}
}

@include media-breakpoint-up(md) {
	.des-default-show {
		display: block !important;
		border: none;
	}
}

@include media-breakpoint-down(sm) {
	.department-menu-bar {
		padding: 0px;
	}
	.dropdown-item{
		white-space: normal;
	}
}
/* END side-navigation.scss */

URL: /components/raw/side-navigation/side-navigation.scss
Filesystem Path: components/03-sections/02-navigation/03-side-navigation/side-navigation.scss
Size: 5.1 KB


        <!-- Side Navigation -->
<div class="department-menu-bar">
    <div class="des-default-show">
        <div class="sidebar">
            <ul class="list-unstyled">
                <li class="nav-item"><a href="#" aria-label="Virtual Visit">Virtual Visit</a></li>
                <li class="nav-item"><a href="#" aria-label="Request Information">Request Information</a></li>
                <li class="nav-item " >
                    <button class="drop-down-btn plus-toggle" data-bs-toggle="dropdown" aria-label="plus button"
                        aria-expanded="false">

                        <span id="admissionRequirements" aria-label="admissionRequirements menu dropdown" class="dropdown-label">Admission Requirements</span>
                        <span class="plus-icn"><i class="fas fa-plus" aria-hidden="true"></i></span>
                        <span class="minus-icn" style="display: none;"><i class="fas fa-minus"
                                aria-hidden="true"></i></span>
                    </button>
                    <div class="dropdown-menu position-relative" style="">
                        <a class="dropdown-item normal-link" href="#" aria-label="Normal">Normal</a>
                        <a class="dropdown-item active-link" href="#" aria-label="Active">Active</a>
                        <a class="dropdown-item disabled-link" href="#" aria-label="Disabled">Disabled</a>
                    </div>
                </li>
                <li class="nav-item"><a href="#" aria-label="Admission Forms">Admission Forms</a></li>
                <li class="nav-item"><a href="#" aria-label="Scholarships &amp; Financial Aid">Scholarships &amp; Financial Aid</a></li>
                <li class="nav-item"><a href="#" aria-label="Net Price Calculator">Net Price Calculator</a></li>
                <li class="mobile-nav-btns orange-action-btn">
                    <a href="#" class="action-btn display-block">Apply <span class="white acton-icon"><i
                                class="fas fa-arrow-right"></i></span></a>
                    <a href="#" class="action-btn display-block">Visit <span class="white acton-icon"><i
                                class="fas fa-arrow-right"></i></span></a>
                    <a href="#" class="action-btn display-block">Request Info<span class="white acton-icon"><i
                                class="fas fa-arrow-right"></i></span></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- End Side Navigation -->

Side Navigation: Default

Side-Navigation Documentation

Implementation Notes