Joomla Templates Club 406,261 posts

[lefevre Friend lefevreJoin date: March 2011Posts: 26Downloads:0Uploads:1 Thanks: 8 Thanked: 3 times in 1 posts]

#182631

Hello.

Is there anyway to make the submenu on the dropline menu another dropline menu or have the submenus appear horizontally instead of vertically in vertical menu?

My client wants all his menus to appear horizontally. Is this possible?

If not, how can I change the appearance of the vertical sub-menu? I would like to increase width of one of them to accomodate a very long menu title so that it appears on one line and I would like to decrease the padding on each of the child menus.

Please help!

Thanks!
An 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#474414

Greetings An:

If I am understanding your inquiry correctly . . . .

You/Your Client are wanting to utilize a dropline structure for your client’s site’s main navigation – but instead of the child menu items (i.e. subsequent to the first drop LINE items) displaying in a vertical dropdown menu structure (like a CSS or suckerfish style), you want those subsequent child items to likewise display in a horizontal drop LINE structure . . .

is this correct?

Though I have not attempted to achieve such a result myself – and not knowing (off the top of my head) what the dropline menu coding/styling looks like for JA Orisite – I am thinking that this effect can be achieved via modification of the relevant CSS within the dropline menu CSS file – specifically with regard to the styling for the display/function of the child menu items.

make sense ??

[lefevre Friend lefevreJoin date: March 2011Posts: 26Downloads:0Uploads:1 Thanks: 8 Thanked: 3 times in 1 posts]

#474418

Hi Tom.

I’m not that competent of a CSS coder to make those types of changes…with that said, maybe it’s just easier to modify the dropdownl submenus? Do you know where I can modify the width & padding of the dropline menu for Orisite template?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#474420

<em>@lefevre 348177 wrote:</em><blockquote>Hi Tom.

I’m not that competent of a CSS coder to make those types of changes…with that said, maybe it’s just easier to modify the dropdownl submenus? Do you know where I can modify the width & padding of the dropline menu for Orisite template?</blockquote>

If you can provide me with the url of the site you’re working on – as well as set “Optimize CSS” to “No” within your Template Manager–General settings – I can take a look and point you in the right direction.

[lefevre Friend lefevreJoin date: March 2011Posts: 26Downloads:0Uploads:1 Thanks: 8 Thanked: 3 times in 1 posts]

#474439

Hi Tom.

My site is AgullaUsa.com. All those settings are already in place.

Thanks!
An 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#474442

<em>@lefevre 348177 wrote:</em><blockquote>Hi Tom.

I’m not that competent of a CSS coder to make those types of changes…with that said, maybe it’s just easier to modify the dropdownl submenus? Do you know where I can modify the width & padding of the dropline menu for Orisite template?</blockquote>

Okay, which elements specifically are you wanting to modify (width & padding) within the menu?

[lefevre Friend lefevreJoin date: March 2011Posts: 26Downloads:0Uploads:1 Thanks: 8 Thanked: 3 times in 1 posts]

#474566

Hi Tom.

I would like the vertical drop-down menu from the sub-menu within “Products” mainnav to be wider for the last submenu > Tarpaulin & Other Industrial Fabrics > 4-PLY FIBER GLASS BLOCKOUT FABRIC (so that title is only on one line, not two).

I can’t seem to find the code where it specifies this width. I found the padding within the dropline.css of Orisite template but can’t locate the width of the vertical drop-down menu.

Thanks for your help!
An 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#474572

Okay, gotcha . . . Here’s what you do . . . .

Within file path –> /templates/ja_orisite/css/menu/dropline.css

at line 185, you will see the following:

#ja-subnav ul li ul {
background: none repeat scroll 0 0 #252627
border-top: 1px solid #353637
color: #A5A6A7
}

add a “width” property and value to the rule, for example:

#ja-subnav ul li ul {
background: none repeat scroll 0 0 #252627
border-top: 1px solid #353637
color: #A5A6A7
width: 250px;
}

You can, of course, play around with the width value until you arrive at the result you’re most happy with.

Hope that helps.

😎

1 user says Thank You to TomC for this useful post

1. lefevre

[lefevre Friend lefevreJoin date: March 2011Posts: 26Downloads:0Uploads:1 Thanks: 8 Thanked: 3 times in 1 posts]

#474634

Hi Tom.

This worked out great!

Thanks so much for your quick help!

An 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#474640

Glad I could be of assistance !!!

ALL THE BEST with your continuing site development.

🙂

[lefevre Friend lefevreJoin date: March 2011Posts: 26Downloads:0Uploads:1 Thanks: 8 Thanked: 3 times in 1 posts]

#474860

Hi Tom.

My client still doesn’t like the dropdown vertical menu so I just restructured to give it just 2-level menu. Now that it is two-levels, is there anyway to have the horizontal sub-menu that appears to align with where the actual main menu triggered the submenu?

If you go to my site now (AgullaUSA.com), when the last menu item is triggered from the far right of the page, the sub-menu appears to the far opposite left side of the page. I know it’s possible to have it align or somehow appear to be right below where the main menu triggers it but I don’t know what to even code that with.

Can you please help again?

Thanks so much!
An 🙂

[lefevre Friend lefevreJoin date: March 2011Posts: 26Downloads:0Uploads:1 Thanks: 8 Thanked: 3 times in 1 posts]

#475065

Hi Tom.

Don’t worry, I found the code to fix this…it was already on one of your boards (http://www.joomlart.com/forums/archive/index.php/t-27515.html)…But since referenced file was older, I had to look around my current files to find it. I found it in => root folder>plugins>system>jat3>jat3>base-themes>default>js>menu>dropline.js

I replaced “function jasdl_show()” – lines 273 to 284 – with new function:

function jasdl_show () {
subx = document.getElementById("jasdl-subnav"+jasdl_current.toString())
if (subx)
{
// modif jb du 10/01/2009
marginleft = $("jasdl-mainnav" + jasdl_current.toString()).getPosition().x - $("jasdl-mainnav").getPosition().x
$("jasdl-subnav").setStyle( "margin-left", marginleft)
// end modif jb
subx.style.display = "block"
}
jasdl_setHover ()
}

Thanks again for your previous help!

1 user says Thank You to lefevre for this useful post

1. JA Developer

[Author]

Posts