Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Connecting menu with content

Featured Replies

Hello!

 

I've build following simple structure for demonstration of what I want:

 

Link

 

How do I connect menu with content on the right, so for each title of menu there is some specified content vieiwed (for example, I have HTML files, where I store some text and I want it to be on the right, when I press specified item of menu)? I know one way of doing it through frames, but what is modern way (like, for example, in Joomla or on all modern websites)?

 

Website with menu navigation as example:

 

Example

 

Thank you for help!

The easiest way to do it is to make an HTML file for each page. You could start by changing the menu code like so:

 

<ul>
<li><a href="page1.html">Title 1</a></li>
<li><a href="page2.html">Title 2</a></li>
<li><a href="page3.html">Title 3</a></li>
</ul>

 

Then select all of your HTML file, copy and paste it into new files named page1.html, and so on. In those new HTML files, edit the content on the right.

You are saying that you have the same menu on every page but different content.

 

I think most people would create a separate page for each content and repeat the menu using PHP "includes".

 

Form one page complete in the normal way with the menu and check that it validates and displays properly.

Open up Notepad or a text editor (not Word) and cut the code that repeats in every page completely (as much or as little as you want, without doctype, html, head or body tags) and paste it into Notepad and save as an "include" file called menu.inc. You then have only one file to edit if the menu changes.

 

Substitute the code you have cut out with PHP code

<?php include ("menu.inc"); ?>

in the main file and save it with .php filename extension instead of .html or .htm.

Do the same with other main pages where the menu repeats and name them with .php extension.

 

You can use .txt, .php, .html or .htm for the "include" file but it distinguishes it as an "include" file in your file list if you use .inc as the filename extension and it's even better if you put all "include" files in a different directory/folder.

 

If you use a complete page as an "include" file with .html or .htm for the filename extension the final processed page will have two doctypes, two html tags, two head sections, etc. in an unusual place which is not a good idea so only put the menu code (say the li tags if formed as a list) in the menu.inc file.

 

You can have different "include" files on the same main pages for header and footer and even use "includes" for the parts of the head section that repeat.

 

The PHP code needs to be processed by a server before the result can be seen, either by the hosting service's server just before downloading or by a server like WampServer 2 (which includes Apache) on your computer for local viewing.

 

SHTML works the same way but the "include" file must have .txt filename extension and the main pages have the code <!--#include file="menu.txt"--> and the .shtml filename extension.

 

Check that your hosting service supports PHP or SHTML as free webspaces provided by ISPs usually do not.

  • 3 months later...

Sorry to bring this old old thread up, but I was just wondering whether its possible to include css to my php include?

 

I've tried an internal css (<style type="text/css"></style>) but it didn't seem to work...

Sorry to bring this old old thread up, but I was just wondering whether its possible to include css to my php include?

 

I've tried an internal css (<style type="text/css"></style>) but it didn't seem to work...

 

You should really aim to keep things seperate, but some times i understand it makes more sense to include special styles only on a single page.

 

<?php echo'
<style type="text/css">
#div1{width:200px;}
#p{colour:red}

</style>
' ?>

 

 

Should work, just be careful not to cross quotes. I've used single quotes on the echo, so you should only use double quotes within the echo.

 

If you have to cross quotes, then escape them by placing a \ before them.

 

<?php echo' <a href="#" class=\'This class contains crossed quotes\' /> '?>

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.