Menus
Secondary navigation menu
The secondary navigation menu is a fully responsive menu. For mobile and tablet views, the menu is collapsed by default. For larger screens, the menu is always expanded. JavaScript is used to handle expanding and collapsing the menu for mobile and tablet views.
Code
<script src="../js/jquery-2.2.4.min.js"></script>
<script src="../js/COC.Nav.js"></script>
<script>
$(document).ready(function() {
COC.Nav.InitLocalNav();
});
</script>
<nav id="nav-secondary" class="nav-secondary localNav">
<button class="nav-btn-mobile expandBtn" type="button" aria-controls="nav-secondary" aria-haspopup="true" aria-label="Open the secondary navigation menu">Secondary navigation menu name</button>
<button class="nav-btn-mobile collapseBtn" type="button" aria-controls="nav-secondary" aria-label="Close the secondary navigation menu">Secondary navigation menu name</button>
<ul class="nav-menu">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">Lorem ipsum dolor</a>
<ul>
<li><a href="#">Child link 1</a></li>
<li><a href="#">Child link 2</a></li>
</ul>
</li>
<li><a href="#">Consectetur adipiscing</a></li>
<li class="active"><a href="#">Active link</a></li>
<li>
<a href="#">Mattis augue finibus</a>
<ul>
<li><a href="#">Child link 3</a></li>
<li><a href="#">Child link 4</a></li>
</ul>
</li>
</ul>
</nav>
Mega menu
Code
<script src="../js/jquery-2.2.4.min.js"></script>
<script src="../js/COC.Nav.js"></script>
<script>
$(document).ready(function() {
COC.Nav.Init();
});
</script>
<nav class="cui coc-nav globalNav coc-secondary-9L-nav" role="navigation" id="navId">
<ul class="nav-menu">
<button type="button" id="exploreBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu expanded">Explore<span class="cicon-bars"></span></button>
<button type="button" id="closeBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu collapsed">Close<span class="cicon-times"></span></button>
<li class="nav-item">
<a href="#" class="boldFont coc-secondary-9L firstMenuItem"> Programs and services <span class="cicon-angle-down"></span></a>
<div class="sub-nav">
<span class="nav_background" aria-hidden="true"></span>
<ul id="programsAndServices">
<li aria-hidden="true" class="closeSubNavGroup" tabindex="0">
<a href="#" aria-hidden="true" referrerpolicy="origin">close<span class="cicon-times"></span></a>
</li>
<li class="sub-nav-group col-3 border-r-None">
<ul class="cui catalogue-group catalogue-detail without-bg-color">
<li>
<a class="catalogue-title-link" href="#">
<span class="cui cicon-responsive program-service-transportation-icon" aria-hidden="true"></span>
<span class="catalogue-title h3">Transpotation<span class="cicon-arrow-circle-right"></span></span>
</a>
<ul class="group-links">
<li><a href="#">Morbi rutrum lorem</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Praesent semper</a></li>
<li><a href="#">Ut id leo blandit</a></li>
<li><a href="#">Nam lobortis ante quis</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub-nav-group col-3 border-r-None">
<ul class="cui catalogue-group catalogue-detail without-bg-color">
<li>
<a class="catalogue-title-link" href="#">
<span class="cui cicon-responsive program-service-parks-recreation-icon" aria-hidden="true"></span>
<span class="catalogue-title h3">Parks and recreation<span class="cicon-arrow-circle-right"></span></span>
</a>
<ul class="group-links">
<li><a href="#">Morbi rutrum lorem</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Praesent semper</a></li>
<li><a href="#">Ut id leo blandit</a></li>
<li><a href="#">Nam lobortis ante quis</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub-nav-group col-3 border-r-None">
<ul class="cui catalogue-group catalogue-detail without-bg-color">
<li>
<a class="catalogue-title-link" href="#">
<span class="cui cicon-responsive program-service-social-services-icon" aria-hidden="true"></span>
<span class="catalogue-title h3">Social services<span class="cicon-arrow-circle-right"></span></span>
</a>
<ul class="group-links">
<li><a href="#">Morbi rutrum lorem</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Praesent semper</a></li>
<li><a href="#">Ut id leo blandit</a></li>
<li><a href="#">Nam lobortis ante quis</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub-nav-group col-3 border-r-None">
<ul class="cui catalogue-group catalogue-detail without-bg-color">
<li>
<a class="catalogue-title-link" href="#">
<span class="cui cicon-responsive program-service-bylaws-publicSafety-icon" aria-hidden="true"></span>
<span class="catalogue-title h3">Bylaws and public safety<span class="cicon-arrow-circle-right"></span></span>
</a>
<ul class="group-links">
<li><a href="#">Morbi rutrum lorem</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Praesent semper</a></li>
<li><a href="#">Ut id leo blandit</a></li>
<li><a href="#">Nam lobortis ante quis</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub-nav-group col-3 border-r-None">
<ul class="cui catalogue-group catalogue-detail without-bg-color">
<li>
<a class="catalogue-title-link" href="#">
<span class="cui cicon-responsive program-service-building-planning-icon" aria-hidden="true"></span>
<span class="catalogue-title h3">Building in Calgary<span class="cicon-arrow-circle-right"></span></span>
</a>
<ul class="group-links">
<li><a href="#">Morbi rutrum lorem</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Praesent semper</a></li>
<li><a href="#">Ut id leo blandit</a></li>
<li><a href="#">Nam lobortis ante quis</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub-nav-group col-3 border-r-None">
<ul class="cui catalogue-group catalogue-detail without-bg-color">
<li>
<a class="catalogue-title-link" href="#">
<span class="cui cicon-responsive program-service-environment-icon" aria-hidden="true"></span>
<span class="catalogue-title h3">Environment<span class="cicon-arrow-circle-right"></span></span>
</a>
<ul class="group-links">
<li><a href="#">Morbi rutrum lorem</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Praesent semper</a></li>
<li><a href="#">Ut id leo blandit</a></li>
<li><a href="#">Nam lobortis ante quis</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub-nav-group col-3 border-r-None">
<ul class="cui catalogue-group catalogue-detail without-bg-color">
<li>
<a class="catalogue-title-link" href="#">
<span class="cui cicon-responsive program-service-taxes-propertyAssessment-icon" aria-hidden="true"></span>
<span class="catalogue-title h3">Taxes and property assessment<span class="cicon-arrow-circle-right"></span></span>
</a>
<ul class="group-links">
<li><a href="#">Morbi rutrum lorem</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Praesent semper</a></li>
<li><a href="#">Ut id leo blandit</a></li>
<li><a href="#">Nam lobortis ante quis</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub-nav-group col-3 border-r-None">
<ul class="cui catalogue-group catalogue-detail without-bg-color">
<li>
<a class="catalogue-title-link" href="#">
<span class="cui cicon-responsive program-service-animal-service-icon" aria-hidden="true"></span>
<span class="catalogue-title h3">Animal service<span class="cicon-arrow-circle-right"></span></span>
</a>
<ul class="group-links">
<li><a href="#">Morbi rutrum lorem</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Praesent semper</a></li>
<li><a href="#">Ut id leo blandit</a></li>
<li><a href="#">Nam lobortis ante quis</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="#" class="coc-secondary-9L"> Events </a>
</li>
<li class="nav-item">
<a href="#" class="coc-secondary-9L"> Maps </a>
</li>
<li class="nav-item">
<a href="#" class="coc-secondary-9L boldFont">Council <span class="cicon-angle-down"></span></a>
<div class="sub-nav">
<span class="nav_background" aria-hidden="true"></span>
<ul>
<li aria-hidden="true" class="closeSubNavGroup" tabindex="0"><a href="#" aria-hidden="true">close<span class="cicon-times"></span></a></li>
<li class="sub-nav-group col-2">
<a class="h3 font-bold" href="">City Council <span class="cicon-arrow-circle-right"></span></a>
<ul>
<li><a href="/CityCouncil/Pages/About-Calgary-City-Council.aspx" class="font-bold highlight-font">About Council</a>
<ul>
<li><a href="/CityCouncil/Pages/How-Does-City-Council-Work.aspx">How does Council work?</a></li>
<li><a href="/CityCouncil/Pages/City-Council-Brief-History.aspx" class="">A Brief History</a></li>
</ul>
</li>
<li><a href="/citycouncil/Pages/Get-Involved.aspx" class="font-bold highlight-font">Get Involved</a>
<ul>
<li><a href="/CityCouncil/Pages/City-Hall-101.aspx" class="">City Hall 101</a></li>
<li><a href="/CityCouncil/Pages/City-Council-Elections.aspx" class="">Elections</a></li>
</ul>
</li>
<li><a href="/citycouncil/Pages/City-Council-News.aspx" class="font-bold highlight-font">News</a>
<ul>
<li><a href="/CityCouncil/Pages/CouncilWardNewsBrief.aspx" class="">Council News in Brief</a></li>
<li><a href="/CityCouncil/Pages/CouncilWardSignUp.aspx" class="">Sign up for Ward news</a></li>
</ul>
</li>
<li class=""><a href="/CityCouncil/Pages/City-Council-Meetings.aspx" class="font-bold highlight-font">Council Meetings</a></li>
</ul>
</li>
<li class="sub-nav-group col-4">
<a class="h3 font-bold" href="/CityCouncil/Pages/Councillors-and-Wards.aspx">Councillors and Wards <span class="cicon-arrow-circle-right"></span></a>
<ul>
<span class="col-6 border-r-None">
<li><a href="/CityCouncil/ward-1/Pages/WardDefault.aspx" >Ward 1 - Ward Sutherland</a></li>
<li><a href="/CityCouncil/ward-2/Pages/WardDefault.aspx">Ward 2 - Joe Magliocca</a></li>
<li><a href="/CityCouncil/ward-3/Pages/WardDefault.aspx" >Ward 3 - Jim Stevenson</a></li>
<li><a href="/CityCouncil/ward-4/Pages/WardDefault.aspx" >Ward 4 - Sean Chu</a></li>
<li><a href="/CityCouncil/ward-5/Pages/WardDefault.aspx" >Ward 5 - Ray Jones</a></li>
<li><a href="/CityCouncil/ward-6/Pages/WardDefault.aspx" >Ward 6 - Richard Pootmans</a></li>
<li><a href="/CityCouncil/ward-7/Pages/WardDefault.aspx" >Ward 7 - Druh Farrell</a></li>
</span>
<span class="col-6 border-r-None">
<li><a href="/CityCouncil/ward-8/Pages/WardDefault.aspx" >Ward 8 - Evan Woolley</a></li>
<li><a href="/CityCouncil/ward-9/Pages/WardDefault.aspx" >Ward 9 - Gian-Carlo Carra</a></li>
<li><a href="/CityCouncil/ward-10/Pages/WardDefault.aspx" >Ward 10 - Andre Chabot</a></li>
<li><a href="/CityCouncil/ward-11/Pages/WardDefault.aspx" >Ward 11 - Brian Pincott</a></li>
<li><a href="/CityCouncil/ward-12/Pages/WardDefault.aspx" >Ward 12 - Shane Keating</a></li>
<li><a href="/CityCouncil/ward-13/Pages/WardDefault.aspx" >Ward 13 - Diane Colley-Urquhart</a></li>
<li><a href="/CityCouncil/ward-14/Pages/WardDefault.aspx" >Ward 14 - Peter Demong</a></li>
</span>
</ul>
<ul>
<li><a href="/CityCouncil/Pages/FindYourCouncillor.aspx" class="menu-btn cui btn-md primary-ghost">Find your Councillor & Ward</a></li>
</ul>
</li>
<li class="sub-nav-group col-4">
<a class="h3 font-bold no-link" href="">Ward Information</a>
<ul>
<li>
<ul>
<span class="col-8 border-r-None">
<li><a href="/CityCouncil/Pages/WardBoundaryMap.aspx" class="font-bold highlight-font">Ward and Community Map</a></li>
<li><a href="/CityCouncil/Pages/CouncilWardSignUp.aspx" class="font-bold highlight-font">Sign up for Ward News</a></li>
<li><a href="/citycouncil/Pages/Ward-Community-Events-Fund.aspx" class="font-bold highlight-font">Ward Community Events Fund</a></li>
<li><a href="/citycouncil/Pages/City-Council-Accountability.aspx" class="font-bold highlight-font">Accountability</a></li>
<li class=""><a href="/citycouncil/Pages/Contact-the-Office-of-the-Councillors.aspx" class="font-bold highlight-font">Contact The Office of The Councillors</a>
</li><li><a href="/citycouncil/Pages/Contact-your-Councillor.aspx" class="font-bold highlight-font">Contact your Councillor</a></li>
<li><a href="/citycouncil/Pages/Contact-the-Office-of-the-Councillors.aspx" class="font-bold highlight-font">Submit comments to all Councillors</a></li>
</span>
<span class="col-4 border-r-None">
<li>
<a href="/CityCouncil/Pages/WardBoundaryMap.aspx" class="font-bold highlight-font">
View map
<img src="../img/wardsMap.jpg" alt="Ward map">
</a>
</li>
</span>
</ul>
</li>
</ul>
</li>
<li class="sub-nav-group col-2">
<a class="h3 font-bold no-link" href="">Office of the Mayor</a>
<ul>
<li><a href="http://calgarymayor.ca" class="font-bold highlight-font">The Mayor</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="#" class="coc-secondary-9L boldFont">Our organization <span class="cicon-angle-down"></span> </a>
<div class="sub-nav">
<span class="nav_background" aria-hidden="true"></span>
<ul>
<li aria-hidden="true" class="closeSubNavGroup" tabindex="0"><a href="#" aria-hidden="true">close<span class="cicon-times"></span></a></li>
<li class="sub-nav-group col-3">
<a href="/ca/city-manager/Pages/About-Us/ourcity.aspx" class="h3 font-bold">Our Organization <span class="cicon-arrow-circle-right"></span></a>
<ul>
<li><a href="/ca/city-manager/Pages/About-Us/ourcity.aspx">Our City, Our Story</a></li>
<li><a href="/ca/city-manager/Pages/About-Us/OurCulture.aspx">Our Culture</a></li>
<li><a href="/ca/city-manager/Pages/About-Us/OrgAdminTeam.aspx">Our Leadership</a></li>
<li><a href="/ca/city-manager/Pages/About-Us/OrganizationalUpdate.aspx">Organizational Update</a></li>
</ul>
</li>
<li class="sub-nav-group col-3">
<a href="/ca/city-manager/Pages/About-Us/Services.aspx" class="h3 font-bold">Our Services <span class="cicon-arrow-circle-right"></span></a>
<ul>
<li><a href="/ca/city-manager/Pages/About-Us/Services.aspx#whatWeProvide">Services Overview</a></li>
<li><a href="/General/Pages/CitizenDashboard/Citizen-Dashboard-Landing.aspx">Citizen Dashboard</a></li>
</ul>
</li>
<li class="sub-nav-group col-3">
<a href="/ca/city-manager/Pages/About-Us/OurStrategy.aspx" class="h3 font-bold ">Our Strategy <span class="cicon-arrow-circle-right"></span></a>
<ul>
<li><a href="/ca/city-manager/Pages/About-Us/OrgPerformance.aspx">Performance Management </a></li>
<li><a href="/ca/city-manager/Pages/About-Us/OrgRoadMap.aspx">Our Road Map </a></li>
</ul>
</li>
<li class="sub-nav-group col-3">
<a href="/CA/city-manager/Pages/Our-Finances/default.aspx" class="h3 font-bold">Our Finances <span class="cicon-arrow-circle-right"></span></a>
<ul>
<li><a href="/CA/city-manager/Pages/Our-Finances/cards.aspx?categoryName=Taxes">Property and business taxes </a></li>
<li><a href="/CA/city-manager/Pages/Our-Finances/cards.aspx?categoryName=Economy">Calgary's economy</a></li>
<li><a href="/CA/city-manager/Pages/Our-Finances/cards.aspx?categoryName=Growth">Funding Growth</a></li>
<li><a href="/CA/city-manager/Pages/Our-Finances/cards.aspx?categoryName=Finance">Finance 101</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="nav-item"><a href="#" class="coc-secondary-9L">News </a></li>
<li class="nav-item"><a href="#" class="coc-secondary-9L">Engage </a></li>
<li class="nav-item"><a href="#" class="coc-secondary-9L">311 </a></li>
</ul>
</nav>
Usage
The HTML structure for the mega menu is a nav element, or any other container element, containing a list. Each list item contains a link which is followed by a div or any other container element which will serve as the pop up panel.
Accessibility
For detailed accessibility guidelines, refer to the Accessible Mega Menu.
- Keyboard Accessibility
- Screen Reader Accessibility
Make sure all the items in the menu are placed in the unordered list. Please do not use heading tags in the menu.