Test page for pushing the boundaries of Confluence.
Javascript Button Hover
HTML |
---|
<style>
body { padding: 2em; } a { text-decoration: none; color: #fff; }
/**** ****/
div#nav { position: relative; } div#nav a { padding: 5px 15px 5px; }
.dropdown-toggle { padding: 0; background: #777; }
/**** ****/
ul.dropdown { display: none; position: absolute; top: 100%;
margin-top: 5px; padding: 5px 5px 0 0; background: #777; }
ul.dropdown li { list-style-type: none; }
ul.dropdown li a { text-decoration: none; padding: 0em 1em; display: block; }
</style> |
HTML |
---|
<div id="nav">
<a class="dropdown-toggle" href="#">Menu</a>
<ul class="dropdown">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Search</a></li>
</ul>
</div> |
HTML |
---|
<script type="javascript">
AJS.toInit(function(){
if (AJS.params.remoteUser == ''){
$(function() { // Dropdown toggle
$('.dropdown-toggle').click(function() { $(this).next('.dropdown').slideToggle();
});
$(document).click(function(e)
{
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle'))
//{ $('.dropdown').hide(); }
{ $('.dropdown').slideUp(); }
});
});
}
</script> |
HTML |
---|
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FOiNrAYFfUl1QXlKp7FoJtZ%2FStyle-Guide-Template-(Color-Styles-%2526-Typography)-(Community)%3Ftype%3Ddesign%26node-id%3D1%253A2%26mode%3Ddesign%26t%3DIfIQtFvmwXtQg9xN-1" allowfullscreen></iframe> |