GetSimple Support Forum

Full Version: Help with Customizing Navigation Menus
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I would like to have two different navigation menus. One would include several additional links that I would have only on the home page. The other would be a simplified version that is included on the other pages as well. It would be great if the Menu Manager would support multiple menus. However I would also like to add external links to the menus as well. Can anyone help me add the ability to add another menu to the menu manager and also have the ability to have menu manager add its own external links?

The second part of this task includes some additional customization. The menus that I am creating need to include an image, title, subtitle, and color CSS attribute. I am hoping that I could add these fields to Menu Manager and/or the Page Options view. The question would be where is the best location to add these features and how should I go about doing this? My current solution is to not use GetSimple to make my menus and just hard code the menus into the template.php file, however I would love to have GetSimple do this for me as it does have the power.

<li>
<a href="/page/">
<span class="page-img" id="page"></span>
<span class="page-title">Title</span>
<span class="page-subtitle">Subtitle</span>
</a>
</li>
For external links, with I18N Navigation (requires I18N plugin) you can see how to accomplish that here (half way down page "Internal/External Links").

If your top-level pages are all part of the menus you want to create (besides the external links at this point) then you can probably get away with using I18N Navigation to generate the top-level nav HTML then use CSS to hide individual links from it. For example, I usually jam a page's slug into body and also it's parent as a class like so:

Code:
<body id="d-<?php get_page_slug(); ?>" class="p-<?php echo (get_parent(false) != '') ? get_parent(false) : 'orphan' ?>">

With that in place, it's just a matter of hiding and showing navigation links using CSS, first hiding the links in a general sense, then adding them back on the home page with the `body#d-index` selector.

That said, I think there's a general need here for either a minor change to I18N Navigation which accepts an array of slugs as the first parameter and instead builds a custom menu from that set, or a new plugin that does this, maybe with the same "component" parameter for output flexibility.
Thanks, but I also need to add those spans to the output of the navigation menu. Where is the code that echos or outputs the navigation menu?
michaellindahl Wrote:Thanks, but I also need to add those spans to the output of the navigation menu. Where is the code that echos or outputs the navigation menu?
See this page about navigation rendering on the website of the I18N plugin's author.
michaellindahl Wrote:I'm sorry what page? The url appears to be broken...
Sorry, fixed.
sal Wrote:See this page about navigation rendering on the website of the I18N plugin's author.

Okay, I understand all of that. I currently don't have I18N or I18N Navigation installed. I don't believe this is needed for my purposes. I want to find the file where I can edit how the navigation menu is outputted, I understand I could do this with I18N Navigation, however even that link doesn't tell me where to do this modification.

I have looked in admin/template/include-nav.php, admin/navigation.php, and admin/menu-manager.php and none of these files appear to be the location where the navigation menu is created. Where is this file?
michaellindahl Wrote:I currently don't have I18N or I18N Navigation installed. I don't believe this is needed for my purposes. I want to find the file where I can edit how the navigation menu is outputted, I understand I could do this with I18N Navigation, however even that link doesn't tell me where to do this modification.

I have looked in admin/template/include-nav.php, admin/navigation.php, and admin/menu-manager.php and none of these files appear to be the location where the navigation menu is created. Where is this file?
The link mentions a component is needed which can be found under the Themes tab of the backend. Just create a new one, call it what you like and use that name as the "component" value when using I18N to generate your menu.

The reason I recommend using the I18N plugin (which includes I18N Navigation) is because it safe-guards you against a GetSimple update overwriting your modifications of core files in the future.
Awesome. The I18N plugin is working well. One question I have now come across. I would like to store additional values like colors using the custom fields plugin and then access them in the navigation bar creation component. I then tried using
Code:
<?php echo return_custom_field('link-color'); ?>;"></span>
However it would always give me the current page that I am on's link color and not the link color of the page that the program is currently outputting. Is what I'm trying possible?
michaellindahl Wrote:Awesome. The I18N plugin is working well. One question I have now come across. I would like to store additional values like colors using the custom fields plugin and then access them in the navigation bar creation component. I then tried using
Code:
<?php echo return_custom_field('link-color'); ?>;"></span>

However it would always give me the current page that I am on's link color and not the link color of the page that the program is currently outputting. Is what I'm trying possible?

