<div class="post"> <div class="entry"> <p class="page"><a href="[[~[[+id]]]]">[[+tv.bookPageImage]]</a></p> </div> <span id="summary">[[+introtext]]</span> </div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <title>[[*pagetitle]]</title> <meta name="description" content="[[*description]]"/> <base href="[[!++site_url]]" /> <link rel="stylesheet" type="text/css" href="assets/css/style.css" /> <link rel="stylesheet" media="all" type="text/css" href="assets/css/acc.css" /> <script src="assets/js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="assets/js/menu.js" type="text/javascript"></script> <link rel="stylesheet" href="http://modx.com/assets/components/discuss/themes/modx/css/index.css" type="text/css" /> <link rel="stylesheet" href="http://modx.com/assets/components/discuss/themes/modx/css/jquery-ui-1.8.16.custom.css" type="text/css" /> <script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/jquery.scrollTo-min.js"></script> <script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/discuss.js"></script> <script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shCore.js"></script> <script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shAutoloader.js"></script> <script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shDiscuss.js"></script> <script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.sticky.js"></script> <script type="text/javascript">// <![CDATA[ DIS.url = "/";DIS.shJsUrl = "http://modx.com/assets/components/discuss/themes/modx/js/sh/";DIS.config.connector = "http://modx.com/assets/components/discuss/connector.php" // ]]></script> <script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.post.modify.js"></script> <script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.post.buttons.js"></script> </head> <body> <div id="header"> <div id="logo"> </div> </div> <div class="colmask threecol"> <div class="colmid"> <div class="colleft"> <div class="col1"> <!-- Column 1 start --> [[Breadcrumbs? &crumbSeparator=`»`]] [[*content]] <!-- Column 1 end --> </div> <div class="col2"> <!-- Column 2 start --> [[!SimpleSearchForm? &landing=`29` &tpl=`mysearchForm`]] <div class="menu"> [[Wayfinder? &startId=`0` &outerTpl=`acc-outer` &hereClass=`expand` &selfClass=`active` &categoryFoldersTpl=`acc-folder` &innerTpl=`acc-inner`]] </div> <!-- Column 2 end --> </div> <div class="col3"> <!-- Column 3 start --> <!-- Column 3 end --> </div> </div> </div> </div> <div class="colmask fullpage"> <div class="col1"> <!-- Column 1 start --> <!-- Column 1 end --> </div> </div> <div id="footer"> </div> <script type="text/javascript"> var DISModifyPost = $(function() { DIS.config.attachments_max_per_post = 5; DIS.DISModifyPost.init({ attachments: 1 }); });</script> </body> </html>
Acc-folder: <li [[+wf.classes]]> <a title="[[+wf.title]]" href="#">[[+wf.linktext]] »</a> [[+wf.wrapper]] </li> Acc-inner: <ul class="acitem collapsible"> [[+wf.wrapper]] </ul> Acc-outer: <ul class="menu collapsible"> [[+wf.wrapper]] </ul>
.menu { height: auto; } ul.menu, ul.menu ul { list-style-type:none; margin: 0; padding: 0; } ul.menu a { display: block; text-decoration: none; background-color:#E0E9F6; color: #F00; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } ul.menu li { margin-top: 1px; } ul.menu li a { background-color:#E0E9F6; color: #000; padding: 0.5em; } ul.menu li a:hover { background-color:#E0E9F6; color:#007AC3; } ul.menu li ul li a { background-color:#FFF; color: #000; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } ul.menu li ul li a:hover { background-color:#FFF; color:#007AC3; } .first expand active { background-color:#FFF; color:#007AC3; } /* second level active */ ul.menu li ul li.active a { background-color:#FFF; color:#007AC3; } /* third level active */ ul.menu li ul li ul li.active a { background-color:#FFF; color:#007AC3; } .code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; } .code code { display: block; padding: 3px; margin-bottom: 0; } .code li { background: #E0E9F6; border: 1px solid #ccc; margin: 0 0 2px 2.2em; } .indent1 { padding-left: 1em; } .indent2 { padding-left: 2em; } .indent3 { padding-left: 3em; } .indent4 { padding-left: 4em; } .indent5 { padding-left: 5em; }
jQuery.fn.initMenu = function() { return this.each(function(){ var theMenu = $(this).get(0); $('.acitem', this).hide(); $('li.expand > .acitem', this).show(); $('li.expand > .acitem', this).prev().addClass('active'); $('li a', this).click( function(e) { e.stopImmediatePropagation(); var theElement = $(this).next(); var parent = this.parentNode.parentNode; if($(parent).hasClass('noaccordion')) { if(theElement[0] === undefined) { window.location.href = this.href; } $(theElement).slideToggle('normal', function() { if ($(this).is(':visible')) { $(this).prev().addClass('active'); } else { $(this).prev().removeClass('active'); } }); return false; } else { if(theElement.hasClass('acitem') && theElement.is(':visible')) { if($(parent).hasClass('collapsible')) { $('.acitem:visible', parent).first().slideUp('normal', function() { $(this).prev().removeClass('active'); } ); return false; } return false; } if(theElement.hasClass('acitem') && !theElement.is(':visible')) { $('.acitem:visible', parent).first().slideUp('normal', function() { $(this).prev().removeClass('active'); }); theElement.slideDown('normal', function() { $(this).prev().addClass('active'); }); return false; } } } ); }); }; $(document).ready(function() {$('.menu').initMenu();});