bMenu: css menu using in MLE (LTR & RTL directions)

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
User avatar
shaleksey
Forum Members
Forum Members
Posts: 13
Joined: Tue Nov 25, 2008 8:39 am

bMenu: css menu using in MLE (LTR & RTL directions)

Post by shaleksey »

First my post about RTL css based menu was:
http://forum.cmsmadesimple.org/index.ph ... #msg137922

Due using bMenu module and CSS menu in my page I have got some problems in IE (ofcaurse).
Folows:
- some spase between submenu elements (only in IE);
- li a hover is not working properly (only in IE);

So, after google search I will set in different from menu css folows:

Code: Select all

#primary-nav li {  /* remove some space between li elements */
  vertical-align:bottom;
}

#primary-nav li a {  /* make hover effect work in IE */
  display:block;
  width: 105px;
}
So some problems solved.

I still cannot get css menu all submenu opening to left side in RTL (Arabic forexample) direction.
If somebody know solution let share this information.

Curently I set submenu width same like main elements and it expanding directly under hasparent element.
Menu centered on page and this is not well, I prefer align to right in RTL and align to left in LTR.
In idea set submenu width "auto", but in this case cannot find solution for make expanding to left side in right-to-left (RTL) pages direction.

For swaping direction I'm using folow in my template:

Code: Select all

<__html {dir language="$lang"} xmlns="...">
Where is a UDT:

Code: Select all

if(isset($params['language']))
{
if(($params['language']=='en_US')or($params['language']=='ru_RU')or($params['language']=='de_DE'))
{
echo 'dir="ltr"';
}
else 
{
echo 'dir="rtl"';
}
}
Main css also have different alements for each language (I'm using: en_US, ru_RU, ar_AR, de_DE). And I'm using in full all tricks discribed by Alby in MLE part of forum.
With LTR languages no problems, but in RTL (Arabic) I have it with css based menu.

I think I discribed well my idea and problem, if you have any idea let me know please solution for css menu (horizontal) located on the right side and with expanding submenu to the left side too.
mike-r

Re: bMenu: css menu using in MLE (LTR & RTL directions)

Post by mike-r »

I'm not very good in english, but if i understand you correctly, you have to use "unicode-bidi" in combination with direction.

Is it possible to see an example of your Problem to better understand?
User avatar
shaleksey
Forum Members
Forum Members
Posts: 13
Joined: Tue Nov 25, 2008 8:39 am

Re: bMenu: css menu using in MLE (LTR & RTL directions)

Post by shaleksey »

you will find example pictures from
http://forum.cmsmadesimple.org/index.ph ... #msg137922

I cannot get css based menu with expanding subelements to right side:
I mean folows In RTL languges :
- 1th level I named first list of labels in menu;
- I need see submenu aligned to right side, should move down aligned to right side of top menu element - second level submenu
- 3th level submenu should move to left side (not to right like for LTR languges)

As I said currently I set all levels with the same size, so it looks like submenu of second level is going down directly under first top level, but 3th level still moving to right in LTR and in RTL language
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: bMenu: css menu using in MLE (LTR & RTL directions)

Post by Dr.CSS »

If you are looking to get your sub menu a diff. size you need to target it, #primary-nav li li, look in the CSSMenu CSS for it...
User avatar
shaleksey
Forum Members
Forum Members
Posts: 13
Joined: Tue Nov 25, 2008 8:39 am

Re: bMenu: css menu using in MLE (LTR & RTL directions)

Post by shaleksey »

no :) ... any way thanks.

my problem in to get this view for css menu in bmenu module:
Image
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: bMenu: css menu using in MLE (LTR & RTL directions)

Post by Dr.CSS »

Well I don't know about bMenu, never used it never saw the need, but I've done that with the default CSSMenu...
User avatar
shaleksey
Forum Members
Forum Members
Posts: 13
Joined: Tue Nov 25, 2008 8:39 am

Re: bMenu: css menu using in MLE (LTR & RTL directions)

Post by shaleksey »

Alright, sounds good.

I'm using bMenu to get it easy, thats all.

Can you suggest something, share css for that type of menu (which working in IE, FF...). I tryed play around with normal and have got it, but cannot solve problem in IE with submenu jumping, see below problem in IE:
Image
So, submenu for first level is appeared not under active parent menu.
It looks like it moving down and to left, touched on the right top conner with parent only.



and img in previous post from FF.
bterkuile
Forum Members
Forum Members
Posts: 97
Joined: Sun Jul 22, 2007 11:48 am

Re: bMenu: css menu using in MLE (LTR & RTL directions)

Post by bterkuile »

Hello shaleksey,

I tried to understand your problem. In my own menu, I changed in bMenu:
Settings -> Submenu horizontal => left
Main menu -> Default -> text alingment => right

This created a menu that did what it expected only the submenu was aligned with the left boundary of the parent, where you should expect that it would align with the right boundary of the parent. I fixed this. I will try to explain the steps to fix this.

Step one is to update bMenu to version 0.4.7
In this version the menu css templates can be managed from bMenu itself (with some copy pasting of MenuManager code)

In Templates->Horizontal change:

Code: Select all

	left:{CssCalc base=0 substract=$mainlevel.border_size_left};
to:

Code: Select all

 	{if $submenu_horizontal=="left"}
	right:{CssCalc base=0 substract=$mainlevel.border_size_right};
	{else}
	left:{CssCalc base=0 substract=$mainlevel.border_size_left};
	{/if}
That should fix it.

Note that this is a general fix, but is only tested in Firefox 3.0.7

Good luck!

Benjamin
Post Reply

Return to “Layout and Design (CSS & HTML)”