2 horizontal menus - HELP!


  Page 1 of 2 Next Last 
Author Message
Helpme

Posted: 2/24/2011
Quote message 

Hi everyone, I really need to add another horizontal menu. I have pretty much ZERO experience modifying templates... so if it could be explained step by step you will be my hero!!!!!

Thanks :-D
 
Helpme

Posted: 2/24/2011
Quote message 

:-/ anyone?
 
jkwebdesign

Posted: 2/24/2011
Quote message 

Little more info needed..
Where do you want to put that?
what layout you have?
Should it have same design than first one?

Every template is little different so it is impossible to give you exact instructions, easiest way is to buy modification from someone. It is really small thing and should not take a long time to do, so it wont cost a fortune..

Easiest way is to use some ready made module and place it to some position, example: Banner 1
 
Helpme

Posted: 2/25/2011
Quote message 

it can look the exact same as the previous menu. I want it in position Banner1 (my first menu is above the header)
I really want to learn how to do this myself...

I found a tutorial on how to do it for WP but it's not the same for Joomla

http://reflectingthedesigner.com/wordpress/2011/01/06/creating-a-secondary-horizontal-menu-space/

Can you help me modify this tutorial to work for joomla? Thanks!
 
jkwebdesign

Posted: 2/25/2011
Quote message 

Easiest way is to use some other menumodule and place it to Banner1.

With this you can easily use your artisteer menu design, just replasing images..: http://www.nonumber.nl/extensions/customenu?tab=Demo

Even better and you can use Artisteer images: http://www.joomlack.fr/en/Joomla-extensions/Menu/maxi-menu-ck-menu-dropdown-advanced.html

More menus: http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus
 
Helpme

Posted: 2/25/2011
Quote message 

Thank you so much jk... you're really helping so many of us.
I tried these extensions. It's ok but it doesn't feel like it "belongs" to the template. I really just want to modify the template to have a top menu (above the header) and a bottom menu (below the header) just like I would do if artisteer gave me the possibility to have both of them.
I know there is a way and I know it can't be THAT difficult. I really don't mind modifying the files and adding images to the template file. But I really want it to be part of the template and not an added extension...

Thanks so much and if there is any way you can show me how to do this I will be forever greatful. Basically I need someone to adapt this tutorial for WP to joomla and that will resolve this issue.
http://reflectingthedesigner.com/wordpress/2011/01/06/creating-a-secondary-horizontal-menu-space/
 
Helpme

Posted: 2/26/2011
Quote message 

