The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Fixed menu
RobertWA
post May 6 2021, 10:33 AM
Post #1





Group: Members
Posts: 8
Joined: 6-May 21
Member No.: 27,926



I am fairly new to HTML but I think I understand the basics. But I have a problem.

I want a page which has a fixed side menu (left side, about 20% wide) containing hyperlinks to html files, which will open when selected in the right-hand 80% of the screen. I want the menu to remain on the screen while the user scrolls through the file content.

I have tried using iframes and that works except for one annoying feature. When the content opens in the right-hand iframe it has its own vertical scrollbar, and the overall page also has a vertical scrollbar. (The menu on the left has only a few items so it will not need to scroll.) In order to see the full content of my file I have to use both scrollbars.

What I would like to be able to do is to have the clicked file open in the right-hand part of the screen but without its own scrollbar. In this way I would just need to use the main page scrollbar to scroll down through my entire document.

I have seen several examples of sidebar menus but none of them has used links from one side to the other – they generally just include predefined content to demonstrate the structure and the scrolling behaviour. If I try to adapt these to include hyperlinks (ie without using iframes) I find that the selected file opens in the whole screen, blocking the menu, rather than only in the 80% so that the menu remains visible.

Any help would be appreciated.

Robert
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 6 2021, 11:06 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,774
Joined: 9-August 06
Member No.: 6



What about putting the menu, not the content in an iframe and disable the iframe scrollbars?

I'd advice you not to use any kind of frames though. It's much better to include the menu on each page. Either you do it serverside or just copy the menu markup into each HTML page. Iframes are basically only used for ads today, were seldom for content.

https://htmlhelp.com/faq/html/frames.html#frame-problems
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertWA
post May 6 2021, 11:26 AM
Post #3





Group: Members
Posts: 8
Joined: 6-May 21
Member No.: 27,926



Thank you for the reply.

QUOTE(pandy @ May 7 2021, 12:06 AM) *

What about putting the menu, not the content in an iframe and disable the iframe scrollbars?


How do I disable the scrollbars? If I can do that my problem should be solved, because that is the only issue I have with my iframes method.

QUOTE
It's much better to include the menu on each page. ..... or just copy the menu markup into each HTML page.


If I put the menu on each page how do I stop the opened link document from taking up the whole screen and therefore blocking the menu?

Robert


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 6 2021, 11:42 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,774
Joined: 9-August 06
Member No.: 6



QUOTE(RobertWA @ May 6 2021, 06:26 PM) *

How do I disable the scrollbars? If I can do that my problem should be solved, because that is the only issue I have with my iframes method.


No, it's the only issue you are aware of. happy.gif

scrolling="no". See here.
https://htmlhelp.com/reference/html40/special/iframe.html

QUOTE

If I put the menu on each page how do I stop the opened link document from taking up the whole screen and therefore blocking the menu?


That isn't even an issue since the menu is part of each page. It will never be blocked. It can be blocked as little as a specific paragraph on the page can.

If you care about such things you can easily make the link to the current page have another color (snip of CSS) and even not be a link, i.e. not be clickable (snip of JavaScript).

This is the right way to do it. Don't start to mess with frames. It will cramp your style and isn't a good idea when you are learning the ropes. Better to learn how to do it the proper way and you will have less to unlearn later. If you want to play with frames and iframe to learn how they work, that's another thing. But for a real site, no.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertWA
post May 6 2021, 02:11 PM
Post #5





Group: Members
Posts: 8
Joined: 6-May 21
Member No.: 27,926



Thanks again.

QUOTE(pandy @ May 7 2021, 12:42 AM) *


That isn't even an issue since the menu is part of each page. It will never be blocked. It can be blocked as little as a specific paragraph on the page can.



My understanding of the basics isn't as good as I thought! If my menu appears as part of each page, won't it disappear from the screen as the viewer scrolls down through a long document? Or is there a way to fix it and let the document scroll past it?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 6 2021, 03:04 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,774
Joined: 9-August 06
Member No.: 6



