Page History

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="https://qnetconfluence.cms.gov/display/HCD/Case+Studies">Case Studies<How+We+Can+Help">What's In it For Me?</aui-item-link>
  			<aui-item-link hreffor="https://qnetconfluence.cms.gov/display/HCD/Data-driven+Results">Data-driven Results<consulting-dropdown">Consulting & Support</aui-item-link>
		<   			<aui-item-link for="education-dropdown">Education & Outreach</aui-section>item-link>
 			</aui<aui-dropdown-menu>

	<button classitem-link for="aui-button aui-button-link aui-dropdown2-trigger" aria-controls="insights-dropdown">Insights  
	</button>guidance-dropdown">Guidance & Best Practices</aui-item-link>
  			<aui-item-link for="resources-dropdown">HCD Learning Library</aui-item-link>
		</aui-section>
	</aui-dropdown-menu> 

	<aui-dropdown-menu id="insightsconsulting-dropdown" aria-controls="insights">
		<aui-section id="insights">
        	<aui-item-link href="https://qnetconfluence.cms.gov/pages/viewrecentblogposts.action?key=HCD">Blog</aui-item-link>
section> 
  			<aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/MethodsCoaching">Methods<>Coaching</aui-item-link> 
			<aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Videos">Videos<Support">Research & Design</aui-item-link>
		</aui-section>
		</aui-dropdown-menu>
		
		<button class="aui-button aui-button-link">
		<a href="https://qnetconfluence.cms.gov/display/HCD/Contact+Us">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="methodseducation-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<Community">Community of Practice</aui-item-link>
        			<aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/Card+Sorting">Card Sort<Training">Training</aui-item-link>
		</aui-section>
	</aui-dropdown-menu>

        	<aui-itemdropdown-linkmenu href="https://qnetconfluence.cms.gov/display/HCD/Change+Management">Change Management</aui-item-link>
        id="guidance-dropdown">
		<aui-section>
			<aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/CollaborativeCMS+Design+SketchingSystem">Collaborative>CMS Design Sketching<System</aui-item-link>
         
			<aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/ContentHCD+Maturity+AuditModel">Content>HCD Maturity Audit<Model</aui-item-link>
        			<aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/ContentMeasuring+Customer+InventorySatisfaction">Content>Measuring Customer Inventory<Satisfaction</aui-item-link>
        	 		<aui-item-link href="https://qnetconfluence.cms.gov/display/HCD/ContextualPaperwork+Reduction+InquiryAct">Contextual>Paperwork Reduction Inquiry<Act</aui-item-link> 
		</aui-section>
	</aui-dropdown-menu>      

    	<aui-itemdropdown-linkmenu href="https://qnetconfluence.cms.gov/display/HCD/Conversation+Guide">Conversation Guide</aui-item-link>
        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">Develop 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-link Our+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>
Page tree

Versions Compared

Old Version 32

New Version Current

Key
