AutoAnchor Menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB" > <head> <base href="http://www.pluginaria.com/autoanchor-menu.html" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="extensions for joomla, joomla demo, absolute floating menu demo" /> <meta name="generator" content="Joomla! - Open Source Content Management" /> <title>AutoAnchor Menu</title> <link href="/templates/shape5_vertex/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <style type="text/css"> #s5_menu_wrap { border-top:none } code { font-size: 1.3em; color: darkred; } .module_round_box ul.menu li span.separator { display:block; margin-top:8px; font-size: 0.80em; font-weight: bold; } .module_round_box ul.menu li a { padding-right:0px; border-bottom:none } a.free-extension:after { content: "free"; vertical-align: super; font-size: smaller; color: darkred; margin-left: 6px; } #s5_header_area_inner { background-image: url(/images/puzzle.png); background-size: 130px; background-repeat: no-repeat; background-origin: content-box; background-position-x: 10px; background-position-y: 5px; } div#s5_header_area_inner2 { margin-left: 150px; } h3, h4 { font-family: Allerta Stencil; color: #999999 !important; font-weight: bold !important; } div.blog-featured span.row-separator { margin-top:22px } div#s5_header_area_inner2, div#s5_component_wrap, div#s5_footer_area_inner2 { -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px } div#s5_header_wrap { background: #1A1A1A; -moz-border-radius: 3px 3px 0px 0px; -webkit-border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px; } div#s5_component_wrap_inner h4 { margin-top:1em; margin-bottom:0.5em } div#s5_component_wrap_inner h5 { color: #17b; font-style:italic; margin-left:10px } #s5_header_area_inner2, .module_round_box, .module_round_box-dark, #s5_component_wrap, #s5_footer_area_inner2 { -webkit-box-shadow: #333 4px 4px 2px !important; -moz-box-shadow: #333 4px 4px 2px !important; box-shadow: #333 4px 4px 2px !important; } div#s5_header_wrap {background: #EEEEF5} div.module_round_box { background: #f0f0f4; padding-left:10px; padding-right:10px } div.module_round_box h3.s5_mod_h3{ margin-left:-10px; margin-right:-10px; } div#s5_header_wrap, div.module_round_box h3.s5_mod_h3, div#s5_footer_area_inner2 { background: #c; background: -moz-linear-gradient(top, #F0F3Fc 0%, #AAdfFC 100%); background: -webkit-linear-gradient(top, #F0F3Fc 0%, #AAdfFC 100%); background: -o-linear-gradient(top, #F0F3FC 0%, #AAdFFC 100%); background: -ms-linear-gradient(top, #F0F3Fc 0%, #AAdfFC 100%); background: linear-gradient(top, #F0F3Fc 0%, #AAdfFC 100%); } div#s5_footer_module { float:left } .module_round_box ul.menu li.deeper ul li { margin-left:0px } .module_round_box ul.menu li ul li a { background: url(/template//images/system/arrow.png) no-repeat left center; padding-left:24px; } #s5_banner { text-align:right } #s5_banner li a { color:#17b } #s5_breadcrumb_wrap { width:100% } table tr td { border-left:none; border-right:none; } dt { margin-top:10px; } div#s5_header_area_inner { padding-top: 10px; } #visitor-urgency-box > a:last-child { color:red; font-size:13px; padding-bottom:0px; padding-top:4px } #visitor-urgency-box{ opacity:0; background:black; color:white; border:none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; width:200px; padding:12px; position:absolute; z-index:20; /* bottom:8px; right:8px;*/ } #visitor-urgency-box > a { display:block; float:right; color:white; font-size:24px; font-weight:300; font-family:Arial, Helvetica, Sans-serif; padding-left:8px; padding-bottom:8px; } #floatdiv_floating_absolute { width:100% } ul#autoanchormenu_46 li.active > a.auto_anchor_menu_item {color: #29B !important} a.auto_anchor { position:relative; top:-10px } </style> <script type="application/json" class="joomla-script-options new">{"csrf.token":"0816b0edc8ccde711ec3c06b3539c868","system.paths":{"root":"","base":""}}</script> <script src="/media/jui/js/jquery.min.js?e62bff1107f1ec6813f5f0d4218f493a" type="text/javascript"></script> <script src="/media/jui/js/jquery-noconflict.js?e62bff1107f1ec6813f5f0d4218f493a" type="text/javascript"></script> <script src="/media/jui/js/jquery-migrate.min.js?e62bff1107f1ec6813f5f0d4218f493a" type="text/javascript"></script> <script src="/media/system/js/caption.js?e62bff1107f1ec6813f5f0d4218f493a" type="text/javascript"></script> <script src="/media/system/js/mootools-core.js?e62bff1107f1ec6813f5f0d4218f493a" type="text/javascript"></script> <script src="/media/system/js/core.js?e62bff1107f1ec6813f5f0d4218f493a" type="text/javascript"></script> <script src="/plugins/system/smooth_scroll_anchors/mootools-more-1.4.0.1.js" type="text/javascript"></script> <script src="http://www.pluginaria.com/plugins/system/urge_visitor/urge_visitor.js" type="text/javascript"></script> <script src="/media/jui/js/bootstrap.min.js?e62bff1107f1ec6813f5f0d4218f493a" type="text/javascript"></script> <script src="/media/jui/js/jquery.ui.core.min.js?e62bff1107f1ec6813f5f0d4218f493a" type="text/javascript"></script> <script src="/media/jui/js/jquery.ui.sortable.min.js?e62bff1107f1ec6813f5f0d4218f493a" type="text/javascript"></script> <script src="http://www.pluginaria.com/templates/shape5_vertex/js/jquery/jquery-ui-addons.js" type="text/javascript"></script> <script src="http://www.pluginaria.com/modules/mod_jtricks_floating/floating-1.13.js" type="text/javascript"></script> <script src="http://www.pluginaria.com/modules/mod_jtricks_autoanchor/autoanchormenu-1.12.js" type="text/javascript"></script> <script src="http://www.pluginaria.com/modules/mod_jtricks_autoanchor/mootools-more-1.4.0.1.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(window).on('load', function() { new JCaption('img.caption'); }); (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-37485452-1', 'pluginaria.com'); ga('send', 'pageview'); function initPluginariaSmoothScroll() { if (window.initPluginariaSmoothScrollComplete) return; window.initPluginariaSmoothScrollComplete = true; new Fx.SmoothScroll({ axes: ['x', 'y'] , duration: 500 }); } if (window.jQuery) jQuery(initPluginariaSmoothScroll); window.addEvent("domready", initPluginariaSmoothScroll); window.addEvent("load", initPluginariaSmoothScroll); </script> <link href="http://www.pluginaria.com/templates/shape5_vertex/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <script type="text/javascript"> if(jQuery().jquery=='1.11.0') { jQuery.easing['easeOutExpo'] = jQuery.easing['easeOutCirc'] }; </script> <link href="http://www.pluginaria.com/templates/shape5_vertex/css/bootstrap/bootstrap-default-min.css" rel="stylesheet" type="text/css" /> <link href="http://www.pluginaria.com/templates/shape5_vertex/css/bootstrap/bootstrap-responsive.css" rel="stylesheet" type="text/css" />  <style type="text/css"> .module_round_box_outer, #s5_above_body, #s5_below_body { font-size:em !important; } #s5_component_wrap { font-size:em !important; } #s5_nav { font-size:em !important; } #subMenusContainer { font-size:em !important; } /* MAX IMAGE WIDTH */img { height:auto !important; max-width:100% !important; -webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box !important; /* Firefox, other Gecko */ box-sizing: border-box !important; /* Opera/IE 8+ */ }#map_canvas img, .gm-style img { max-width:none !important; }.full_width { width:100% !important; -webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box !important; /* Firefox, other Gecko */ box-sizing: border-box !important; /* Opera/IE 8+ */ } img.ie7, img.boxed, img.boxed_black, img.padded { max-width:95% !important; } #s5_drop_down_container { overflow:visible !important; } .S5_submenu_itemTablet{ background:none !important; } .s5_wrap { max-width:1300px !important; } </style><script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function(){if(document.body.offsetWidth<=750){document.addEventListener('touchstart',handleTouchStart,false);document.addEventListener('touchmove',handleTouchMove,false);var xDown=null;var yDown=null;function handleTouchStart(evt){xDown=evt.touches[0].clientX;yDown=evt.touches[0].clientY;};function handleTouchMove(evt){if(!xDown||!yDown){return;} var xUp=evt.touches[0].clientX;var yUp=evt.touches[0].clientY;var xDiff=xDown-xUp;var yDiff=yDown-yUp;if(Math.abs(xDiff)>Math.abs(yDiff)){if(xDiff>0){s5_responsive_mobile_sidebar();}else{s5_responsive_mobile_sidebar();}}else{if(yDiff>0){}else{}} xDown=null;yDown=null;};}});jQuery(document).resize(function(){if(document.body.offsetWidth<=750){document.addEventListener('touchstart',handleTouchStart,false);document.addEventListener('touchmove',handleTouchMove,false);var xDown=null;var yDown=null;function handleTouchStart(evt){xDown=evt.touches[0].clientX;yDown=evt.touches[0].clientY;};function handleTouchMove(evt){if(!xDown||!yDown){return;} var xUp=evt.touches[0].clientX;var yUp=evt.touches[0].clientY;var xDiff=xDown-xUp;var yDiff=yDown-yUp;if(Math.abs(xDiff)>Math.abs(yDiff)){if(xDiff>0){s5_responsive_mobile_sidebar();}else{s5_responsive_mobile_sidebar();}}else{if(yDiff>0){}else{}} xDown=null;yDown=null;};}});/*]]>*/</script> <link rel="stylesheet" href="http://www.pluginaria.com/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="http://www.pluginaria.com/templates/system/css/general.css" type="text/css" /> <link href="http://www.pluginaria.com/templates/shape5_vertex/css/template_default.css" rel="stylesheet" type="text/css" /> <link href="http://www.pluginaria.com/templates/shape5_vertex/css/template.css" rel="stylesheet" type="text/css" /> <link href="http://www.pluginaria.com/templates/shape5_vertex/css/com_content.css" rel="stylesheet" type="text/css" /> <link href="http://www.pluginaria.com/templates/shape5_vertex/css/editor.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="http://www.pluginaria.com/templates/shape5_vertex/css/custom.css" />  <link href="http://www.pluginaria.com/templates/shape5_vertex/css/core/s5_info_slide-min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.pluginaria.com/templates/shape5_vertex/js/core/s5_info_slide-min.js"></script>  <script type="text/javascript">//<![CDATA[ var s5_resize_columns_browser_check = "ie7"; var s5_resize_columns = "all"; var s5_resize_columns_delay = "500"; var s5_resize_columns_small_tablets = "default"; //]]></script> <script type="text/javascript" src="http://www.pluginaria.com/templates/shape5_vertex/js/core/s5_columns_equalizer-min.js"></script>    <link href="http://www.pluginaria.com/templates/shape5_vertex/css/IECSS3.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Allerta Stencil" /> <style type="text/css"> body {font-family: 'Arial',Helvetica,Arial,Sans-Serif ; background:#DDDDF0; } #s5_search input, #s5_menu_wrap, .s5_mod_h3, #subMenusContainer, h2 { font-family: Allerta Stencil; } #s5_menu_wrap, .s5_mod_h3 { text-transform:uppercase; } #s5_header_area_inner2, .module_round_box, .module_round_box-dark, #s5_component_wrap, #s5_footer_area_inner2 { -webkit-box-shadow: 0 0px 8px #BDBDBD; -moz-box-shadow: 0 0px 8px #BDBDBD; box-shadow: 0 0px 8px #BDBDBD; } a, .module_round_box .s5_h3_first, .module_round_box-none .s5_h3_first, .module_round_box ul.menu .current a, h2, h4, #s5_md_outer_wrap h3 { color:#17b; } #s5_nav li.active a, #s5_nav li.mainMenuParentBtnFocused a, #s5_nav li:hover a { color:#17b; } .button, li.pagenav-next, li.pagenav-prev, .validate { background:#17b; } #subMenusContainer div.s5_sub_wrap ul, #subMenusContainer div.s5_sub_wrap_rtl ul, #subMenusContainer div.s5_sub_wrap_lower ul, #subMenusContainer div.s5_sub_wrap_lower_rtl ul { border-bottom:solid 3px #17b; } .s5_lr_tab_inner {writing-mode: bt-rl;filter: flipV flipH;} #s5_header_area_inner2, #s5_header_wrap, #s5_search input, .module_round_box, .module_round_box-dark, #s5_component_wrap, #s5_footer_area_inner2, .padded, .padded:hover { behavior: url(http://www.pluginaria.com/templates/shape5_vertex/css/PIE.htc); position:relative; } .s5_wrap{width:100%;} </style> </head> <body id="s5_body"><a name="top"></a> <div id="s5_scrolltotop"></div>         <div id="s5_body_padding">  <div id="s5_header_area1"> <div id="s5_header_area2"> <div id="s5_header_area_inner" class="s5_wrap"> <div id="s5_header_area_inner2"> <div id="s5_header_wrap"> <div id="s5_logo_module" style="height:70px;width:600px"> <div class="moduletable"> <div class="custom" > <div style="font-family:Allerta Stencil; margin-top:16px;margin-left:16px;width:600px"> <a href="/" style="font-size:2em;margin-bottom:4px;display:block">PLUGINARIA</a> <div style="font-size:1.1em;color:#AAA">Modules and plugins for Joomla! content management system.</div> </div></div> </div> </div> <div id="s5_banner" style="padding-left:610px"> <ul class="nav menu mod-list"> <li class="item-141"><a href="http://www.jtricks.com/members/login.html" >Member login</a></li></ul> </div> <div style="clear:both; height:0px"></div> </div> <div id="s5_breadcrumb_fonts_wrap"> <div id="s5_breadcrumb_wrap"> <div class="moduletable"> <div class="breadcrumbs"> <a href="/" class="pathway">Pluginaria</a> // <img src="/templates/shape5_vertex/images/system/arrow.png" alt="" /> <span>AutoAnchor Menu</span></div> </div> <div class="moduletable"> <div class="custom" > <div style="margin-top:10px;border-top:1px solid #C5C5C5"><p style="margin-top:10px">Joomla! extensions featured on <a href="http://www.jtricks.com">JTricks.com</a> now have a new dedicated home. Welcome to Pluginaria!</p></div></div> </div> </div> <div style="clear:both;height:0px"></div> </div> </div> </div> </div> </div>         <div id="s5_center_area1"> <div id="s5_center_area2"> <div id="s5_center_area_inner" class="s5_wrap">    <div id="s5_columns_wrap"> <div id="s5_columns_wrap_inner"> <div id="s5_center_column_wrap"> <div id="s5_center_column_wrap_inner" style="margin-left:240px; margin-right:0px;"> <div id="s5_component_wrap"> <div id="s5_component_wrap_inner"> <div id="system-message-container"> </div> <div class="auto-anchor-start-marker" style="display:none"></div><div class="item-page" itemscope itemtype="https://schema.org/Article"> <meta itemprop="inLanguage" content="en-GB" /> <div class="page-header"> <h2 itemprop="headline"> AutoAnchor Menu </h2> </div> <div itemprop="articleBody"> <p>AutoAnchor Menu makes it possible to navigate between the sections of a long article by automatically generating menu from the header tags in the article.</p> <div class="custom" > <table class="bro-compat" style="border-collapse: collapse; border-left: none; border-right: none; border-top: 2px solid #26A; border-bottom: 2px solid #26A;margin-top:16px;margin-bottom:16px"> <tbody> <tr> <td class="bro-half" style="padding-top: 8px; padding-bottom: 8px; width: 271px; vertical-align: middle; text-align: center;">AutoAnchor Menu module for Joomla!<br />...only <strong>EUR 5.00</strong>!</td> <td class="bro-half" style="padding-top: 8px; padding-bottom: 8px; width: 271px; text-align: center;"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="HUBQKJPW8BXTY" /> <input style="border: 0px;" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" type="image" /> <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" border="0" width="1" height="1" /> </form></td> </tr> </tbody> </table></div>  <table class="bro-compat" style="border-collapse: collapse; border-left: none; border-right: none; border-top: none; border-bottom: 2px solid #26A;margin-bottom:16px;margin-top:-16px"> <tbody> <tr> <td class="bro-half" style="padding-top: 8px; padding-bottom: 8px; width: 171px; vertical-align: middle; text-align: center;"><img src="/images/guarantee.jpg"></td> <td class="bro-half" style="padding-top: 8px; padding-bottom: 8px; width: 371px; text-align: center;"> <strong>30 days 100% money back guarantee.</strong> <br/><br/> We take customer satisfaction very seriously. If you're unsatisfied for any reason please don't hesitate to contact <a href="/feedback-support.html">support</a> to receive full refund. </td> </tr> </tbody> </table> <h4 data-event-category="AutoAnchor" data-event-action="Selection" data-event-label="Highlights" data-event-value="1">Highlights</h4> <p>Designed for Joomla 1.6, 1.7, 2.5 and 3.x.</p> <p>Features include:</p> <ul> <li>Link to top and link to bottom of the page;</li> <li>Automatically generated menu from H1..H6 tags (configurable separately for each header level);</li> <li>Flat or tree-like menu from different header levels</li> <li>Smooth scroll to anchors;</li> <li>Scrolling can be disabled for particular axis;</li> <li>Menu item for current section can be highlighted (computed from the highest header currently visible on screen).</li> </ul> <h4 data-event-category="AutoAnchor" data-event-action="Selection">Module demo</h4> Please see the menu on the left hand side (bottom module). To make it follow user scrolling, Absolute Floating menu container is used. Please note that this article uses <code>H4</code> tags as headers, therefore the module is configured to include <code>H4</code> tags only in the menu. <h4>FAQ</h4> <p><strong>Q: I have fixed header and it obscures text after menu item click.</strong></p> <p>A: Put header height into 'Anchors vertical margin’ parameter in 'Advanced Options' section.</p> <h4>See also</h4> AutoAnchor module is especially great together with: <ul> <li><a href="/absolute-floating-menu.html">Absolute Floating Menu</a>, which will allow your AutoAnchor Menu to be visible onscreen when the user scrolls in an animated way;</li> <li><a href="/fixed-n-sticky.html">Fixed'n'Sticky</a> will do the same but without animation;</li> </ul> <p>Don't need automatic anchor generation but like the smooth scrolling effect? Please check out <a href="/smooth-scroll-anchors.html">Smooth Scroll Anchors</a>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> Take a note how the active menu item selection changes; the module controls which section is currently on screen and adjusts selection accordingly. This will give the visitors overview of progress through the page. <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>- Lorem ipsum!</p> <p>- Dolor sit amet!</p> <p>(a battle cry of a web designer)</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <h4>Final word</h4> It's great you've jumped (or well, scrolled) to this section of the article. Do you like the module? Then... <div class="custom" > <div class="custom" > <table class="bro-compat" style="border-collapse: collapse; border-left: none; border-right: none; border-top: 2px solid #26A; border-bottom: 2px solid #26A;margin-top:16px;margin-bottom:16px"> <tbody> <tr> <td class="bro-half" style="padding-top: 8px; padding-bottom: 8px; width: 271px; vertical-align: middle; text-align: center;">AutoAnchor Menu module for Joomla!<br />...only <strong>EUR 5.00</strong>!</td> <td class="bro-half" style="padding-top: 8px; padding-bottom: 8px; width: 271px; text-align: center;"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="HUBQKJPW8BXTY" /> <input style="border: 0px;" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" type="image" /> <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" border="0" width="1" height="1" /> </form></td> </tr> </tbody> </table></div> </div> AutoAnchor Menu extension provides: Menu automatic generation from headers and smooth scrolling.<br/> Menu can stay visible on screen using: <a href="/absolute-floating-menu.html">Absolute Floating Menu</a> or <a href="/fixed-n-sticky.html">Fixed'n'Sticky</a>. </div> </div> <div class="auto-anchor-stop-marker" style="display:none"></div> <div style="clear:both;height:0px"></div> </div> </div> </div> </div>  <div id="s5_left_column_wrap" class="s5_float_left" style="width:240px"> <div id="s5_left_column_wrap_inner"> <div id="s5_left_wrap" class="s5_float_left" style="width:240px"> <div class="module_round_box_outer"> <div class="module_round_box "> <div class="s5_module_box_1"> <div class="s5_module_box_2"> <div class="s5_mod_h3_outer"> <h3 class="s5_mod_h3"> <span class="s5_h3_first">Extensions </span><span class="s5_h3_last"> for Joomla!</span> </h3> </div> <div class="s5_mod_h3_below" style="clear:both"></div> <div class="s5_outer "> <ul class="nav menu mod-list"> <li class="item-109 default"><a href="/" >Pluginaria</a></li><li class="item-172 divider"><span class="separator ">Sales Improvement</span> </li><li class="item-170"><a href="/urge-visitor.html" >Urge Visitor</a></li><li class="item-115 divider"><span class="separator ">Module effects</span> </li><li class="item-108"><a href="/absolute-floating-menu.html" >Absolute Floating Menu</a></li><li class="item-129"><a href="/fixed-n-sticky.html" >Fixed'n'Sticky</a></li><li class="item-150"><a href="/responsive-module-rerouter.html" >Responsive Module Rerouter</a></li><li class="item-155"><a href="/superimpose-module.html" >Superimpose Module</a></li><li class="item-158 divider"><span class="separator ">Links & Menus</span> </li><li class="item-125 current active"><a href="/autoanchor-menu.html" >AutoAnchor Menu</a></li><li class="item-142"><a href="/smooth-scroll-anchors.html" >Smooth Scroll Anchors</a></li><li class="item-114 divider"><span class="separator ">Toolkit</span> </li><li class="item-113"><a href="/custom-html-advanced.html" class="free-extension">Custom HTML Advanced</a></li><li class="item-153"><a href="/j25-legacy.html" class="free-extension">J25 Legacy</a></li><li class="item-116"><a href="/unified-module-chrome.html" class="free-extension">Unified Module Chrome</a></li><li class="item-130"><a href="/template-modifier.html" class="free-extension">Template Modifier</a></li></ul> </div> <div style="clear:both; height:0px"></div> </div> </div> </div> </div>  <div id="floatcontainer_floating_absolute" style="position:relative"> <div id="floatdiv_floating_absolute" style="position:absolute;z-index:"> <div class="module_round_box_outer"> <div class="module_round_box "> <div class="s5_module_box_1"> <div class="s5_module_box_2"> <div class="s5_mod_h3_outer"> <h3 class="s5_mod_h3"> <span class="s5_h3_first">AutoAnchor </span><span class="s5_h3_last"> Demo</span> </h3> </div> <div class="s5_mod_h3_below" style="clear:both"></div> <div class="s5_outer ">  <ul id="autoanchormenu_46" class="menu"><li style="display:none"></li></ul> <script type="text/javascript"> //<![CDATA[ if (AutoAnchorMenu.moduleInit == undefined) AutoAnchorMenu.moduleInit = {}; if (AutoAnchorMenu.moduleInitComplete == undefined) AutoAnchorMenu.moduleInitComplete = {}; AutoAnchorMenu.moduleInit['autoanchormenu_46'] = function () { if (AutoAnchorMenu.moduleInitComplete['autoanchormenu_46']) return; AutoAnchorMenu.moduleInitComplete['autoanchormenu_46'] = true; AutoAnchorMenu('autoanchormenu_46', { entryMarkup: '<li class="$clazz$"><a class="auto_anchor_menu_item" href="#anchor" onclick="AutoAnchorMenu.registerClick(this, true, true)">$title$</a>', entryPostfix: '</li>', levelDown: '<ul>', levelUp: '</ul>', showActive: true, handledProperty: 'autoAnchorGathered' }) .scatterTop('To Top').gather().scatter('h4', 1).scatter('h5', 2).gather().scatterBottom('To Bottom').gather().selectActive() ; if (location.hash != undefined && location.hash != '') location.hash = '' + location.hash;new Fx.SmoothScroll({ links: '.auto_anchor_menu_item', axes: ['x', 'y'], duration: 500}); }; if (window.jQuery) { jQuery(AutoAnchorMenu.moduleInit['autoanchormenu_46']); jQuery(window).on('load', AutoAnchorMenu.moduleInit['autoanchormenu_46']); } window.addEvent('domready', AutoAnchorMenu.moduleInit['autoanchormenu_46']); window.addEvent('load', AutoAnchorMenu.moduleInit['autoanchormenu_46']); //]]> </script>  </div> <div style="clear:both; height:0px"></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> floatingMenu.add('floatdiv_floating_absolute', { prohibitXMovement: true, targetTop: 5, distance: .07, snap: true }); </script>  </div> </div> </div>    </div> </div>    </div> </div> </div>         <div id="s5_footer_area1"> <div id="s5_footer_area2"> <div id="s5_footer_area_inner" class="s5_wrap"> <div id="s5_footer_area_inner2"> <div id="s5_footer_module"> <div class="moduletable">  <span style="font-weight:bold">© 2012-2024 <a style="font-family:Allerta Stencil" href="/">PLUGINARIA</a></span> </div> </div> <div id="s5_bottom_menu_wrap"> <div class="moduletable"> <ul class="nav menu mod-list"> <li class="item-138"><a href="/licensing.html" >Licensing</a></li><li class="item-140"><a href="/feedback-support.html" >Feedback & Support</a></li></ul> </div> </div> <div style="clear:both; height:0px"></div> </div> </div> </div> </div>     <script type="text/javascript">//<![CDATA[ var s5_lazyload = "all"; //]]></script> <script type="text/javascript" src="http://www.pluginaria.com/templates/shape5_vertex/js/core/lazy_load-min.js"></script>   <script type='text/javascript'> jQuery(document).ready(function(){ jQuery('.s5_is_slide').each(function (i, d) { jQuery(d).wrapInner(jQuery('<div class="s5_is_display"></div>')); }); var options = { wrapperId: "s5_body" }; var slide = new Slidex(); slide.init(options); }); </script>      </div> <a name="bottom"></a><div id="visitor-urgency-box"> <a href="javascript:void(0)" onclick="{ hideVisitorUrgencyBox(); }">x</a> People have been checking out this extension 27 times in the past seven days. <br/><br/> <span style="font-style:italic"> This box is <a style="color:lightblue" href="/urge-visitor.html">Urge Visitor</a> extension available on pluginaria.com!</span> </div> <script type="text/javascript"> window.UrgeVisitorOptions = { superimposeSelector: '#s5_breadcrumb_fonts_wrap', delayAppearance: 3000, delayDisappearance: 30000, margin: 10, superimposePosition: 'topright' }; </script> </html>

CINXE.COM

AutoAnchor Menu