Ah, you meant when scrolling. Sorry, I thought you meant the content would sort of cover it or push it to the side. Yes. It would in a plain HTML document. But with CSS you can make it stay put. It's called position: fixed.

Look at this. It's just quick and dirty. You can position the menu wherever you want. It doesn't need to be jammed against the top of the page. Load this in a browser and make the window small enough for the scroll bar to appear. And scroll. The menu stays at the top of the window. And it only took a few lines of CSS to make that happen.


CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>position: fixed</title>

<style type="text/css">
<!--
#menu   { position: fixed;
          left: 0; top: 0;
          width: 10em;
          background: yellow }

#main   { margin-left: 11em }
-->
</style>


</head>


<body>

<div id="menu">
This is the menu.<br>
This is the menu.<br>
This is the menu.<br>
This is the menu.<br>
This is the menu.<br>
This is the menu.<br>
This is the menu.<br>
This is the menu.
</div>


<div id="main">
<p>
Text text text text text text text text text text text text text text text text text text text text textv text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text textv text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text textv text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text textv text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text textv text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text textv text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text textv text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text textv text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text textv text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text textv text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text textv text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>


</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertWA
post May 7 2021, 09:13 AM
Post #7





Group: Members
Posts: 8
Joined: 6-May 21
Member No.: 27,926



Thank you again for your reply.

This code solves the scrolling problem, i.e. the content scrolls past the fixed menu. However it doesn't solve the other problem mentioned in my original post, i.e. when I click on a hyperlink in the menu the relevant document (html file) occupies the whole screen, covering the menu. What I would like is to be able to have the file open in the non-menu part of the screen only (like your "text text text" example did.)

Robert
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 7 2021, 09:23 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,774
Joined: 9-August 06
Member No.: 6



You miss the point. You are supposed to have the menu in every page. Do that and you'll just see a flicker when the page changes.

Look at the top right menu at this forum (Forums | Rules | Members | Search | Help). You click one of those links and the whole top part of the page stays the same but the content changes, right? That's because the top part is included in every page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertWA
post May 7 2021, 09:59 AM
Post #9





Group: Members
Posts: 8
Joined: 6-May 21
Member No.: 27,926



QUOTE(pandy @ May 7 2021, 10:23 PM) *

You miss the point. You are supposed to have the menu in every page. Do that and you'll just see a flicker when the page changes.

Look at the top right menu at this forum (Forums | Rules | Members | Search | Help). You click one of those links and the whole top part of the page stays the same but the content changes, right? That's because the top part is included in every page.


Thank you yet again. I understand now about putting the menu on every page. However is it possible to do this by having the menu in a separate file and somehow calling it to every page? My concern is if I have a lot of pages and I need to make a menu change, that would require making the change on each individual page. With the iframes structure I was able to do this by targeting the left iframe when I opened the menu file.

Robert

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 7 2021, 10:10 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,774
Joined: 9-August 06
Member No.: 6



Absolutely. The best is to do it server side. You can also do it on your computer. There are programs for that, but even fairly advanced Find & Replace can do it. The disadvantage of the latter method is that all pages need to be uploaded again each time you change something.

You can read a little about the options here https://htmlhelp.com/faq/html/design.html#include-file .

The text is a little outdated. SSI is still an option and available on most servers. But PHP may be a better option since that is a real programming language in common use for web pages and you may want something else later that requires PHP and it doesn't mix with SSI.

You don't need to know programming to do this. It's just a matter of embedding special tags that will be replaced with the content of the file you point to before the page is served. A few more steps is needed to enable this on the server, but nothing major.

But start with manually embedding the menu in a few pages, get the layout right and see what you think. We can help you with the rest later. Are your site already hosted somewhere and if so is PHP available? All paid hosts should have it but not necessarily free ones.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertWA
post May 7 2021, 10:23 AM
Post #11





