Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/navigation-standard.html#mobile-navigations
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">
<button class="drop-down-btn plus-toggle" data-bs-toggle="dropdown" aria-label="plus button" aria-expanded="true">
<a>Orientation</a>
<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="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-10px, 43px, 0px);" data-popper-placement="bottom-end">
<a class="dropdown-item normal-link" href="">Freshman Orientation</a>
<a class="dropdown-item normal-link" href="">Transfer Orientation</a>
<a class="dropdown-item normal-link" href="">International Orientation</a>
<a class="dropdown-item normal-link" href="">UTSA Online Orientation</a>
<a class="dropdown-item normal-link" href="https://graduateschool.utsa.edu/current-students/Graduate-Student-Orientation.html">Graduate Orientation</a>
</div>
</li>
<li class="nav-item">
<button class="drop-down-btn plus-toggle" data-bs-toggle="dropdown" aria-label="plus button" aria-expanded="false">
<a>Extra Experiences</a>
<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="/orientation/extra/">Very New Student Extended Experiences</a>
<a class="dropdown-item normal-link" href="/orientation/extra/">New Student Resource Videos</a>
<a class="dropdown-item normal-link" href="/orientation/videos/">Family Orientation</a>
</div>
</li>
<li class="nav-item">
<button class="drop-down-btn plus-toggle" data-bs-toggle="dropdown" aria-label="plus button" aria-expanded="false">
<a>More Information</a>
<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="/orientation/faqs/">Orientation FAQs</a>
<a class="dropdown-item normal-link" href="/orientation/fee/">Orientation Fee</a>
<a class="dropdown-item normal-link" href="/orientation/accessibility-accommodations/">Orientation
Accommodations</a>
<a class="dropdown-item normal-link" href="/orientation/after-orientation/">Post-Orientation Checklist</a>
</div>
</li>
<li class="mobile-nav-btns orange-action-btn">
<a href="/check-status/" class="action-btn display-block">Check Status <span class="white acton-icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></a>
</li>
</ul>
</div>
</div>
</div>
/* components/03-sections/02-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;
}
}
@include color-mode(dark) {
.department-menu-bar .sidebar {
background-color:$grey-e;
li.nav-item {
span.heading, span.no-link {
color: $grey;
}
a {
color:$grey;
border-bottom:1px solid $orange;
&:hover {
background-color: $blue;
}
&:active, &:focus {
background-color: $orange-a11y;
}
}
&:first-child a {
border-top:1px solid $orange;
}
.disabled-link {
color: $grey-c;
}
}
.dropdown-menu {
background-color: $grey-e;
}
li.nav-item button span:first-child {
color: $white;
}
.nav-item .plus-toggle {
color: $orange;
}
}
}
/* END side-navigation.scss */
<!-- Side Navigation -->
<div class="department-menu-bar">
<div class="des-default-show">
<div class="sidebar">
<ul class="list-unstyled">
<li class="nav-item">
<button class="drop-down-btn plus-toggle" data-bs-toggle="dropdown" aria-label="plus button"
aria-expanded="true">
<a>Orientation</a>
<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="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-10px, 43px, 0px);"
data-popper-placement="bottom-end">
<a class="dropdown-item normal-link" href="">Freshman Orientation</a>
<a class="dropdown-item normal-link" href="">Transfer Orientation</a>
<a class="dropdown-item normal-link" href="">International Orientation</a>
<a class="dropdown-item normal-link" href="">UTSA Online Orientation</a>
<a class="dropdown-item normal-link"
href="https://graduateschool.utsa.edu/current-students/Graduate-Student-Orientation.html">Graduate Orientation</a>
</div>
</li>
<li class="nav-item">
<button class="drop-down-btn plus-toggle" data-bs-toggle="dropdown" aria-label="plus button"
aria-expanded="false">
<a>Extra Experiences</a>
<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="/orientation/extra/">Very New Student Extended Experiences</a>
<a class="dropdown-item normal-link" href="/orientation/extra/">New Student Resource Videos</a>
<a class="dropdown-item normal-link" href="/orientation/videos/">Family Orientation</a>
</div>
</li>
<li class="nav-item">
<button class="drop-down-btn plus-toggle" data-bs-toggle="dropdown" aria-label="plus button"
aria-expanded="false">
<a>More Information</a>
<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="/orientation/faqs/">Orientation FAQs</a>
<a class="dropdown-item normal-link" href="/orientation/fee/">Orientation Fee</a>
<a class="dropdown-item normal-link"
href="/orientation/accessibility-accommodations/">Orientation
Accommodations</a>
<a class="dropdown-item normal-link" href="/orientation/after-orientation/">Post-Orientation Checklist</a>
</div>
</li>
<li class="mobile-nav-btns orange-action-btn">
<a href="/check-status/" class="action-btn display-block">Check Status <span
class="white acton-icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></a>
</li>
</ul>
</div>
</div>
</div>