Customising a menu and minimise code

Gudday all
After a pause of a couple of years I have thrown myself back into my wife’s site and are realising how much I have forgotten and missed. (This may be in the wrong location)

I have a button menu that appears on all my wife’s pages, see below


<ul id="navbuttons">
<li style="list-style-type:none; margin-left: 0"><a href="index.htm"><img src="buttons/home.gif" alt="Petals & Patches home"></a></li>
<li style="list-style-type:none;"><a href="clothdolls.htm"><img src="buttons/clothdolls.gif" alt="Petals & Patches cloth dolls patterns"></a></li>
<li style="list-style-type:none;"><a href="stitcheries.htm"><img src="buttons/stitcheries.gif" alt="Petals & Patches stitcheries patterns"></a></li>
<li style="list-style-type:none;"><a href="applique.htm"><img src="buttons/applique.gif" alt="Petals & Patches applique patterns"></a></li>
<li style="list-style-type:none;"><a href="bears.htm"><img src="buttons/bears.gif" alt="Petals & Patches bear patterns"></a></li>
<li style="list-style-type:none;"><a href="quilts.htm"><img src="buttons/quilts.gif" alt="Petals & Patches bear patterns"></a></li>
<li style="list-style-type:none;"><a href="bags.htm"><img src="buttons/bags.gif" alt="Petals & Patches bag patterns"></a></li>
<li style="list-style-type:none;"><a href="chalkboards.htm"><img src="buttons/chalkboards.gif" alt="Petals & Patches chalkboard patterns"></a></li>
<li style="list-style-type:none;"><a href="seasidemoments.htm"><img src="buttons/seasidemoments.gif" alt="Petals & Patches Seaside Moments patterns"></a></li>
<li style="list-style-type:none;"><a href="blockofthemonth.htm"><img src="buttons/bom.gif" alt="Petals & Patches BoM patterns"></a></li>
<li style="list-style-type:none;"><a href="accessories.htm"><img src="buttons/accessories.gif" alt="Petals & Patches accessories"></a></li>
<li style="list-style-type:none;"><a href="ordering.htm"><img src="buttons/ordering.gif" alt="Petals & Patches bear ordering information"></a></li>
<li style="list-style-type:none;"><a href="contactus.htm"><img src="buttons/contactus.gif" alt="Contacting Petals & Patches"></a></li>
<li style="list-style-type:none;"><a href="stockists.htm"><img src="buttons/stockists.gif" alt="Petals & Patches pattern stockists"></a></li>
<li style="list-style-type:none;"><a href="mailto:info&#64petalsandpatches.com?subject=E-mail request for Petals and Patches"><img src="buttons/e-mailus.gif" alt="E-mailing Petals & Patches"></a></li>
<li style="list-style-type:none;"><a href="links.htm"><img src="buttons/links.gif" alt="Petals & Patches pattern stockists"></a></li>                                                                                                                  <li style="list-style-type:none;"><a href="http://ww8.aitsafe.com/cf/review.cfm?userid=A736163"><img src="buttons/reviewcart.gif" alt="Petals & Patches bear patterns"></a></li>                                                                                                                                                                <li style="list-style-type:none;"><a href="http://petalsandpatches.wordpress.com/"><img src="buttons/blog.gif" alt="Petals & Patches blog"></a></li>
</ul>

A few years ago I would have used javascript to have this code appear on each page with the code on an external .js page.
Can it be done with the CCS/HTML5 etc. and without scripting i.e replace all that code with a snippet and have the bulk elsewhere, perhaps in a .css file?
The code appears within its own column on the left side of the page(s). See http://www.petalsandpatches.com for the working site.

You are just trying to create a dropdown, yes? You never actually said what you want. If you do want a dropdown, please refer to this dropdown.

http://www.pmob.co.uk/temp/dropdown-vertical3.htm

That second level list needs to be wrapped in a <ul>. View that demo to see how they set it up. If you have questions, come back :).

Maybe I have misunderstood your question, but did you want to cut down on having all that navigation code on each page?

You could store your navigation code in a separate file and use a php include on each page to include the navigation. That way if you have to change it you only have to change one file.

(I would also move any inline styles to a separate.css file.)

To do this, you might call it navigation.php. Then change the extension of all your page files from .html to .php.
Then on each page replace the menu with the code

<?php include 'navigation.php';?>

Hi, Tigers!

This is what the code that you posted looks like on our browsers. A nice, vertical list.