Group: Members
Posts: 8
Joined: 6-May 21
Member No.: 27,926



Once again, thanks.

My site is still very embryonic and is only on my computer - not yet hosted. I have quite a bit of work to do yet (as is obvious from my questions) before it goes live.

I'm sure I'll be back with follow-up questions as I get stuck.

Thanks again for all your help and for giving me lots to think about.

Regards

Robert
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 7 2021, 11:30 AM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,774
Joined: 9-August 06
Member No.: 6



OK. Keep this in mind when it's time to get a host then.

You can start with static pages and change to including the menu server side at a later point when your site has grown. Honestly, if there aren't too many pages it isn't troublesome to update a menu on all pages, even if you do it by hand without any tools.

Just keep a copy of just the menu separate. And mark the menu out properly in the pages so you don't need to search for it, for example with large comments before and after and a couple of blank lines. Then it's done in a blink to paste the updated menu markup over the old one.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertWA
post May 7 2021, 10:52 PM
Post #13





Group: Members
Posts: 8
Joined: 6-May 21
Member No.: 27,926



QUOTE(pandy @ May 8 2021, 12:30 AM) *

OK. Keep this in mind when it's time to get a host then.

You can start with static pages and change to including the menu server side at a later point when your site has grown. Honestly, if there aren't too many pages it isn't troublesome to update a menu on all pages, even if you do it by hand without any tools.

Just keep a copy of just the menu separate. And mark the menu out properly in the pages so you don't need to search for it, for example with large comments before and after and a couple of blank lines. Then it's done in a blink to paste the updated menu markup over the old one.


Thanks again for this advice.

Sorry to be a bother but I would like to be able to get my scrolling problem sorted (even though you recommend not using iframes). I read the article you suggested and tried various combinations but without success.

My latest version looks like this:

CSS

body {
font-family: Arial, sans-serif;
background-color: wheat;
height:5000px;
}

I have played with various values for height (including none) but with no success.


Here I create the two columns

.column {
float: left;
padding: 10px;

}

.col1 {
width: 30%; background-color:wheat; padding-left:50px; padding-right:100px; height:100%; overflow:visible;
}


Column 1 doesn’t require scrolling – its contents are short.

.col2 {
width: 70%; background-color:wheat; height:100%; overflow:visible; padding-left:20px; padding-right:100px; scrolling:no;
}

Column 2 contains the main content file and will require scrolling, but I would prefer that the column itself didn’t contain a scrollbar, so that all the scrolling in this column would be done by the main page scrollbar.


My menu file contains menu items like


<a href="Bill Smith.html" target="myFrame">Bill Smith</a>

The content file (Bill Smith.html) contains

<body style="margin-left:200px"; style="margin-right:500px" style="scrolling:no">

I can’t see how to remove the scroll bar from Column 2. An acceptable alternative would be to have the scrollbar on Column 2 but have no scrollbar on the main page.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 7 2021, 11:29 PM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,774
Joined: 9-August 06
Member No.: 6



It's scrolling="no" and it isn't CSS, it's HTML, so don't put it in a style attribute. And it's an attribute for IFRAME. It doesn't apply to BODY.

You can only disable the scroll bar on body with CSS, overflow: hidden.

This is a very bad way of doing it, but here you go.


CODE
body         { margin: 0; padding: 0 }
html, body   { height: 100% }
body         { overflow-y: hidden }

#menu        { width: 25%; float: left }
iframe       { width: 70%; height: 100%;
               float: right;
               border: none }



HTML
<div id="menu">
Link<br>
Link<br>
Link</br>
Link</div>


<iframe src="https://htmlhelp.com"></iframe>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertWA
post May 8 2021, 09:33 PM
Post #15





Group: Members
Posts: 8
Joined: 6-May 21
Member No.: 27,926



Thank you again.

I am now going to see if I can make the no-frames version work.

Regards

Robert
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 27th July 2021 - 07:09 AM