Forums

need the "Page List" block to float, not sure how to do this

Permalink
I need to add the "Page List" block to a template, but I need it to float with the page as you scroll down.

I think the code needed to do this looks like this...

<style>div.floating-menu{position:fixed;right:1}</style>
<div class="floating-menu">
###INSERT Page_List HERE###
</div>


As I write this, now I'm thinking that maybe it's the Area Design portion that needs to be updated (the part that I drag the block into)? I'm very new to web design and have been hacking my way at trying to get this figured out.

I suppose I could just get all my pages done, then copy/paste the finished menu into the code above. However, that means that if I do any updates to the website that change the Page List then I'll have to edit it again.

Please help!
 
ordatabase replied on at Permalink Reply
To be more specific, I've created a training page. As sub-pages under that, I have various pages that each have their own training topic. As a person uses these training pages, I'd like there to be a floating menu on the right, which contains links to all the other subpages in the training set of pages.

I have the structure set up, and am trying to use a template for all of these (which I've already set up). I'm hoping to edit the block or placeholder on the right side of the page on the template to have this floating list of links. That way as I add new pages to the set of training pages, all I have to do is drop in the training materials in the left column.

Sorry if this is in the wrong location in the forums.

Thanks!
hutman replied on at Permalink Reply
hutman
I'm not sure if you are asking for help with the PHP and theme or the CSS so please provide more information if this answer doesn't hit on what you are looking to do. There is an if/else in here so the div only sits on the side of the site if you are not in edit mode, if it is over there in edit mode you will likely have issues editing it.

[code]
$c = Page::getCurrentPage();
if ($c->isEditMode()) {
<style type="text/css">
.floating-menu{
position: fixed;
right: 0px;
top: 300px;
}
</style>
} else {
<style type="text/css">
.floating-menu{
position: relative;
}
</style>
}
<div class="floating-menu">
// Page List goes here
</div>
ordatabase replied on at Permalink Reply
honestly hutman I do not know either. I'm brand new to all of this, and was the only one available for the task of building the site.

I'm not sure where exactly I would put that code you suggested. Any "instructions for dummys" would be appreciated.

Thanks,