<?xml version="1.0"?>

<pattern collection="welie" patternID="retractable-menu" xmlns="http://www.welie.com/plml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.welie.com/plml.xsd">

<name></name>
<author>Martijn van Welie</author>
<problem>Users need to access the navigation but they may need the screen space even more
</problem>


<context>When the screen space is scarce and the <pattern-link patternID="main-navigation"/> takes relatively too much space. Alternatively consider a horizontal <pattern-link patternID="trail-menu"/> in combination with <pattern-link patternID="fly-out-menu"/>.
</context>

<illustration><img src="images/retractable-nike.jpg" border="1"/><br/>From 
<a href="http://www.nikewomen.com">www.nikewomen.com</a><br/> 
</illustration>

<pattlet>Create a menu that can be put aside and easily retrieved again.
</pattlet>


<solution>Implemented using dynamic html, will also require some form of <pattern-link patternID="liquid-layout"/>.
</solution>

<rationale>This pattern mainly saves a lot of screen-space while having the menu still available. In contrast to a <pattern-link patternID="fly-out-menu"/> or <pattern-link patternID="overlay-menu"/> a retractable menu stays on the page when activated.
</rationale>

<example><img src="images/retract-sitepoint1.png" border="1"/><br/><br/>
<img src="images/retract-sitepoint2.png" border="1"/>
</example>

<uses>
</uses>

<references>
</references>
</pattern>