I took the initial inline style out and put it in CSS at the top of the page. I wasn’t quite able to understand the purpose behind assigning margin:0; to the first list item and not the others, so I assigned it to all of them as a reset.

You will need to post more code and perhaps a screenshot or two for us to see how the menu is used today or how you wish it to appear.

This example is a “working page”. One can copy the code into a file with an .html suffix and open it in his browser. It would be most helpful if you could post a working page with all of the affecting code, if practical.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1229832-Customising-a-menu-and-minimise-code
2014.08.22 07:48
Tigers!
-->
    <style type="text/css">

ul {
    list-stype-type:none;
    padding:0;
    margin:0;
}

    </style>
</head>
<body>

<ul id="navbuttons">
    <li><a href="index.htm"><img src="buttons/home.gif" alt="Petals &amp; Patches home"></a></li>
    <li><a href="clothdolls.htm"><img src="buttons/clothdolls.gif" alt="Petals &amp; Patches cloth dolls patterns"></a></li>
    <li><a href="stitcheries.htm"><img src="buttons/stitcheries.gif" alt="Petals &amp; Patches stitcheries patterns"></a></li>
    <li><a href="applique.htm"><img src="buttons/applique.gif" alt="Petals &amp; Patches applique patterns"></a></li>
    <li><a href="bears.htm"><img src="buttons/bears.gif" alt="Petals &amp; Patches bear patterns"></a></li>
    <li><a href="quilts.htm"><img src="buttons/quilts.gif" alt="Petals &amp; Patches bear patterns"></a></li>
    <li><a href="bags.htm"><img src="buttons/bags.gif" alt="Petals &amp; Patches bag patterns"></a></li>
    <li><a href="chalkboards.htm"><img src="buttons/chalkboards.gif" alt="Petals &amp; Patches chalkboard patterns"></a></li>
    <li><a href="seasidemoments.htm"><img src="buttons/seasidemoments.gif" alt="Petals &amp; Patches Seaside Moments patterns"></a></li>
    <li><a href="blockofthemonth.htm"><img src="buttons/bom.gif" alt="Petals &amp; Patches BoM patterns"></a></li>
    <li><a href="accessories.htm"><img src="buttons/accessories.gif" alt="Petals &amp; Patches accessories"></a></li>
    <li><a href="ordering.htm"><img src="buttons/ordering.gif" alt="Petals &amp; Patches bear ordering information"></a></li>
    <li><a href="contactus.htm"><img src="buttons/contactus.gif" alt="Contacting Petals &amp; Patches"></a></li>
    <li><a href="stockists.htm"><img src="buttons/stockists.gif" alt="Petals &amp; Patches pattern stockists"></a></li>
    <li><a href="mailto:info&#64;petalsandpatches.com?subject=E-mail request for Petals and Patches"><img src="buttons/e-mailus.gif" alt="E-mailing Petals &amp; Patches"></a></li>
    <li><a href="http://petalsandpatches.wordpress.com/"><img src="buttons/blog.gif" alt="Petals &amp; Patches blog"></a></li>
    <li><a href="links.htm"><img src="buttons/links.gif" alt="Petals &amp; Patches pattern stockists"></a></li>
    <li><a href="http://ww8.aitsafe.com/cf/review.cfm?userid=A736163"><img src="buttons/reviewcart.gif" alt="Petals &amp; Patches bear patterns"></a></li>
</ul>

</body>
</html>

You asked how to apply the menu to other pages in your site. Just offhand, as @WebMachine recommended, I would consider using a PHP “include” to import/call an external file containing the menu HTML.

Thank you for all your replies.
I realise now that I was obtuse. I wrote what I did and it made sense from my perspective but of course I know what I want.
I was after the buttons appearing all the time.
The issue has arisen because my daughter has started her own jewellery business and to help her on I will put a page for her jewellery on my wifes site’s via another button on the menu. There are greater than 20 pages so 20 code page changes…
That’s why I asked about getting that code off each page and onto it’s own code page. I guess I am showing my age by stating that I have previously used javascript. Know very little of php but time to learn.

css for buttons


#l-col { float: left; 
        background: #FEFEFE;  
	color: #333333; 
	width: 150px; 
	border: 0px solid #00FF00;   /* lime green border for testing */		 
	margin: 2px; 
	padding: 2px;
	   }

Left column containing the button menu


<div id="l-col">
<ul id="navbuttons">
/* button code here */
</div>

