I have a button that say's "Begin", however I would like it to show some kind of overlay that would allow the user to select out of 3 options where each would take them to another article. In effect the same as having 3 buttons that say "Begin A", "Begin B" and "Begin C".
<a href="#" class="uk-button uk-button-secondary " style="margin-top: 5px;">Begin!</a>
How would I go about doing something to that effect? I've googled around but found nothing that answered my question.
You're using the uk- class which comes from the UIKit framework developed by Yootheme.
If you have a look at the UIKit website, you'll see all the available features, one of which is an overlay, or perhaps modal (which I think you're referring to).
Here would be a basic modal implementation of what you require:
<a href="#my-id" class="uk-button uk-button-secondary" data-uk-modal>Begin!</a>
<div id="my-id" class="uk-modal">
<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<div class="uk-modal-header">Select an Article</div>
<select>
<option value="1">Article 1</option>
<option value="2">Article 2</option>
<option value="3">Article 3</option>
</select>
<div class="uk-modal-footer">
<a href="#" class="uk-button">Go</a>
</div>
</div>
</div>
You will either have to use jQuery or PHP to get the user's selected article choice and direct them to the correct page.
