Actually, you can do it with CSS alone, if you use a :hover pseudoclass, it’s just a variation on styling for drop-down menus.
This works in FF, I haven’t gotten around to fixing it to work with IE yet (it should just be a matter of including the assets/js/csshover.htc in an IE conditional in the template head).
http://www.alandaniel.co.uk/index.html&template=Swan
mouse over the list on the upper right.
/**** PopupList **************************
* Snippet for MODx
* Generates a simple list menu
* with the title of the document
* as the menu item
* and the document's content
* in a <p> container suitable for
* a CSS-managed popup system.
*
* Created 26.10.2005
* [email protected]
* License: GPL
*
* Parameters:
* id - the ID of the folder
* containing the documents to list
*
* Usage:
* [[PopupList?id=x]]
*****************************************/
if(!isset($id)) return;
$children = $modx->getActiveChildren($id,'menuindex','ASC','pagetitle, content');
if($children == false) return;
$list = '<ul id="popupList">';
foreach($children as $child) {
$list .= '<li class="item"><div class="title">'.$child['pagetitle'].'<div class="content">'.$child['content'].'</div></div></li>';
}
$list .= '</ul>';
return $list;
and the CSS
#popupList{
list-style:none;
}
#popupList div.title{
padding:3px;
color: #FFF;
margin:3px 0;
cursor:pointer;
}
#popupList li div.content{
display: none;
}
#popupList li:hover div.content{
display:block;
position: absolute;
top: 170px;
right:290px;
padding:10px;
width: 280px;
z-index: 100;
color: #193E58;
background: #d1d1d3;
border: 1px solid #FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
MODX Staff
☆ A M B ☆
NeatFAQ fits the bill for a simple list.