Ryan
Thanks for that little snippet. I have a stockists page where I wanted to have sub-menu under a main but have not been able to code successfully. Yours looks ok (with the necessary modifications)

Ronpat
I will craft a test page with the PHP include to try it out. Thank you.

Hi, Tigers!

A PHP include for the menu is very easy to implement. I am PHP illiterate (heck, I can barely spell PHP) but I can create a menu include because it falls within my competence level with “Copy and Paste”. :stuck_out_tongue:

This is the gist of it.

Write an HTML page complete with styled menu (which you already have, so I’ll borrow your code).


<h1>Stitcheries</h1>
</div>
<div id="bodyblock" align="right">
<div id="l-col">
<ul id="navbuttons">
<li><a href="index.htm"><img src="buttons/crystal buttons/JoomlaButtonhome.png" alt="Petals &amp; Patches home"></a></li>
<li><a href="clothdolls.htm"><img src="buttons/crystal buttons/JoomlaButtonclothdolls.png" alt="Petals &amp; Patches cloth dolls patterns"></a></li>
<li><a href="stitcheries.htm"><img src="buttons/crystal buttons/JoomlaButtonstitcheries.png" alt="Petals &amp; Patches stitcheries patterns"></a></li>
<li><a href="applique.htm"><img src="buttons/crystal buttons/JoomlaButtonapplique.png" alt="Petals &amp; Patches applique patterns"></a></li>
<li><a href="bears.htm"><img src="buttons/crystal buttons/JoomlaButtonbears.png" alt="Petals &amp; Patches bear patterns"></a></li>
<li><a href="quilts.htm"><img src="buttons/crystal buttons/JoomlaButtonquilts.png" alt="Petals &amp; Patches bear patterns"></a></li>
<li><a href="bags.htm"><img src="buttons/crystal buttons/JoomlaButtonbags.png" alt="Petals &amp; Patches bag patterns"></a></li>
<li><a href="chalkboards.htm"><img src="buttons/crystal buttons/JoomlaButtonchalkboards.png" alt="Petals &amp; Patches chalkboard patterns"></a></li>
<li><a href="seasidemoments.htm"><img src="buttons/crystal buttons/JoomlaButtonseasidemoments.png" alt="Petals &amp; Patches Seaside Moments patterns"></a></li>
<li><a href="blockofthemonth.htm"><img src="buttons/crystal buttons/JoomlaButtonbom.png" alt="Petals &amp; Patches BoM patterns"></a></li>
<li><a href="accessories.htm"><img src="buttons/crystal buttons/JoomlaButtonaccessories.png" alt="Petals &amp; Patches accessories"></a></li>
<li><a href="ordering.htm"><img src="buttons/crystal buttons/JoomlaButtonordering.png" alt="Petals &amp; Patches bear ordering information"></a></li>
<li><a href="contactus.htm"><img src="buttons/crystal buttons/JoomlaButtoncontact.png" alt="Contact Petals &amp; Patches"></a></li>
<li><a href="stockists.htm"><img src="buttons/crystal buttons/JoomlaButtonstockists.png" alt="Petals &amp; Patches pattern stockists"></a></li>
<li><a href="mailto:info@petalsandpatches.com?subject=E-mail request for Petals and Patches"><img src="buttons/crystal buttons/JoomlaButtonemail.png" alt="E-mail Petals &amp; Patches"></a></li>
<li><a href="links.htm"><img src="buttons/crystal buttons/JoomlaButtonlinks.png" alt="Petals &amp; Patches pattern stockists"></a></li>
<li><a href="http://ww8.aitsafe.com/cf/review.cfm?userid=A736163"><img src="buttons/crystal buttons/JoomlaButtonreviewcart.png" alt="Petals &amp; Patches review cart"></a></li>
<li><a href="http://petalsandpatches.wordpress.com/"><img src="buttons/crystal buttons/JoomlaButtonblog.png" alt="Petals &amp; Patches blog"></a></li>
</ul>
</div>
<div id="cont">

When I am using a PHP include, I put comment marks in the HTML to make it abundantly clear to me what I am doing.
The comment marks surround exactly the HTML that will go in the “include” file.


