<h1>Fluent Design Reveal Effect</h1> <a href="#list-variant"><i>To see the "list variant" (sidebar), click here</i></a> <h2 id="basic-usage">Basic usage</h2> <p>There's no dependency on this; I put some CDN in order to make a few examples prettier.</p> <p>You can use <code><a></code>, <code><button></code> or <code><label></code> tags, as long as you put them inside the following structure :</p> <code> <div class="reveal-group"><br> <div class="inner"><br> <!-- your buttons here --><br> </div><br> </div><br> </code> <p>Here are some examples:</p> <!-- note: the fieldset and legend are absolutely not required, it's only for this demo --> <fieldset> <legend>Basic</legend> <div class="reveal-group"> <div class="inner"> <button>1</button> <button disabled>2</button> <button>3</button> <button>4</button> </div> </div> <p>Code:</p> <code> <div class="reveal-group"><br> <div class="inner"><br> <button>1</button><br> <button disabled>2</button><br> <button>3</button><br> <button>4</button><br> </div><br> </div><br> </code> </fieldset> <fieldset> <legend>Vertical</legend> <div class="reveal-group vertical"> <div class="inner"> <a href="#" title="width an <a> tag">1</a> <a href="#" title="width an <a> tag">2</a> <a href="#" title="width an <a> tag">3</a> <a href="#" title="width an <a> tag">4</a> </div> </div> <p>Code:</p> <code> <div class="reveal-group vertical"><br> <div class="inner"><br> <button>1</button><br> <button disabled>2</button><br> <button>3</button><br> <button>4</button><br> </div><br> </div><br> </code> </fieldset> <fieldset> <legend>Grid (with radios)</legend> <div class="reveal-group grid"> <div class="inner"> <label><input type="radio" name="test-1"><span>1</span></label> <label><input type="radio" name="test-1"><span>2</span></label> <label><input type="radio" checked name="test-1"><span>3</span></label> <label><input type="radio" name="test-1"><span>4</span></label> <label><input type="radio" name="test-1"><span>5</span></label> <label><input type="radio" name="test-1"><span>6</span></label> <label><input type="radio" name="test-1"><span>7</span></label> <label><input type="radio" name="test-1"><span>8</span></label> <label><input type="radio" name="test-1"><span>9</span></label> </div> </div> <p>Code:</p> <code> <!-- the "grid" class just sets a fixed width on the group --><br> <div class="reveal-group grid"><br> <div class="inner"><br> <label><input type="radio" name="test-1"><span>1</span></label><br> <label><input type="radio" name="test-1"><span>2</span></label><br> <label><input type="radio" checked name="test-1"><span>3</span></label><br> <label><input type="radio" name="test-1"><span>4</span></label><br> <label><input type="radio" name="test-1"><span>5</span></label><br> <label><input type="radio" name="test-1"><span>6</span></label><br> <label><input type="radio" name="test-1"><span>7</span></label><br> <label><input type="radio" name="test-1"><span>8</span></label><br> <label><input type="radio" name="test-1"><span>9</span></label><br> </div><br> </div> </code> </fieldset> <fieldset class="bg"> <legend>Grid ontop of a background</legend> <div class="reveal-group grid transparent"> <div class="inner"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <button>9</button> </div> </div> <p>Code:</p> <code> <div class="reveal-group transparent grid"><br> <div class="inner"><br> <button>1</button><br> <button disabled>2</button><br> <button>3</button><br> <button>4</button><br> <button>5</button><br> <button>6</button><br> <button>7</button><br> <button>8</button><br> <button>9</button><br> </div><br> </div><br> </code> </fieldset> <fieldset> <legend>Bordered Buttons (& empty placeholder)</legend> <div class="reveal-group grid bordered"> <div class="inner"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <span class="placeholder"></span> </div> </div> <p>Code:</p> <code> <div class="reveal-group bordered grid"><br> <div class="inner"><br> <button>1</button><br> <button disabled>2</button><br> <button>3</button><br> <button>4</button><br> <button>5</button><br> <button>6</button><br> <button>7</button><br> <button>8</button><br> <span class="placeholder"></span><br> </div><br> </div><br> </code> </fieldset> <fieldset> <legend>Inverted (& empty placeholder)</legend> <div class="reveal-group grid inverted"> <div class="inner"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <span class="placeholder"></span> <button>6</button> <button>7</button> <button>8</button> <button>9</button> </div> </div> <p>Code:</p> <code> <div class="reveal-group inverted grid"><br> <div class="inner"><br> <button>1</button><br> <button disabled>2</button><br> <button>3</button><br> <button>4</button><br> <span class="placeholder">9</span><br> <button>6</button><br> <button>7</button><br> <button>8</button><br> <button>9</button><br> </div><br> </div><br> </code> </fieldset> <fieldset> <legend>Width auto</legend> <div class="reveal-group vertical auto-width"> <div class="inner"> <button>lorem ipsum dolor sit amet</button> <button>hello wuuurld</button> <button>{´◕ ◡ ◕｀}</button> <button>(╯°□°）╯︵ ┻━┻</button> </div> </div> <p>Code:</p> <code> <div class="reveal-group auto-width grid"><br> <div class="inner"><br> <button>1</button><br> <button disabled>2</button><br> <button>3</button><br> <button>4</button><br> <button>5</button><br> <button>6</button><br> <button>7</button><br> <button>8</button><br> <button>9</button><br> </div><br> </div><br> </code> </fieldset> <hr> <h2 id="list-variant">"List" variant</h2> <p>We've seen a lot of examples where the reveal effect occurs not on button groups, but on vertical list (like a lateral bar). So here's the variant for that.</p> <fieldset> <legend>Vertical Variant (auto-width)</legend> <div class="reveal-group vertical auto-width variant lateralbar-example"> <div class="inner"> <a href="#"><span class="lnr lnr-apartment"></span> Home</a> <a href="#"><span class="lnr lnr-earth"></span> Explore</a> <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a> <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a> </div> </div> <p>Code:</p> <code> <!-- the "lateralbar-example" class is only for the sake of this example --><br> <div class="reveal-group vertical auto-width variant lateralbar-example"><br> <div class="inner"><br> <a href="#"><span class="lnr lnr-apartment"></span> Home</a><br> <a href="#"><span class="lnr lnr-earth"></span> Explore</a><br> <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a><br> <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a><br> </div> </code> </fieldset> <fieldset> <legend>Vertical Variant with light reveal (auto-width, empty placeholder)</legend> <div class="reveal-group vertical auto-width variant light-reveal lateralbar-example"> <div class="inner"> <a href="#"><span class="lnr lnr-apartment"></span> Home</a> <a href="#"><span class="lnr lnr-earth"></span> Explore</a> <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a> <span class="placeholder"></span> <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a> </div> </div><p>Code:</p> <code> <!-- the "lateralbar-example" class is only for the sake of this example --><br> <div class="reveal-group vertical auto-width variant light-reveal lateralbar-example"><br> <div class="inner"><br> <a href="#"><span class="lnr lnr-apartment"></span> Home</a><br> <a href="#"><span class="lnr lnr-earth"></span> Explore</a><br> <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a><br> <span class="placeholder">9</span><br> <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a><br> </div> </code> </fieldset> <fieldset> <legend>Vertical Variant inverted with light reveal (auto-width)</legend> <div class="reveal-group vertical auto-width variant inverted bordered light-reveal lateralbar-example"> <div class="inner"> <a href="#"><span class="lnr lnr-apartment"></span> Home</a> <a href="#"><span class="lnr lnr-earth"></span> Explore</a> <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a> <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a> </div> </div><p>Code:</p> <code> <!-- the "lateralbar-example" class is only for the sake of this example --><br> <div class="reveal-group vertical auto-width variant inverted light-reveal lateralbar-example"><br> <div class="inner"><br> <a href="#"><span class="lnr lnr-apartment"></span> Home</a><br> <a href="#"><span class="lnr lnr-earth"></span> Explore</a><br> <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a><br> <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a><br> </div> </code> </fieldset> <fieldset> <legend>Vertical Variant inverted with light reveal (auto-width, stacked empty placeholders)</legend> <div class="reveal-group vertical auto-width variant inverted bordered light-reveal lateralbar-example"> <div class="inner"> <a href="#"><span class="lnr lnr-apartment"></span> Home</a> <a href="#"><span class="lnr lnr-earth"></span> Explore</a> <span class="placeholder"></span> <span class="placeholder"></span> <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a> <span class="placeholder"></span> <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a> </div> </div><p>Code:</p> <code> <!-- the "lateralbar-example" class is only for the sake of this example --><br> <div class="reveal-group vertical auto-width variant inverted light-reveal lateralbar-example"><br> <div class="inner"><br> <a href="#"><span class="lnr lnr-apartment"></span> Home</a><br> <a href="#"><span class="lnr lnr-earth"></span> Explore</a><br> <span class="placeholder">9</span><br> <span class="placeholder">9</span><br> <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a><br> <span class="placeholder">9</span><br> <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a><br> </div> </code> </fieldset>

!