Info |
---|
This is a widget that can be used on every page for navigation. Rather than using the Atlassian User Interface (AUI) nav component, I instead used buttons, so "blue hyperlinked" items refer to those that can be selected and this example with "Overview" without blue text refers to the selected state. Note the right-aligned nav idea to allow people to choose methods on the fly. |
HTML |
---|
<nav class="aui-navgroup aui-navgroup-horizontal" style="position: absolute;"> <div class="aui-navgroup-inner"> <div class="aui-navgroup-primary"> <div class="aui-nav-heading"></div> <button class="aui-button aui-button-light"> Overview><span class="aui-icon aui-icon-small aui-iconfont-home-filled"></span> Home </button> <button class="aui-button aui-button-link aui-dropdown2-trigger" aria-controls="servicesabout-dropdown"> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/How+We+Can+Help">How We Can Help</aui-item-link> About HCD </button> <aui-dropdown-menu id="servicesabout-dropdown" aria-controls="servicesabout"> <aui-section id="servicesabout"> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Coaching">Coaching</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Community">Community</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Standards">Standards</What+Is+HCD">What is HCD?</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Training">Training<HCD+Phases">HCD Phases</aui-item-link> </aui-section> </aui-dropdown-menu> <button class="aui-button aui-button-link aui-dropdown2-trigger" aria-controls="resultsservices-dropdown">Customer> How ResultsWe Can Help </button> <aui-dropdown-menu id="resultsservices-dropdown" aria-controls="results"> <aui-section id="resultsservices"> <aui-item-link href="#">Case Studies<https://qnetconfluence.cms.gov/display/HCD/How+We+Can+Help">What's In it For Me?</aui-item-link> <aui-item-link hreffor="#">Data-driven Results<consulting-dropdown">Consulting & Support</aui-item-link> </aui-section> </aui-dropdown-menu> <button class="aui-button aui-button-link aui-dropdown2-trigger" aria-controls="insights-dropdown">Insights </button> <aui-dropdownitem-menulink idfor="insightseducation-dropdown" aria-controls="insights"> <aui-section id="insights"> <aui-item-link href="#">Blog<>Education & Outreach</aui-item-link> <aui-item-link hreffor="#">Methods<guidance-dropdown">Guidance & Best Practices</aui-item-link> <aui-item-link hreffor="#">Videos<resources-dropdown">HCD Learning Library</aui-item-link> </aui-section> </aui-dropdown-menu> <button class="aui-button aui-button-link"> <a href="#">Contact Us</a> </button> </div> <div class="aui-navgroup-secondary"> <div class="aui-nav-heading"></div> <button class="aui-button aui-dropdown2-trigger" aria-controls="methods-dropdown"><span class="aui-icon aui-icon-small aui-iconfont-configure"></span> Methods </button> <aui-dropdown-menu id="methodsconsulting-dropdown" aria-controls="right-aligned"> <aui-section id="right-aligned">section> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Affinity+Diagram">Affinity Diagram<Coaching">Coaching</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Card+Sorting">Card Sort<Support">Research & Design</aui-item-link> </aui-section> </aui-dropdown-menu> <aui-dropdown-menu id="education-dropdown"> <aui-section> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Change+Management">Change Management<Community">Community of Practice</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Collaborative+Sketching">Collaborative Sketching<Training">Training</aui-item-link> </aui-section> </aui-dropdown-menu> <aui-itemdropdown-linkmenu href="https://qnetconfluence.cms.gov/display/HCD/Content+Audit">Content Audit</aui-item-link> id="guidance-dropdown"> <aui-section> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/ContentCMS+Design+InventorySystem">Content>CMS Design Inventory<System</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/ContextualHCD+Maturity+InquiryModel">Contextual>HCD Maturity Inquiry<Model</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/ConversationMeasuring+Customer+GuideSatisfaction">Conversation>Measuring Customer Guide<Satisfaction</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/DesignPaperwork+aReduction+SuperheroAct">Design>Paperwork aReduction Superhero<Act</aui-item-link> </aui-section> </aui-dropdown-menu> <aui-dropdown-menu id="resources-dropdown"> <aui-section> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Developing+a+UX+Measurement+Plan">Develop a UX Measurement Plan<Recommended+Reading">Books, Articles & Podcasts</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/DiaryEnterprise+StudiesPersonas">Diary>Enterprise Study<Personas</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Empathy+MapsMethods">Empathy>HCD Map<Methods</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Feedback+Loop">Feedback Loop<Videos">Videos</aui-item-link> </aui-section> </aui-dropdown-menu> <button class="aui-button <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/How+Might+We">How Might We?</aui-item-link> aui-button-link aui-dropdown2-trigger" aria-controls="studies-dropdown"> Case Studies </button> <aui-dropdown-menu id="studies-dropdown" aria-controls="studies"> <aui-section id="studies"> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Interviews">Interview<ESRD+Ecosystem">ESRD Ecosystem</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/JourneyHCD+Maturity+MappingModel">Journey>HCD Maturity Map<Model</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/KanoHQR+Service+AnalysisDesign">Kano>HQR Service Analysis<Design</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Mash-up">Mash-up<HQR+Customer+Satisfaction+Survey">HQR Customer Satisfaction</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Mind-Mapping">Mind Map<Program+Resource+System">Program Resource System</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Personas">Persona<QPP+Customer+Satisfaction+Survey">QPP Customer Satisfaction</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Problem+Statement">Problem Statement<SOG+Travel+Robotic+Processing+Automation">SOG Robotic Processing Automation</aui-item-link> </aui-section> </aui-dropdown-menu> <button <aui-item-link class="aui-button aui-button-link"> <a href="https://qnetconfluence.cms.gov/display/HCD/ProductOur+Prototype">Product Prototype</aui-item-link> <aui-item-linkServices">Services</a> </button> <button class="aui-button aui-button-link"> <a href="https://qnetconfluence.cms.gov/display/HCD/ProjectHCD+Design+Brief">Project Brief</aui-item-link> <aui-item-linkBlog">Blog</a> </button> <button class="aui-button aui-button-link"> <a href="https://qnetconfluence.cms.gov/display/HCD/QualityContact+MetricsUs">Quality>Our Metrics</aui-item-link> Team</a></button> </div> <span style="margin-left: 20px;"> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Responsive+Breakpoint+Diagram">Responsive Breakpoint Diagram</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Service+Prototype">Service Prototype</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Sitemap+Diagram">Sitemap Diagram</aui-item-link> <aui-item-link href <a id="myCustomTrigger" title="Open pop up form to send support request"><button class="aui-button aui-button-hcd">Request Support ↗</button></a> </span> </div> </div> </nav> <!-- This code is generated by creating a Jira issue collector. See https://confluence.atlassian.com/adminjiracloud/using-the-issue-collector-776636529.html --> <script type="text/javascript" src="https://qnetconfluenceqnetjira.cms.gov/display/HCD/Stakeholder+Mapping">Stakeholder Map</aui-item-link> <aui-item-link href/s/d41d8cd98f00b204e9800998ecf8427e-CDN/-x7af9p/805003/be09033ea7858348cd8d5cdeb793189a/2.2.4.7/_/download/batch/com.atlassian.plugins.jquery:jquery/com.atlassian.plugins.jquery:jquery.js?collectorId=9b8f30b2"></script><script type="text/javascript" src="https://qnetconfluenceqnetjira.cms.gov/display/HCD/Storyboarding">Storyboard</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Tree+Testing">Tree Test</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Usability+Testing">Usability Test</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/User+Research+Plan">User Research Plan</aui-item-link> </aui-section> </aui-dropdown-menu> </div> </div> s/1b790b95b2447c56c496350719f839e3-T/-x7af9p/805003/be09033ea7858348cd8d5cdeb793189a/3.1.0/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-US&collectorId=9b8f30b2"></script> <script type="text/javascript">window.ATL_JQ_PAGE_PROPS = { // ==== custom trigger function ==== "triggerFunction": function(showCollectorDialog) { //Requires that jQuery is available! jQuery("#myCustomTrigger").click(function(e) { e.preventDefault(); showCollectorDialog(); }); }, // ==== Add the code below to set the field values. Find the values by viewing Create Issue source code ==== fieldValues: { 'components' : ['15601'] } }; </script> |