Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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>