Anyone please help me I really need to figure this out and I am running out of time! :(
 
jkwebdesign

Posted: 2/26/2011
Quote message 

Ok, heres the solution:

FIRST:::::

1. Open "Yourtemplate/html/mod_mainmenu/defaul.php".
2. Find line (around 120) where is first mention about "user3".
3. Copy everything from that to line (around 140) where is: unset($GLOBALS['tmp_menu_show_submenus']);
4. After that line write "else" (without quotes) and paste the code you just copied.
5. Chance "user3" to what ever you like (i used "secondhormenu" in the example, but if you wanna style example banner1, you can use it)

NOTE: if you use banner1 or some other existing position, you only have to do this FIRST step.

Here´s my example (it could be little different in your template):

if (isset($attribs['name']) && $attribs['name'] == 'user3') {
$GLOBALS['modMainMenuArtXMLCallbackOptions'] = array(
'show_submenus' => $GLOBALS['artx_settings']['menu']['show_submenus'] && 1 == $params->get('showAllChildren'),
'vmenu' => null,
'start' => $params->get('startLevel')
);
$xml = modMainMenuHelper::getXML($params->get('menutype'), $params, 'modMainMenuArtXMLCallback');
if ($xml) {
$xml->addAttribute('class', 'art-menu');
if ($tagId = $params->get('tag_id')) {
$xml->addAttribute('id', $tagId);
}
$result = JFilterOutput::ampReplace($xml->toString((bool)$params->get('show_whitespace')));
$result = str_replace(array('<ul/>', '<ul />', '<artx-extra-span>', '</artx-extra-span>'), '', $result);
echo artxMenuDecorator($result);
}
unset($GLOBALS['tmp_menu_show_submenus']);

} else if (isset($attribs['name']) && $attribs['name'] == 'secondhormenu') {
$GLOBALS['modMainMenuArtXMLCallbackOptions'] = array(
'show_submenus' => $GLOBALS['artx_settings']['menu']['show_submenus'] && 1 == $params->get('showAllChildren'),
'vmenu' => null,
'start' => $params->get('startLevel')
);
$xml = modMainMenuHelper::getXML($params->get('menutype'), $params, 'modMainMenuArtXMLCallback');
if ($xml) {
$xml->addAttribute('class', 'art-menu');
if ($tagId = $params->get('tag_id')) {
$xml->addAttribute('id', $tagId);
}
$result = JFilterOutput::ampReplace($xml->toString((bool)$params->get('show_whitespace')));
$result = str_replace(array('<ul/>', '<ul />', '<artx-extra-span>', '</artx-extra-span>'), '', $result);
echo artxMenuDecorator($result);
}
unset($GLOBALS['tmp_menu_show_submenus']);


SECOND:::::

!! Do not proceed if you have used existing position, YOU ARE DONE..:)

Open index.php from your template and add new posotion, where you want it to be. My example look like this:

<div class="art-sheet-body">
<jdoc:include type="modules" name="user3" />
<div class="art-header">
<div class="art-header-jpeg"></div>

</div>
<div><jdoc:include type="modules" name="secondhormenu" /></div>
<jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />
<?php echo artxPositions($document, array('top1', 'top2', 'top3'), 'art-block'); ?>


THIRD AND LAST STEP!!!!!


Add new position to "templateDetails.xml" file in your templates folder if you wanna add new position to Module managers drop down list.

Example:

<position>top1</position>
<position>top2</position>
<position>top3</position>
<position>user1</position>
<position>secondhormenu</position>


YOU ARE READY! Hope this helps..




 
Helpme

Posted: 2/27/2011
Quote message 

JK, THANK YOU! I will try it and let you know how it went.
 
jkwebdesign

Posted: 2/27/2011
Quote message 

Hey,

I just found that there are easier workaround for that. open that default.php file and search that "user3". After that u should insert:

|| $attribs['name'] == 'top1') {

So the line should look something like this:

if (isset($attribs['name']) && $attribs['name'] == 'user3' || $attribs['name'] == 'banner1') {

Thats all if you want to show menu in banner1 position. This instruction can replace FIRST step of that aerlier post. Altough, both ways are fine.

Hope it will work for u too.
 
Helpme

Posted: 2/27/2011
Quote message 

IT WORKS! :-D :-D :-D :-D :-D :-D

1. I had to add some <br> right after the new module position in index.php to move the other modules down.

2. I had to add a "}" without quote, right before the "else"

The only last thing I need to do is to center the menu. I can't figure out how to do that...
 
Helpme

Posted: 2/27/2011
Quote message 

OK now I want to be able to have two separate menu looks.

This is what I did and it didn't work... could you help me out figuring out what I did wrong:

I changed the look of the menu and saved the file under another name (template2).
In template2 I went in the images folder and changed the names of the following images to the names of the right:
nav.png to nav2.png
menuitem.png to menuitem2.png
subitem.png to subitem2.png
spacer.gif to spacer2.gif

Once that was done, I went in template.css and copied the text starting at /* begin menu */ all the way to /* end MenuSubItem */
I pasted the copied text right under /* end MenuSubItem */ and in that pasted text I renamed art-nav to art-nav2 and art-menu to art-2menu

I then went in default.php and the text I had previously copied and where I had renamed the module position(see above posts) I changed all the art-menu to art-2menu
so the line becomes $xml->addAttribute('class', 'art2-menu');

After all these modifications, I am sure there is something missing because I didn't know where to change art-nav to art-2nav.
Also I have a class called art-menu-exra1 and art-menu-extra2 which I did not rename and did know what to do with that.

All in all, my second menu did change but it just looks like the actual menu items are transparent. I know I am doing something wrong. Please help!

Thanks so much


 
Helpme

Posted: 2/27/2011
Quote message 

OOPS I forgot to say that after renaming the images I copied them to my actual template images folder.
All the other modifications were obviously done in the "good" template file
 
jkwebdesign

Posted: 2/27/2011
Quote message 

Not sure how to do that and now i don´t have time to figure it out... I will look into it later..

Do you use Firebug extension for firefox? Try it and tell me does it try to use those new css rules? art-2menu.. etc..
 
Helpme

Posted: 2/28/2011
Quote message 

I have firebug, I'm not quite sure how to use it though...
 
Helpme

Posted: 2/28/2011
Quote message 

It's really frustrating how difficult it is to modify the templates... It shouldn't be that hard and yet just to do a simple modification is taking me HOURS to figure out. :(
 
jrgweb.net

Posted: 2/28/2011
Quote message 

Do you have a URL.

I just added a second menu in less than 5 minutes. It can be customized through css.

Link is here: http://demo.jrgweb.net/j/?template=bookclub#

I only did this to show you that things were possible. This link will not stay activated long. Let me know when you view it at jrgweb@gmail.com
That said, I will look into doing this in artisteer when I have some time.
jrgweb
 
Helpme

Posted: 2/28/2011
Quote message 

Hi jrgweb. Just emailed you
thanks for helping me
 
jkwebdesign

Posted: 2/28/2011
Quote message 

css, html, php and other web languages arent always easy to understand.. artisteer let you do lot of stuff, but it is impossible to offer 100% wysiwyg gustomizable templates. That is also good thing.. My bread would be lot smaller if everyone could do my job.

did you get your menu styled? if you didnt tell me url..
 
Helpme

Posted: 3/1/2011
Quote message 

Hi jk

I still did not figure it out.
I know what you mean however, I feel I am so close to making it work I'm just missing a small part of the puzzle. I would rather email you my url than post it here as my website is still under construction and we can't edit posts here.
Could you give me your email address?
 
Helpme

Posted: 3/5/2011
Quote message 

bumping this... anyone? :-(
 
jennifer

Posted: 3/5/2011
Quote message 

you need to modify /html/mod_mainmenu/default.php to handle whether it is the first or second kind of menu you've created - it only knows to do one kind of horizontal menu


 
jrgweb.net

Posted: 3/5/2011
Quote message 

We got the 2 menu's. Looking for and easy way of pulling in another class without hacking the code.

artisteer defaults to art-menu class. fine for menu #1
art-2menu for second class is still being defaulted to art-menu. Tried module class suffix in artisteer 3 but didn't work.

jrgweb
 
jkwebdesign

Posted: 3/5/2011
Quote message 

Quote jennifer:

you need to modify /html/mod_mainmenu/default.php to handle whether it is the first or second kind of menu you've created - it only knows to do one kind of horizontal menu


Yes, this is the way with WordPress template, but i think it is not the same with Joomla. I Can´t find what is the problem why i can´t get it working with Joomla.

Altough if you are doing site for your self, just use some 3rd party menu module and you are done.
 
jennifer

Posted: 3/5/2011
Quote message 

It is this way in Joomla! ... mod_mainmenu/default.php creates the callback function and populates the menu's html with the list of menu items.

You can see where it builds the "art-nav" div in artxMenuDecorator(). What you would have to do is add another function ... call it artxMenuDecorator2() - copy artxMenuDecorator and rename the divs in that to your second menu divs (art-nav becomes art2-nav, etc) and then add another if statement to the main processing that checks for a horizontal menu in some location other than user3 and call artxMenuDecorator2 on that menu instead of artxMenuDecorator.








 
jennifer

Posted: 3/5/2011
Quote message 

There will also need to be some modification in the script.js file to handle a second horizontal menu, as well.
 
jkwebdesign

Posted: 3/5/2011
Quote message 

What version of Artisteer you use? I don´t have any thatkind of stuff in v3..

I just manage to have two different menu styles, but i have problem with art-nav.. (i did not have to edit script.js file at all)

I made new position to index.php file like i posted before and my problem is that i cant get it to have Nav styling in it..

HEre´s my example (added "menusec" before banner1):

<div class="art-sheet-body">
<?php if ($view->containsModules('user3', 'extra1', 'extra2')) : ?>
<div class="art-nav">
<div class="art-nav-l"></div>
<div class="art-nav-r"></div>
<?php if ($view->containsModules('extra1')) : ?>
<div class="art-menu-extra1"><?php echo $view->position('extra1'); ?></div>
<?php endif; ?>
<?php echo $view->position('user3'); ?>
<?php if ($view->containsModules('extra2')) : ?>
<div class="art-menu-extra2"><?php echo $view->position('extra2'); ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="art-header">
<div class="art-header-center">
<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>
</div>
<div class="art-logo">
<h1 id="name-text" class="art-logo-name"><a href="<?php echo $document->baseurl; ?>/">Headline</a></h1>
<h2 id="slogan-text" class="art-logo-text">Slogan text</h2>
</div>

</div>
<div class="art-menusec"><jdoc:include type="modules" name="menusec" /></div>
<?php echo $view->position('banner1', 'art-nostyle'); ?>

Here´s my default.php (i just use my first instructions in this topic and add class art-menu2):

} else if (isset($attribs['name']) && $attribs['name'] == 'menusec') {
$GLOBALS['modMainMenuArtXMLCallbackOptions'] = array(
'show_submenus' => $GLOBALS['artx_settings']['menu']['show_submenus'] && 1 == $params->get('showAllChildren'),
'vmenu' => null,
'start' => $params->get('startLevel')
);
$xml = modMainMenuHelper::getXML($params->get('menutype'), $params, 'modMainMenuArtXMLCallback');
if ($xml) {
$xml->addAttribute('class', 'art-menu2');
if ($tagId = $params->get('tag_id')) {
$xml->addAttribute('id', $tagId);
}
$result = JFilterOutput::ampReplace($xml->toString((bool)$params->get('show_whitespace')));
$result = str_replace(array('<ul/>', '<ul />', '<artx-extra-span>', '</artx-extra-span>'), '', $result);
$result = preg_replace('~<span([^>]*) />~', '<span$1></span>', $result);
echo $result;
}
unset($GLOBALS['tmp_menu_show_submenus']);

Then i copien everything menu related from css and renamed every menu and nav to menu2 and nav2..

Everything else is working, but menu does not have nav styling at all (items and subitems uses art-menu2 styling)

It is little weird, because intructions i posted here before had same styling than user3 position. Now i cant it have nav styling at all..

I know that problem is in index file, because i dont know how to make my new position using nav2 related styles..

I don´t even need this kind of stuff, but help if someone can..:)


 
jrgweb.net

Posted: 3/5/2011
Quote message 

I did mine a little different.
1st step was to modify the /templates/menu_test/html/mod_mainmenudefault.php
Changed this:

if (isset($attribs['name']) && $attribs['name'] == 'user3') {
$GLOBALS['modMainMenuArtXMLCallbackOptions'] = array(
'show_submenus' => $GLOBALS['artx_settings']['menu']['show_submenus'] && 1 == $params->get('showAllChildren'),
'vmenu' => null,
'start' => $params->get('startLevel')

to this:

if (isset($attribs['name']) && $attribs['name'] == 'user3' || $attribs['name'] == 'nav2') {
$GLOBALS['modMainMenuArtXMLCallbackOptions'] = array(
'show_submenus' => $GLOBALS['artx_settings']['menu'] ['show_submenus'] && 1 == $params->get('showAllChildren'),
'vmenu' => null,
'start' => $params->get('startLevel')
);

The menu's show just fine but the 2nd does not have it's own styling.
You can see the 2 menu's at this link.

http://demo.jrgweb.net/store

use firefox firebug and go to 2nd horz menu.. were it says <div class="art-menu"></div> put a 2 in front of menu like so:
<div class="art-2menu"></div>

the menu works so what I need to know is how to pass the class="art-2menu

Artisteer defaults to class="art-menu"

I played around with creating another function but had no luck.
Also did some module class suffix.
Any suggestions?

jrgweb
 
jennifer

Posted: 3/5/2011
Quote message 

you've got to determine where the template actually writes out "<div class="art-menu">" and teach it to write art-menu for the one menu and art-2menu for the other.

in the 3.0 template that is in mod_mainmenu/default.php
	function artxMenuDecorator($content)  	{  		$result = '';  		ob_start();  ?>  <div class="art-nav">  	<div class="l"></div>  	<div class="r"></div>  <?php  		$result .= ob_get_clean() . $content;  		ob_start();  ?>  </div>  <?php  		$result .= ob_get_clean();  		return $result;  	} 

 
jkwebdesign

Posted: 3/6/2011
Quote message 

i dont have that in my default.php..

only file where nav is mentioned is index.php and css file ofcourse.

maybe it is different with different layouts? i have tested this with artisteer 3.0 "default" template (the firs one it genarates, when opening it)..
 
  Page 1 of 2 Next Last