Menu Builder Tips and Tricks

User 10077 Photo


Senior Advisor
976 posts

ADD YOUR MENU TO YOUR PAGES QUICKLY AND EASILY and
RE-EXPORT AND USE WITHOUT HAVING TO UPDATE ALL YOUR PAGES

If you are using manual export, here is a solution that allows you to add your menu quickly and easily to your pages AND lets you edit your menu with MB, re-export, and have your pages updated automatically.

Requirements:
--- Your server must be running PHP.
--- Either your pages must be named with the PHP extension (.php instead of .html) or you need to have your server set so that it parses PHP inside HTML pages.


1. Export your menu so that the files are inside your web site. It will create a folder that ends with "_exported". For this example, I'm calling this one "mymenu.mb" so my folder would be "mymenu_exported" and it will have a file named "mymenu.html" inside it.

2. Create a new page, save it using the name "myfunctions.php". Make sure myfunctions.php has NOTHING in it. There should not be any code at all.

3. This step is the hardest so read carefully. You are going to create the code you need. When you are done, it will look like this. Copy everything in the box below to myfunctions.php then follow the instructions under "SET THE FILE PATH" to make changes.

<?php

/* ==========================================
SET THE FILE PATH
Instructions:
1. Replace the letters "mymenu_exported" with the name of your exported folder.
2. Look in your exported folder. There will be a folder there. Replace the letters "mymenu" with the name of this second folder.
3. You must have the trailing slash ( / ) on the end of each of the words you just changed.
========================================== */
function menu_filepath(){
$mm_paths = array();
$mm_paths['exportfolder'] = 'mymenu_exported/';
$mm_paths['filefolder'] = 'mymenu/';

return $mm_paths;
}

/* ==========================================
CREATE THE HEAD FILES
You don't have to do anything to this section unless CC decides to change their folder structure. Don't change anything.
========================================== */
function menu_head(){
$mm_paths = menu_filepath();
$mm_location = $mm_paths['exportfolder'].$mm_paths['filefolder'];

$mm_head = '
<link href="'.$mm_location.'stylesheets/menu_builder.css" media="screen" rel="stylesheet" type="text/css" />
<link href="'.$mm_location.'stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="'.$mm_location.'js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="'.$mm_location.'js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="'.$mm_location.'js/tinynav.js"></script>
<script type="text/javascript" src="'.$mm_location.'js/mb.js"></script>
<script type="text/javascript" src="'.$mm_location.'js/off-canvas.js"></script>
';

return $mm_head;
}

/* ==========================================
CREATE THE BODY FILE
You don't have to do anything to this section. Don't change anything.
========================================== */
function menu_body(){
$mm_paths = menu_filepath();
$mm_location = $mm_paths['exportfolder'];

$menulocation = $mm_location/'mymenu.html';
$mobilemenu = file_get_contents($menulocation);

return $mobilemenu;
}
?>


Second, add the code (in the box below) to your web pages EXACTLY where your menu needs to appear.

<?php echo menu_body(); ?>


6. Open up mymenu.html. You need to make two edits.
-- (1) Notice where it has the <body> tag. Delete the <body> tag and everything above it.
-- (2) Notice at the bottom where it has the </body> tag. Delete the </body> tag and everything below it.

7. Upload your web pages and the entire "mymenu_exported" folder and all the files in it.

Everything should work. Want to see a live example? Although the folder structure is a little different than what you see above, you can go to http://www.pizzacardfundraiser.com if you'd like to see this method being used on a live site.

From now on, updating your menu is easy.
-- (1) Open your menu in MB and make your changes.
-- (2) Export it to the same place.
-- (3) Repeat Step #6 above.
-- (4) Upload the entire "mymenu_exported" folder and all the files in it.
Your menu is updated.
Brian

Want personal and specialized help with RLM, RSD or with converting your VSD (or other) site to RLM/RSD? Email me at cchelp@uscni.org or call 865-687-7698.
User 187934 Photo


Senior Advisor
18,152 posts

Add a select class to the current page absolute link
Add this code to the head of your pages below the menu builder script to add a select class to the link matching the current page. This script relies on absolute links in your menu.
Adjust the <style> to your needs.
<script>
$(document).ready(function() {
var trueurl = window.location.href;
$('a').each(function(){
var linkurl = $(this).attr('href');
if (linkurl == trueurl){
$(this).find('.text_menu_link').addClass('select');
}
});
});
</script>
<style>
#menuBuilder #nav ul li a span.text_menu_link.select{
color:#FF0000;
background-color:#ECFF39;
}
</style>


