<nav role="navigation" aria-label="Main Navigation" class="block-superfish-alt">
<h2 class="block-title element-invisible">Main Menu</h2>
<ul id="superfish-main-accordion" class="menu sf-menu sf-main sf-style-none sf-accordion sf-expanded">
<li class="sf-depth-1 sf-no-children">
<a href="#" class="sf-depth-1 menuparent">Admissions</a>
<ul class="sf-hidden" style="float: none;">
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Undergraduate</a></li>
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Graduate</a></li>
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">International</a></li>
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Distance and online</a></li>
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Cost and aid</a></li>
</ul>
</li>
</li>
<li class="sf-depth-1 sf-no-children">
<a href="#" class="sf-depth-1 menuparent">Academics</a>
<ul class="sf-hidden" style="float: none;">
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Areas of study</a></li>
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Leading programs</a></li>
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Career center</a></li>
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Colleges</a></li>
</ul>
</li>
</li>
<li class="sf-depth-1 sf-no-children">
<a href="#" class="sf-depth-1 menuparent">Research</a>
<ul class="sf-hidden" style="float: none;">
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Students</a></li>
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Faculty</a></li>
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Areas of excellence</a></li>
</ul>
</li>
</li>
<li class="sf-depth-1 sf-no-children">
<a href="#" class="sf-depth-1 menuparent">Hawkeye life</a>
<ul class="sf-hidden" style="float: none;">
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Iowa City</a></li>
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Living on campus</a></li>
</ul>
</li>
</li>
<li class="sf-depth-1 sf-no-children">
<a href="#" class="sf-depth-1 menuparent">News</a>
<ul class="sf-hidden" style="float: none;">
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Events</a></li>
<li class="sf-depth-2 sf-no-children">
<a href="#" class="sf-depth-2">Media resources</a></li>
</ul>
</li>
</li>
</ul>
</nav>
<style>
/**
* sfSmallscreen.
*/
ul.sf-menu.sf-expanded ul {
position: relative;
display: block;
}
.block-superfish-alt .sf-style-none>li.sf-expanded>a.sf-depth-1.menuparent::before,
.block-superfish-alt .menu>li.sf-expanded>a.sf-depth-1.menuparent::before {
content: "\f077";
}
ul.sf-menu.sf-accordion {
display: block !important;
position: absolute;
}
</style>
/*
.block-superfish-alt .block-title {
display: block;
text-transform: uppercase;
color: #666;
font-size: 23px;
font-weight: 300;
}
.sf-menu {
float: none;
@extend %no-ul-list;
font-size: $base-font-size;
ul li {
font-size: 1.2rem;
}
.site-header__left &,
.site-header__center & {
width: 100%;
}
.site-header__left & {
padding: 0;
}
}
.block-superfish-alt {
#superfish-main-toggle {
position: absolute;
top: 90px;
right: 0;
padding: $sm;
color: $grey;
&:before {
content: "\f0c9";
font-size: $h5-font-size;
@include fas();
}
&.sf-expanded {
&:before {
content: "\f00d";
font-size: $h5-font-size;
@include fas();
}
}
span {
@include element-invisible;
}
}
}
.block-superfish-alt {
// Shared styles
.sf-style-none,
.menu {
overflow: visible;
@include clearfix;
li {
li {
a {
&:after {
height: 1px;
}
}
}
a {
position: relative;
padding: $md;
transition: background 0.8s ease-out;
text-decoration: none;
color: $secondary;
font-weight: $font-weight-medium-bold;
@extend %font-smoothing-on;
&:after{
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 2px;
content: "";
transition: 300ms;
}
&:hover:after,
&:focus:after {
width: 100%;
}
}
&.sf-depth-1 ul {
top: 100%;
}
}
.sf-sub-indicator {
display: none;
}
// Top level menu items.
a.sf-depth-1 {}
>li>a.sf-depth-1.menuparent {
position: relative;
@include padding($right: $xlg);
&:before {
position: absolute;
top: 50%;
right: $xsm;
margin-top: -0.4rem;
content: "\f078";
color: inherit;
font-size: $base-font-size;
@include fas();
}
}
// Dropdown items.
ul {
box-shadow: (0px 0px 3px rgba(0, 0, 0, 0.3));
@extend %font-smoothing-on;
li a {
color: $white;
}
}
}
// Horizontal styles.
.sf-horizontal {
@include flexbox;
align-items: center;
margin-top: auto;
li:hover>ul,
li.sfHover>ul {
top: 0%;
}
li.sf-depth-1:hover>ul,
li.sf-depth-1.sfHover>ul {
top: 100%;
}
li.sf-depth-1.active-trail>a {
}
li:first-child a.sf-depth-1 {
.site-header__left & {
@include padding($left: 0);
}
}
a.sf-depth-1.menuparent {
&.active {
background: transparent;
}
}
}
.sf-with-ul {
@include flexbox;
align-items: center;
justify-content: space-between;
&:before {
order: 2;
content: $base-font-size;
@include fas();
}
&:only-child {
&:before {
content: '';
}
}
}
// Accordion styles.
.sf-accordion {
float: none !important;
width: auto !important;
margin-bottom: 1rem;
li {
&.sf-clone-parent>a.sf-depth-1 {
background: inherit;
&:hover,
&:focus {
background-color: $white;
box-shadow: none;
}
}
a.sf-depth-1.menuparent:before {
color: $secondary;
}
a {
&.sf-depth-1 {
color: $secondary;
background: #fff;
@extend %font-smoothing-on;
font-size: 1.6rem;
}
&:hover,
&:focus {
background-color: $white;
box-shadow: none;
}
}
}
.sf-with-ul {
@include flexbox;
align-items: center;
justify-content: space-between;
&:before {
position: absolute;
top: 50%;
right: $md;
order: 2;
margin-top: -0.7rem;
content: "\f0c9";
color: $secondary;
font-size: $base-font-size;
@include fas();
}
&:only-child {
&:before {
content: '';
}
}
}
}
ul.sf-menu.menu.sf-accordion {}
}
.block-superfish-alt .menu.sf-accordion li a {
padding: .6rem 0;
}
.block-superfish-alt .menu.sf-accordion ul {
box-shadow: none;
li {
background: $white;
a {
color: #666;
}
}
}
*/
$('#superfish-main-accordion li a.menuparent').click(function () {
// $('#superfish-main-accordion li ul').removeClass('sf-hidden');
//$(this).closest("ul").toggleClass('sf-hidden');
$(this).siblings('ul').toggleClass('sf-hidden');
$(this).parent().toggleClass('sf-expanded');
//$('#superfish-main-accordion li').addClass('sf-expanded');
$(this).toggleClass('active');
});