Public Forums 71,145 posts

[richardrock Friend richardrockJoin date: September 2010Posts: 11Downloads:0Uploads:0 Thanks: 8]

#154130

Hi all,

This is my first post so please go easy on me.

I am modifying a blank T3 template and need to know how to offset the drop down submenu so that it starts at the beginning of the main body and stretches across the whole width. I know that probably made no sense so here is an example.

If you go to http://www.mlb.com and roll over their main menu items, you will see that the sub menu stretches across the whole page.

Obviously I have tries setting the submenu width to 980 (my page width) but it still comes down in line with the parent.

If anyone can think of a way to make this work it would be absolutely awesome!

Thanks very much!

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#354867

<em>@richardrock 193126 wrote:</em><blockquote>Hi all,

This is my first post so please go easy on me.

I am modifying a blank T3 template and need to know how to offset the drop down submenu so that it starts at the beginning of the main body and stretches across the whole width. I know that probably made no sense so here is an example.

If you go to http://www.mlb.com and roll over their main menu items, you will see that the sub menu stretches across the whole page.

Obviously I have tries setting the submenu width to 980 (my page width) but it still comes down in line with the parent.

If anyone can think of a way to make this work it would be absolutely awesome!

Thanks very much!</blockquote>

Hi there,
I think you should consult this post http://www.joomlart.com/forums/topic/new-t3-framework-mega-menu/#post-353917 it will make sense for you 🙂

1 user says Thank You to Don Lee for this useful post

1. richardrock

[richardrock Friend richardrockJoin date: September 2010Posts: 11Downloads:0Uploads:0 Thanks: 8]

#354901

Many thanks for your really fast response. I can see how this fix will work but it does not seem to be doing anything for me.

My menu consists of Parent > Column 1 (4 grouped items), Column 2 (4 group items)

Which menu item do I add the CSS class to? The parent, the first column header?

Thanks very much

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#354906

<em>@richardrock 193187 wrote:</em><blockquote>Many thanks for your really fast response. I can see how this fix will work but it does not seem to be doing anything for me.

My menu consists of Parent > Column 1 (4 grouped items), Column 2 (4 group items)

Which menu item do I add the CSS class to? The parent, the first column header?

Thanks very much</blockquote>

The Additional class will make the effect for its menu item, not child or parent. But if you have 2 colums and you want to stretch them, you should define the Submenu column width = 1/2 of main site width.

1 user says Thank You to Don Lee for this useful post

1. richardrock

[richardrock Friend richardrockJoin date: September 2010Posts: 11Downloads:0Uploads:0 Thanks: 8]

#354918

Thank again for your quick reply. Again however, I cannot seem to make it work.

I have added the additional class (in this case ‘menu_teams’) to my 1st child item which is a separator. I have then added the code:

.menu_teams {
margin-left: -100px;
}

into the template.css.

What am I doing wrong?

thanks

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#354983

<em>@richardrock 193212 wrote:</em><blockquote>Thank again for your quick reply. Again however, I cannot seem to make it work.

I have added the additional class (in this case ‘menu_teams’) to my 1st child item which is a separator. I have then added the code:

.menu_teams {
margin-left: -100px;
}

into the template.css.

What am I doing wrong?

thanks</blockquote>

Again, I assume if you have 2 columns in the submenu and have site width = 900px, in order to make the sub fit to site width, just go to manage the menu and set Submenu column width = 450.

1 user says Thank You to Don Lee for this useful post

1. richardrock

[richardrock Friend richardrockJoin date: September 2010Posts: 11Downloads:0Uploads:0 Thanks: 8]

#355110

I have done this to make sure that the two columns are half the width (490 each on a 980 wide page) but this has made no difference.

Any extra help would be great

Thanks

P.S. Just to be clear, this is what it currently looks like:

…and this is how I want it to look (bad bit of PSing)

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#355111

Hi,
You can see that was this user’s problem http://www.joomlart.com/forums/topic/new-t3-framework-mega-menu/#post-353917
Plz combine the solutions to get its best!

1 user says Thank You to Don Lee for this useful post

1. richardrock

[richardrock Friend richardrockJoin date: September 2010Posts: 11Downloads:0Uploads:0 Thanks: 8]

#355118

I have already tried this as I said above and it does not seem to work. I added the class “menu_teams” to the menu item in the additional class field.

I then added the css code to the template.css file but it seemed to make no difference.

What am I doing wrong?

[richardrock Friend richardrockJoin date: September 2010Posts: 11Downloads:0Uploads:0 Thanks: 8]

#355489

I have made some progress with this but not enough to achieve what I want yet.

As I have said before I have added the additional class “menu_teams” to the column heading (i.e. 1st child) menu item, then added the .menu_teams class to template.css

I checked what this did to the outputted code by running it through Firebug on Firefox. I can see that the additional class has been added into this line of code:


<div class="megacol column1 first" style="width: 490px;">
<ul class="megamenu level1">
<li class="mega first group menu_teams">
...
...


As I have said before this does not seem to work. However when I added menu_teams into the class of

<div class="childcontent cols2 ">
a few rows up so that it looked like

<div class="childcontent cols2 menu_teams">
it worked exactly as I wanted it to.

I guess the question is how can I automatically assign the additional class to this part of the menu code?

Any help would be amazing!

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#355552

The following guide is not recommended.
– Open file plugins/system/jat3/core/menu/mega.class.php
– Find & remove this code:


if ($mitem->megaparams->get('class')) $cls .= " ".$mitem->megaparams->get('class');

– Find this code:

$data = "<div class="childcontent cols$cols $right">n";

– Replace:


$sf=$this->items[$pid]->megaparams->get('class');

$data = "<div class="childcontent cols$cols $right $sf">n";


1 user says Thank You to Don Lee for this useful post

1. richardrock

[richardrock Friend richardrockJoin date: September 2010Posts: 11Downloads:0Uploads:0 Thanks: 8]

#355567

Thanks again DongIt for the quick reply!

However this piece of code appears three times in mega.class.php, which one should I replace?

I have tried replacing all of them but this does not seem to work 🙁

I know we will get there soon!

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#355569

<em>@richardrock 194061 wrote:</em><blockquote>Thanks again DongIt for the quick reply!

However this piece of code appears three times in mega.class.php, which one should I replace?

I have tried replacing all of them but this does not seem to work 🙁

I know we will get there soon!</blockquote>

Only need to replace for the first searched that’s in function beginMenuItems1($pid=0, $level=0, $return=false)

1 user says Thank You to Don Lee for this useful post

1. richardrock

[richardrock Friend richardrockJoin date: September 2010Posts: 11Downloads:0Uploads:0 Thanks: 8]

#355596

I have done this but still no luck 🙁

The additional class does not load into the div.

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#355629

<em>@richardrock 194097 wrote:</em><blockquote>I have done this but still no luck 🙁

The additional class does not load into the div.</blockquote>

There a simpler method you could style for the childcontent div. Eg, you add class “your-class” to a menu item, you could style for its sub menu (the div with childcontent class) by this syntax:


li.your-class > div.childcontent {
/*your style here*/
}


There’s a note that this css style does not effect in IE6. However, ie6 is to old to get full support.

1 user says Thank You to Don Lee for this useful post

1. richardrock

[Author]

Posts