<h1>Stitcheries</h1>
</div>
<div id="bodyblock" align="right">
<div id="l-col">
[color=green]<!-- BEGIN navmenu.php INCLUDE -->[/color]
<ul id="navbuttons">
<li><a href="index.htm"><img src="buttons/crystal buttons/JoomlaButtonhome.png" alt="Petals &amp; Patches home"></a></li>
<li><a href="clothdolls.htm"><img src="buttons/crystal buttons/JoomlaButtonclothdolls.png" alt="Petals &amp; Patches cloth dolls patterns"></a></li>
<li><a href="stitcheries.htm"><img src="buttons/crystal buttons/JoomlaButtonstitcheries.png" alt="Petals &amp; Patches stitcheries patterns"></a></li>
<li><a href="applique.htm"><img src="buttons/crystal buttons/JoomlaButtonapplique.png" alt="Petals &amp; Patches applique patterns"></a></li>
<li><a href="bears.htm"><img src="buttons/crystal buttons/JoomlaButtonbears.png" alt="Petals &amp; Patches bear patterns"></a></li>
<li><a href="quilts.htm"><img src="buttons/crystal buttons/JoomlaButtonquilts.png" alt="Petals &amp; Patches bear patterns"></a></li>
<li><a href="bags.htm"><img src="buttons/crystal buttons/JoomlaButtonbags.png" alt="Petals &amp; Patches bag patterns"></a></li>
<li><a href="chalkboards.htm"><img src="buttons/crystal buttons/JoomlaButtonchalkboards.png" alt="Petals &amp; Patches chalkboard patterns"></a></li>
<li><a href="seasidemoments.htm"><img src="buttons/crystal buttons/JoomlaButtonseasidemoments.png" alt="Petals &amp; Patches Seaside Moments patterns"></a></li>
<li><a href="blockofthemonth.htm"><img src="buttons/crystal buttons/JoomlaButtonbom.png" alt="Petals &amp; Patches BoM patterns"></a></li>
<li><a href="accessories.htm"><img src="buttons/crystal buttons/JoomlaButtonaccessories.png" alt="Petals &amp; Patches accessories"></a></li>
<li><a href="ordering.htm"><img src="buttons/crystal buttons/JoomlaButtonordering.png" alt="Petals &amp; Patches bear ordering information"></a></li>
<li><a href="contactus.htm"><img src="buttons/crystal buttons/JoomlaButtoncontact.png" alt="Contact Petals &amp; Patches"></a></li>
<li><a href="stockists.htm"><img src="buttons/crystal buttons/JoomlaButtonstockists.png" alt="Petals &amp; Patches pattern stockists"></a></li>
<li><a href="mailto:info@petalsandpatches.com?subject=E-mail request for Petals and Patches"><img src="buttons/crystal buttons/JoomlaButtonemail.png" alt="E-mail Petals &amp; Patches"></a></li>
<li><a href="links.htm"><img src="buttons/crystal buttons/JoomlaButtonlinks.png" alt="Petals &amp; Patches pattern stockists"></a></li>
<li><a href="http://ww8.aitsafe.com/cf/review.cfm?userid=A736163"><img src="buttons/crystal buttons/JoomlaButtonreviewcart.png" alt="Petals &amp; Patches review cart"></a></li>
<li><a href="http://petalsandpatches.wordpress.com/"><img src="buttons/crystal buttons/JoomlaButtonblog.png" alt="Petals &amp; Patches blog"></a></li>
</ul>
[color=green]<!-- END navmenu.php INCLUDE -->[/color]
</div>
<div id="cont">

Then copy/cut the code between the comment marks exactly and paste it into a new file named “navmenu.php” (your choice).

Finally, back on the HTML page, replace the menu code with the PHP include call as shown by @WebMachine.


<h1>Stitcheries</h1>
</div>
<div id="bodyblock" align="right">
<div id="l-col">
[color=green]<!-- BEGIN navmenu.php INCLUDE -->[/color]
[color=blue]<?php include 'navmenu.php'; ?>[/color]
[color=green]<!-- END navmenu.php INCLUDE -->[/color]
</div>
<div id="cont">

PHP is a server side code so the files have to reside on a server for the PHP to be executed.

Change the suffix of all of your page from .htm to .php. That should do it. :slight_smile:

Cheers

PS: I apologize for most of my previous post. You had given us all of the information that we needed to answer your question but I had overlooked the link to your web site. Sorry. :-/

Thanks for your help Ronpat. Looks great.

PS: I apologize for most of my previous post. You had given us all of the information that we needed to answer your question but I had overlooked the link to your web site. Sorry.

She’s right mate. We all get tangled up that like that on occasions.