CPS header
The CPS version of the header may only be used on the CPS website.
Header with visual identifier, search, and global navigation menu
Code
<script src="jquery-2.2.4.min.js"></script>
<script src="jquery.modal.js"></script>
<script src="COC.Nav.js"></script>
<script>
$('#navId').ready(function() {
COC.Nav.Init();
});
</script>
<div class="cui coc-header cps-header">
<a href="http://www.calgary.ca/cps/Pages/home.aspx" id="cps-logo" class="coc-logo">
<img src="../img/CPS-logo.svg" alt="Return to the Calgary Police Service homepage" class="no-print" />
</a>
<ul id="skiplinks">
<li><a href="#content" accesskey="S">Skip to main content</a></li>
<li><a href="#cocis-search-field-type-and-submit" accesskey="4">Skip to search</a></li>
</ul>
<!-- Mobile Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
<label for="search-field-2" class="hidden">Search</label>
<input id="search-field-2" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Mobile Search Part 2. Fake search box, clicking this will open up the modal, only visible for xxs screens -->
<a href="#modal-search-2" class="cui search-box visible-xxs" role="button" tabindex="0" aria-label="click to open the search window" rel="modal:open">
<div class="search-box-input"></div>
<div class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</div>
</a>
<!-- Mobile Search Part 3. Modal, embedded in the document, activated by the mobile fake search box -->
<div id="modal-search-2" class="cui modal-window modal-window-search">
<div class="modal-window-header">
<a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
</div>
<div class="modal-window-body">
<div class="cui search-box">
<label for="search-field-modal-2" class="hidden">Search</label>
<input id="search-field-modal-2" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
<nav class="cui coc-secondary-9L-nav globalNav" 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>
</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">Council</a>
</li>
<li class="nav-item">
<a href="#" class="coc-secondary-9L">Our organization</a>
</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>
</div><!-- End of .coc-header -->