1

We are making this template in our language, Persian, that is right-to-left (RTL). Template address

Now, all parts are RTL, except that the submenu that opens to the right side,

as you see in this Picture:

Question: What changes should be made to this css file of the template, so that submenu width will be the same as its menu width? Or: How can the submenu be made to open on the left side?

Be aware that am not talking about the text in the submenu (text is rtl now as you see in picture)

1
  • Welcome dehqan. Please use the tools, provided by the edit interface to insert weblinks and images. It is much work to correct this later. Thanks. Feb 4, 2012 at 0:39

2 Answers 2

2

Just a thought off the top of my head ...

I suspect you would adjust this line:

width: 140px; /*width of sub menus*/

to reflect a narrower width for your needs.

If you need to do this dynamically, you may have to do some work with Javascript to check the text being applied, then adjust the class reference to a custom class reference ... OR ... apply the new width to the element directly ... once the drop down entries have been filled.

1
  • Thank you,yes have seen that line before , but there is a problem that each submenu widths are different but that parameter apply the specific width o all submenus ,don't know javascript well ,This is related .js file>pastebin.com/DxQWST61
    – dehqan
    Feb 4, 2012 at 6:28
1

Ah, ok, I see now. The problem here is that with the particular component you are using, you cannot adjust it with only CSS. The reason why is that the Javascript completely rewrites your CSS for that portion of the menu every time a user hovers their mouse over it. You're going to have to do some adjustment inside the Javascript to solve this.

There are several ways to go about this, I'm only going to get into one of them.

One way to solve this is adjust how the menu is rewriting it's CSS on the fly for the submenu. In this case, you can have the Javascript write a negative value in for the "left:" CSS element attribute to have the submenu position itself to open as you're wanting. Note: With this solution, this may not work in older Internet Explorer browsers - I'm not sure if that's a concern here. However, it will work just fine in the modern browsers (at least the ones I've been poking about with).

Open up your copy of the ddsmoothmenu.js file, that's the little bugger that is causing all the problems here.

The change needs to be done in the

$curobj.hover(function(e){..})

function. Stay with me, I'll explain...

That function is calculating the starting left position of your submenu once the user positions their mouse over the main menu choice. Namely, this line here is the culprit:

var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w

As you can see, it is returning a '0' for you, which means it will anchor the left side of the submenu, forcing it to spill out to the right like it does now.

However, fear not!

Since you need the submenu to anchor on the right side and spill out to the left instead, we simply need to change this from assuming '0' to a formula with a little intelligence behind it.

What we need, is for the Javascript to find the correct position to anchor the submenu on the right. We do this by helping the routing understand what the "right side" of the "header" element is.

To find this, we simply take the width of the header, remove from that the left offset of the a-href tag that actually contains the header text (this is in case of any margins that exist - which this has some set in the CSS) and then remove the actual width of the submenu UL tag itself. Now as a sidenote, I wish I didn't have to use something so imprecise as assuming the header is the first child, but... eh... sometimes you work with what you got.

So comment out the line I mentioned above, and put this line in instead:

var menuleft=((header._dimensions.w-header.childNodes[0].offsetLeft)-header._dimensions.subulw);

And from what I see, it should open out towards the left as you were needing it to do in the first place.

Hope this answer helps more than my previous one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.