Joomla Templates Club 406,261 posts

[jamjodesign Friend jamjodesignJoin date: June 2008Posts: 432Downloads:27Uploads:40 Thanks: 59 Thanked: 14 times in 3 posts]

#197190

Hi there, I was wondering if there was a way in JA Appolio to have a menu on a page like your have in your documentation pages here on joomlart like this one: http://www.joomlart.com/documentation/joomla-templates/ja-appolio#create-onepage

Basically I am looking to host some long pages and this type of navigation floating on the page would be perfect for this job. Any ideas on how to do this or if its possible? Thanks in advance

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#532985

Right now its difficult to guess the issue and give solution to you. You need to send me the screenshot and description on that particular screenshot on what you are trying to achieve. I might be able to help you out then.

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#533114

Hi Ninja Lead,

I think he is trying to achieve to have a menu like this, see attached.
Its also a really cool menu, specially like that the bars is filled up as you progress downwards. 🙂

Not knowing if that is what is wanted, but the floating feature was.

cheers,
Dennis

---

Attachments:

1. 

[jamjodesign Friend jamjodesignJoin date: June 2008Posts: 432Downloads:27Uploads:40 Thanks: 59 Thanked: 14 times in 3 posts]

#533118

you are correct dennis, I am trying to achieve as you describe here. Is this possible?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#533528

@jamjodesign and @iaassens: The script for such menu is for internal use on Joomlart only.

I am afraid this needs heavy customization which is beyond scope of our support. If you are a developer, you can try with workaround below:

+ JS:


// docs navigation
!function ($) {
if ($('.docs-sidebar').length) {
if (navigator.userAgent.match(/IEMobile/10.0/)) {
var style = document.createElement("style");
style.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}")), document.querySelector("head").appendChild(style)
}
var $window = $(window),
$body = $(document.body);

$body.scrollspy({
target: ".docs-sidebar"
});
$(".docs-sidebar").on ('activate.bs.scrollspy', function () {
$active = $('.docs-sidebar li.active');
$active.prevAll().find('.docs-progress-bar').css ('width', '100%');
$active.nextAll().find('.docs-progress-bar').css ('width', '0%');
}).find ('a').before ($('<span class="docs-progress-bar" />'));

$window.on("load", function () {
$body.scrollspy("refresh")
$active = $('.docs-sidebar li.active');
$active.prevAll().find('.docs-progress-bar').css ('width', '100%');
$active.nextAll().find('.docs-progress-bar').css ('width', '0%');
}).on ('scroll', function (event) {
if (this.timeout) {
clearTimeout(this.timeout);
}
this.timeout = setTimeout (function () {
var $active = $('.docs-sidebar li.active'),
$progress = $active.find('.docs-progress-bar'),
$scrollspy = $body.data('bs.scrollspy'),
scrollTop = $scrollspy.$scrollElement.scrollTop() + $scrollspy.options.offset,
scrollHeight = $scrollspy.$scrollElement[0].scrollHeight || $scrollspy.$body[0].scrollHeight,
maxScroll = scrollHeight - $scrollspy.$scrollElement.height(),
offsets = $scrollspy.offsets,
targets = $scrollspy.targets,
activeTarget = $scrollspy.activeTarget,
i;

if (scrollTop >= maxScroll) {
$progress.css ('width', '100%');
return ;
}

if (activeTarget && scrollTop <= offsets[0]) {
$progress.css ('width', '0%');
return ;
}
for (i = offsets.length; i--;) {
if (scrollTop >= offsets
&& (!offsets || scrollTop <= offsets)) {
var p1 = offsets,
p2 = scrollTop,
p3 = !offsets ? maxScroll : offsets,
p = (p2-p1)/(p3-p1)*100;
$progress.css ('width', p + '%');
return ;
}
}
}, 100);
});

$(".docs-container ").click(function (event) {
event.preventDefault()
});
setTimeout(function () {
var $docs = $(".docs-sidebar .nav-list");
$docs.affix({
offset: {
top: function () {
return this.top = $(".page-masthead").outerHeight() + 90.
},
bottom: function () {
return this.bottom = $("#t3-footer").outerHeight(!0) + $('.t3-navhelper').outerHeight(!0) + 50;
}
}
});
}, 100);
}
}(window.jQuery);


+ Css style:


.docs-sidebar .nav-list > li {
margin-bottom: 1px;
background: #f6f8fa
}
.docs-sidebar .nav-list > li > a {
border: 0;
border-left: 5px solid #dee4ec
color: #686a6f
background: none;
}
.docs-sidebar .nav-list > li > a:hover,
.docs-sidebar .nav-list > li > a:active,
.docs-sidebar .nav-list > li > a:focus {
border-left-color: #3f4045
}
.docs-sidebar .nav-list > li.active > a {
border-left-color: #29739d
}
.docs-sidebar .nav-list .docs-progress-bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: #dee4ec
}
.docs-sidebar.affix-button {
top: auto;
bottom: 0px;
}

+ HTML menu:


<div class="docs-sidebar">
<ul class="nav nav-list affix">
<li><span class="docs-progress-bar" style="width: 100%;"></span><a href="#intro">Introduction</a></li>
<li><span class="docs-progress-bar" style="width: 100%;"></span><a href="#system-requirement">System requirement</a></li>
<li class=""> <span class="docs-progress-bar" style="width: 100%;"></span><a href="#download">Download and installation</a></li>
<li class="active"><span class="docs-progress-bar" style="width: 54.96814132610087%;"></span><a href="#create-onepage">JA Appolio homepage</a></li>
<li><span class="docs-progress-bar" style="width: 0%;"></span><a href="#ext-config">Extension configuration</a></li>
<li><span class="docs-progress-bar" style="width: 0%;"></span><a href="#custom-html">Custom HTML modules</a></li>
<li><span class="docs-progress-bar" style="width: 0%;"></span><a href="#menu-system">Menu system</a></li>
<li><span class="docs-progress-bar" style="width: 0%;"></span><a href="#third-party">Third party extensions</a></li>
<li><span class="docs-progress-bar" style="width: 0%;"></span><a href="#content-markup">Content style and effect</a></li>
<li><span class="docs-progress-bar" style="width: 0%;"></span><a href="#template-config">Template configuration</a></li>
<li><span class="docs-progress-bar" style="width: 0%;"></span><a href="#upgrade">Upgrade and changes</a></li>
<li><span class="docs-progress-bar" style="width: 0%;"></span><a href="#recommend">Recommendation</a></li>
</ul>
</div>


1 user says Thank You to Ninja Lead for this useful post

1. iaassens

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#534337

Nice 🙂 http://www.joomlart.com/tutorials/joomla-tutorials/tutorial-how-to-add-progressive-sidebar-navigation-in-joomla-article

[pb66 Friend pb66Join date: May 2010Posts: 129Downloads:23Uploads:10 Thanks: 31 Thanked: 42 times in 27 posts]

#541813

I note that the Javascript is slightly different with each of these solutions – anyone know if one is better than the other?

Also, I’ve tried to implement the tutorial version on JA Argo in a K2 document and it didn’t work. Anyone had any experience with this type of use of this solution?

Thanks,

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#541831

My solution is extracted from Floating menu navigation of joomlart site

I just double checked the tutorial for reference here: http://www.joomlart.com/tutorials/joomla-tutorials/tutorial-how-to-add-progressive-sidebar-navigation-in-joomla-article it’s working fine but it is based on Bootstrap3 and jQuery.

[Author]

Posts