You need to name your custom field like a valid PHP variable (characters, _, NO -), e.g. linkcolor.
Then you can access it in your component for I18N navigation rendering e.g. like:
Code:
<span style="color:<?php echo $item->linkcolor ? htmlspecialchars($item->linkcolor) : 'black'; ?>;">...</span>
(uses black, if linkcolor is not set; htmlspecialchars for security reasons, if you use a text field as opposed to a dropdown)
mvlcek Wrote:
michaellindahl Wrote:Awesome. The I18N plugin is working well. One question I have now come across. I would like to store additional values like colors using the custom fields plugin and then access them in the navigation bar creation component. I then tried using
Code:
<?php echo return_custom_field('link-color'); ?>;"></span>

However it would always give me the current page that I am on's link color and not the link color of the page that the program is currently outputting. Is what I'm trying possible?

You need to name your custom field like a valid PHP variable (characters, _, NO -), e.g. linkcolor.
Then you can access it in your component for I18N navigation rendering e.g. like:
Code:
<span style="color:<?php echo $item->linkcolor ? htmlspecialchars($item->linkcolor) : 'black'; ?>;">...</span>
(uses black, if linkcolor is not set; htmlspecialchars for security reasons, if you use a text field as opposed to a dropdown)

Nice. Thanks a lot. I do have a couple of concerns. I'm not going to use any of the languages features of I18N so is there a way of hiding this ability? I don't want to see the language text in the Page Management window.

It also would be really great if View All Pages tab and the Edit Navigation Structure tab was the same. The Navigation window is so clean its awesome. It just needs a filter button, which then shows the filter, an edit and remove button, and the Save button show only show up when the navigation structure has been changed.

Another issue I have found is when I create pages to create links I now have a blank page at the /link/ location. Is there anyway to prevent this? It would be great if navigating to that page would throw a 404 error.

I think I found a bug in the custom fields area. The content overflows in the x direction. See attached image.

Finally I have an additional question. Because I am using images for each of my page links I think it would be best to put them in a sprite. Is there easy way for me to be able to upload the images in the Edit Page area and then have the program add that image to a sprite and remember the location in the sprite when it goes to print the navigation menu? This would be really awesome if it was possible, but I'm thinking this is out of my league.
I have added a checkbox custom field called showInNavigation. I am tying to use this with my navigation output but it is not working. This is what I am trying to use:
Code:
<?php if ($item->showInNavigation) echo "true" ?>
michaellindahl Wrote:Nice. Thanks a lot. I do have a couple of concerns. I'm not going to use any of the languages features of I18N so is there a way of hiding this ability? I don't want to see the language text in the Page Management window.

You might be able to hide these parts with CSS using the Custom Admin CSS plugin.

michaellindahl Wrote:It also would be really great if View All Pages tab and the Edit Navigation Structure tab was the same. The Navigation window is so clean its awesome. It just needs a filter button, which then shows the filter, an edit and remove button, and the Save button show only show up when the navigation structure has been changed.

This would be much too complex, if more than one language is used.

michaellindahl Wrote:Another issue I have found is when I create pages to create links I now have a blank page at the /link/ location. Is there anyway to prevent this? It would be great if navigating to that page would throw a 404 error.

Navigation to this page should redirect to the linked page, but there was an error that prevented it, if the I18N plugin was loaded before the I18N Custom Fields plugin. Download I18N version 3.0.4 and I18N Custom Fields version 1.8.2 - it should work now.

michaellindahl Wrote:Finally I have an additional question. Because I am using images for each of my page links I think it would be best to put them in a sprite. Is there easy way for me to be able to upload the images in the Edit Page area and then have the program add that image to a sprite and remember the location in the sprite when it goes to print the navigation menu? This would be really awesome if it was possible, but I'm thinking this is out of my league.

No, that's not possible now. Of course you could write a plugin... ;-)
mvlcek Wrote:
michaellindahl Wrote:Nice. Thanks a lot. I do have a couple of concerns. I'm not going to use any of the languages features of I18N so is there a way of hiding this ability? I don't want to see the language text in the Page Management window.

You might be able to hide these parts with CSS using the Custom Admin CSS plugin.

Nope. They don't have a id associated to them so it couldn't be easily done Sad

mvlcek Wrote:
michaellindahl Wrote:Finally I have an additional question. Because I am using images for each of my page links I think it would be best to put them in a sprite. Is there easy way for me to be able to upload the images in the Edit Page area and then have the program add that image to a sprite and remember the location in the sprite when it goes to print the navigation menu? This would be really awesome if it was possible, but I'm thinking this is out of my league.

