Scratching my head on this one. I have a menu that should stretch across the page, so width:100%. That part works, the menu displays correctly.
What I would like to do is shift the root menu items to align from the right towards the left, leaving a space where they end.
Is this even possible?
Here is two images to help visualize what I need.
Thanks
Clyde
What I would like to do is shift the root menu items to align from the right towards the left, leaving a space where they end.
Is this even possible?
Here is two images to help visualize what I need.
Thanks
Clyde
5 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
answered on 04 Jun 2012, 05:17 AM
Hi Clyde,
Try setting width and dir properties of RadMenu as follows.
ASPX:
Please take a look into this demo for more information.
Hope this helps.
Thanks,
Princy.
Try setting width and dir properties of RadMenu as follows.
ASPX:
<
telerik:RadMenu
ID
=
"RadMenu1"
runat
=
"server"
dir
=
"rtl"
Width
=
"100%"
>
.........
</
telerik:RadMenu
>
Please take a look into this demo for more information.
Hope this helps.
Thanks,
Princy.
0
Clyde
Top achievements
Rank 1
answered on 04 Jun 2012, 12:45 PM
Hi Princy,
Unfortunately that does not give me the desired affect. I had given it a try, but need a left-to-right menu just aligned within the top row to the right. Not the actual element/nodes with their cell, but the entire top row.
This is more for aesthetic reasons than anything else. It just would be good to have the menu bar at 100% width, but as you can see in the image menu2.jpg, extend all the way to the left, under that other image that is "hanging" down.
Thanks
Clyde
Unfortunately that does not give me the desired affect. I had given it a try, but need a left-to-right menu just aligned within the top row to the right. Not the actual element/nodes with their cell, but the entire top row.
This is more for aesthetic reasons than anything else. It just would be good to have the menu bar at 100% width, but as you can see in the image menu2.jpg, extend all the way to the left, under that other image that is "hanging" down.
Thanks
Clyde
0
Accepted
Princy
Top achievements
Rank 2
answered on 05 Jun 2012, 09:21 AM
Hi Clyde,
Try setting CssClass property of first RadMenuItem as follows.
CSS:
ASPX:
Hope this helps.
Thanks,
Princy.
Try setting CssClass property of first RadMenuItem as follows.
CSS:
<style type=
"text/css"
>
.menuitem
{
margin-left
:
200px
; //required margin for RadMenuItem
1
}
</style>
ASPX:
<
telerik:RadMenu
ID
=
"RadMenux"
runat
=
"server"
Width
=
"100%"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"RadMenuItem1"
CssClass
=
"menuitem"
>
</
telerik:RadMenuItem
>
.....
</
Items
>
</
telerik:RadMenu
>
Hope this helps.
Thanks,
Princy.
0
Clyde
Top achievements
Rank 1
answered on 05 Jun 2012, 04:11 PM
Thanks Princy, you pointed me in the right direction. The key is to work with the margin-left of the first element. Given that this menu is dynamically generated and can be changed at any time, I am not able to hardcode in any fixed lengths.
So I took this a step further and put together some javascript that can detect the size of the existing menu and then alter it in onclientload.
The siteWidth var can be populated from the code behind if you have a variable size site.
Seems to work well. Documented here for the next person to ask this question.
Regards
Clyde
So I took this a step further and put together some javascript that can detect the size of the existing menu and then alter it in onclientload.
<script type=
"text/javascript"
>
var
siteWidth = 980;
function
OnMenuLoad(sender) {
var
items = sender.get_items();
var
menuDomElement = sender.get_element();
var
itemWidth = siteWidth - menuDomElement.offsetWidth;
var
item = items.getItem(0).get_element();
item.style.marginLeft = itemWidth+
'px'
;
}
</script>
<
telerik:RadMenu
ID
=
"RadMenu2"
runat
=
"server"
Style
=
"z-index: 1900;"
Skin
=
"Default"
SkinID
=
"HMenu"
OnItemDataBound
=
"RadMenu_ItemDataBound"
OnClientLoad
=
"OnMenuLoad"
>
</
telerik:RadMenu
>
The siteWidth var can be populated from the code behind if you have a variable size site.
Seems to work well. Documented here for the next person to ask this question.
Regards
Clyde
0
jlj30
Top achievements
Rank 2
answered on 13 Dec 2012, 04:40 PM
Clyde,
Thanks for posting your script.
It was just what I needed.
Jim
Thanks for posting your script.
It was just what I needed.
Jim