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">How We Can Help > About HCD </button> <aui-dropdown-menu id="servicesabout-dropdown" aria-controls="servicesabout"> <aui-section id="servicesabout"> <aui-item-link href="#">Coaching</aui-item-link> <aui-item-link href="#">Events<https://qnetconfluence.cms.gov/display/HCD/What+Is+HCD">What is HCD?</aui-item-link> <aui-item-link href="#">Standards</aui-item-link> <aui-item-link href="#">Training<https://qnetconfluence.cms.gov/display/HCD/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 & Tools </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-dropdown-menu id="guidance-dropdown"> <aui-section> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/ContentCMS+Design+AuditSystem">Content>CMS Design Audit<System</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/ContentHCD+Maturity+InventoryModel">Content>HCD Maturity Inventory<Model</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/ContextualMeasuring+Customer+InquirySatisfaction">Contextual>Measuring Customer Inquiry<Satisfaction</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/ConversationPaperwork+Reduction+GuideAct">Conversation>Paperwork Reduction Guide<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/DesignRecommended+a+Superhero">Design a Superhero<Reading">Books, Articles & Podcasts</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Developing+a+UX+Measurement+Plan">#<Enterprise+Personas">Enterprise Personas</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Diary+StudiesMethods">Diary>HCD Study<Methods</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Empathy+Maps">Empathy Map<Videos">Videos</aui-item-link> </aui-section> </aui-dropdown-menu> <button class="aui-button 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/FeedbackESRD+LoopEcosystem">Feedback>ESRD Loop<Ecosystem</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/HowHCD+MightMaturity+WeModel">How>HCD MightMaturity We?<Model</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Interviews">Interview<HQR+Service+Design">HQR Service Design</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Journey+Mapping">Journey Map<HQR+Customer+Satisfaction+Survey">HQR Customer Satisfaction</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/KanoProgram+Resource+AnalysisSystem">Kano>Program Resource Analysis<System</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Mash-up">Mash-up<QPP+Customer+Satisfaction+Survey">QPP Customer Satisfaction</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Mind-Mapping">Mind Map<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/Personas">Persona</aui-item-link> <aui-item-linkOur+Services">Services</a> </button> <button class="aui-button aui-button-link"> <a href="https://qnetconfluence.cms.gov/display/HCD/ProblemHCD+StatementBlog">Problem Statement</aui-item-link> <aui-item-link>Blog</a> </button> <button class="aui-button aui-button-link"> <a href="https://qnetconfluence.cms.gov/display/HCD/ProductContact+PrototypeUs">Product>Our Prototype</aui-item-link> Team</a></button> </div> <span style="margin-left: 20px;"> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Project+Design+Brief">Project Brief</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Quality+Metrics">Quality Metrics</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Responsive+Breakpoint+Diagram">Responsive Breakpoint 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/Service+Prototype">Service Prototype</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/displays/HCD/Sitemap+Diagram">Sitemap Diagram</aui-item-link> <aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Stakeholder+Mapping">Stakeholder Map</aui-item-link>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> <aui-item-link href="https://qnetconfluence.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> <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> |