Results here. http://ericrohloff.com/coffeecup/ccforu … /home.html
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 10077 Photo


Senior Advisor
976 posts

Awesome Eric!
Brian

Want personal and specialized help with RLM, RSD or with converting your VSD (or other) site to RLM/RSD? Email me at cchelp@uscni.org or call 865-687-7698.
User 187934 Photo


Senior Advisor
18,152 posts

Add a select class to the current page relative link
Add this code to the head of your pages below the menu builder script to add a select class to the link matching the current page. This script relies on relative links in your menu.
Adjust the <style> to your needs.
<script>
$(document).ready(function() {
var pathname = window.location.pathname;
var pathname = pathname.split('/');
var rela_page = pathname[pathname.length-1];
$('a').each(function(){
var rela_link = $(this).attr('href').replace('http://'+window.location.hostname,'');
if (rela_link == rela_page){
$(this).find('.text_menu_link').addClass('select');
}
});
});
</script>
<style>
#menuBuilder #nav ul li a span.text_menu_link.select{
color:#FF0000;
background-color:#47FF32
}
</style>


Results here. http://ericrohloff.com/coffeecup/ccforu … homeb.html
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2139911 Photo


Registered User
15 posts

Help Please. No matter what I do my menu displays as a list vertical to the page. Not as the horizontal menu that displays in Menu Builder. What am I doing wrong. I have the resource files correct (I think) and have pasted the head and html codes in the appropriate areas. I have watched several videos on this and still cannot make it happen. Here is the link to my sight in it's infancy and not yet fully developed, but I need to show the owner the menu a.s.a.p. http://ipcotest.coffeecup.com/index.html I managed to do this back in VSD but cannot get it to fly in RSD.
User 122279 Photo


Senior Advisor
11,627 posts
Online Now

You have some single quotes in the document head:

<link rel='stylesheet' type='text/css' href ='menu-ltgreen-teal/stylesheets/menu_builder.css'/>
<link rel='stylesheet' type='text/css' href ='menu-ltgreen-teal/stylesheets/style.css'/>

Try replacing them with double quotes.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 2139911 Photo


Registered User
15 posts

So what you are saying is the code provided by Menu Builder is incorrect? All I did was copy and paste it. I use CC Software because it is perfect for a non coding person like myself. I have been struggling with this for weeks. When I did change the single quotes to double quotes then nothing displayed at all. What as I missing here?
User 10077 Photo


Senior Advisor
976 posts

The reason your menu is not behaving correctly is because it cannot find the css and possibly javascript files. Here is what you have:
<!-- Start of the headers for !CoffeeCup Menu Builder -->
<meta charset="utf-8" />
<link rel='stylesheet' type='text/css' href ='menu-ltgreen-teal/stylesheets/menu_builder.css'/>
<link rel='stylesheet' type='text/css' href ='menu-ltgreen-teal/stylesheets/style.css'/>
<script type="text/javascript" src="menu-ltgreen-teal/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="menu-ltgreen-teal/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="menu-ltgreen-teal/js/tinynav.js"></script>
<script type="text/javascript" src="menu-ltgreen-teal/js/mb.js"></script>
<!-- End of the headers for !CoffeeCup Menu Builder -->

It is looking for the stylesheets and other files in a folder called menu-ltgreen-teal. Did you add the exported files from Menu Builder into the resources of the RSD project under that folder name?

Just for Good Measure
Remove: <meta charset="utf-8" /> (you have it in the <head> twice)
Change: single quotes to double quotes (this is not the problem, but it just keeps things consistent)
Brian

Want personal and specialized help with RLM, RSD or with converting your VSD (or other) site to RLM/RSD? Email me at cchelp@uscni.org or call 865-687-7698.
User 122279 Photo


Senior Advisor
11,627 posts
Online Now

It was just a guess, since we always use double quotes for those links. I have a menu here: http://jillneimark.com, which is made with the same version of Menu builder, and there are double quotes around the same elements. Otherwise I was not able to spot anything out of place, so provided the css and js files are in the right place, it should work, actually.

Oh, and you might want to check the spelling in the headline ('cruses').
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 2139911 Photo


Registered User
15 posts

First off let me say thank you for your input/ideas. I appreciate the information although it has not seemed to help. I have never had this much frustration with CC software. I have started this project from scratch several times, saved it in several different places, delete previous versions and so on and so on. It is an extensive menu and I really do not want to build it again, but if you think that might make a difference I will do it. I have attached a capture of the resource file for your review. I am sure it is correct, but maybe I am completely wrong on this.
Attachments:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.