No, that's not possible now. Of course you could write a plugin... ;-)

Yea. but after further analysis I've just decided to use DataURI's instead. Much better solution.

Do you know why the following is not working?

michaellindahl Wrote:I have added a checkbox custom field called showInNavigation. I am tying to use this with my navigation output but it is not working. This is what I am trying to use:
Code:
<?php if ($item->showInNavigation) echo "true" ?>
michaellindahl Wrote:Do you know why the following is not working?

michaellindahl Wrote:I have added a checkbox custom field called showInNavigation. I am tying to use this with my navigation output but it is not working. This is what I am trying to use:
Code:
<?php if ($item->showInNavigation) echo "true" ?>

Custom Fields converts the names to lower case, so use $item->showinnavigation.
mvlcek Wrote:Custom Fields converts the names to lower case, so use $item->showinnavigation.

Oh, wow. Now I just feel dumb. Thanks so much with all this assistance. Also that bug is really annoying:
michaellindahl Wrote:Another issue I have found is when I create pages to create links I now have a blank page at the /link/ location. Is there anyway to prevent this? It would be great if navigating to that page would throw a 404 error.

I think I found a bug in the custom fields area. The content overflows in the x direction. See attached image.

Updated for solution: I'm going to add the page's images via DataURIs because that keeps http requests down and allows the user to somewhat easily change them. (Uploading, managing and deleting old copies of the pngs on the server seems more of a hassle.) I'm going to use this http://software.hixie.ch/utilities/cgi/data/data to convert png to datauris.

I adding this below my </body>:

Code:
<style type="text/css">
<?php
$pages = return_i18n_pages();

foreach ($pages as $page) {
    $slugvar = $page['url'];
    echo '.'.$slugvar.' .page-img { background-image: url(';
    echoPageField($slugvar, homepageimageurl);
    echo '); } ';
}
?>
</style>

The good news is that this works fine. However the bad news it that because it is in the HTML page the images will not be cached Sad It is not possible to call return_i18n_pages() from an external .css/.php file or at least when I try it fails and I get an error. Is there a way to call return_i18n_pages() from an external .css/.php file?
Hi guys,

Sorry for resurrecting this 50 year old post again, but I need some guidance with regards to setting up GS's nav to work with Foundation CSS.

(Disclaimer:
PHP knowledge? I know PHP is enclosed in special tags. I know PHP was once used in a top secret Area 51 underground alien web network. At least, when I look at PHP, that's how it feels...)

Foundation places classes within their <a> elements, that form a crucial part of their button groups.

For instance, this is the code for a group of buttons:
<ul class="button-group">
<li><a href="#" class="small button">Button 1</a></li>
<li><a href="#" class="small button">Button 2</a></li>
<li><a href="#" class="small button">Button 3</a></li>
</ul>

See those little suckers? Hehe. I need to know how I can implement this with GS's nav.

I've installed I18N, and found some sample code lying around, not doing anything particular, on good ol' mvlcek's page. Here goes:
PHP Code:
<li class="<?php echo $item->classes; ?>">
<
a href="<?php echo htmlspecialchars($item->link); ?>">
<?
php echo htmlspecialchars($item->text); ?>
</a>
<?php if ($item->isOpen) { ?>
<ul><?php $item->outputChildren(); ?></ul>
<?php ?>
</li> 

I focussed real hard on the code (like looking at those supposedly 3D pictures), but nothing jumped out at me, or made sense in the least.

Could someone perhaps help?
So, no help on this one? Anyone?
(2013-07-19, 21:41:18)johnflower Wrote: [ -> ]Foundation places classes within their <a> elements, that form a crucial part of their button groups.

For instance, this is the code for a group of buttons:
<ul class="button-group">
<li><a href="#" class="small button">Button 1</a></li>
<li><a href="#" class="small button">Button 2</a></li>
<li><a href="#" class="small button">Button 3</a></li>
</ul>

See those little suckers? Hehe. I need to know how I can implement this with GS's nav.

Not sure what you want to do - if you just need to add some classes (?) then just do it:
PHP Code:
<li class="<?php echo $item->classes; ?>">
<
a href="<?php echo htmlspecialchars($item->link); ?>" class="small button">
<?
php echo htmlspecialchars($item->text); ?>
</a>
<?php if ($item->isOpen) { ?>
<ul><?php $item->outputChildren(); ?></ul>
<?php ?>
</li>