how to set the text alignment of the submenu when mouseover

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:35

how to set the text alignment of the submenu when mouseover

Poster: jz18
Dated: Thursday May 3 2007 - 2:44:57 BST

How to set the text alignment when the mouseover the main menu, as i have got the CSS enabled web pages. In addition, i am building the web pages by using asp .net, would this a problem when using those .js files downloaded from Milonic. And also i recently purchased the licence from Milonic as well. Thanks!

In addition, how to set the main menu to the correct position in the web pages. As i always get problem on setting position of the main menu.

this is the code for main menu. rest of the code in the js file are remaining the same.


<script type="text/javascript">
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;

left=10;
top=10;
screenposition="left";
orientation="horizontal";
style=menuStyle;
position='relative';
aI("text=Home;url=Default.aspx;");
aI("showmenu=sometext;text=sometext;");
aI("showmenu=sometext;text=sometext;");
aI("showmenu=sometext;text=sometext;");
aI("showmenu=sometext;text=sometext;");
aI("showmenu=sometext;text=sometext;");
}
drawMenus();
</script>

Poster: Ruth
Dated: Thursday May 3 2007 - 3:41:31 BST

Hi,

1. Are you putting the menu in a table/div? If you are then remove the top=10;left=10; and screenposition="left"; the only thing you use is position="relative"; when placing the menu in a table. If you want to position it by keyword, then you can use screenposition="left"; or right, center, top, bottom etc. Or you can position it absolutely using the top=; and left= properties. It will then always be in the position you set for top and left.

2. are you styling the menu using css and then calling the classes in the menu style? If you are then text alignmenu will be the css code for text-align:left; for example. If you are using css to style the menu and you want it different in the mouse off and mouse on states, you must create a css class for each mouse state. If you are using the menuStyle area to set text alignment, then the property is align=

If you have problems, please provide a test page so we can see the issue and find a solution.

Ruth

Poster: jz18
Dated: Thursday May 3 2007 - 4:06:30 BST

Hi, it is exactly as you said. thanks for replying me. The submenu of the main menu is aligned to left. And i just use the menyStyle align=left. However, can i position the main menu to a corrent place. for example the center and right justified of the page, and also between the header and content of the <div> tags.

Some CSS setting is as follows:
/* Basic style */
table {
font-size: 1em;
}

h1, h2, h3, h4 {
margin: 0;
font-family: tahoma, arial, helvetica, sans-serif;
}

p {
line-height: 1.4em;
}

hr {
border: 0;
border-top: 1px solid #bababa;
height: 1px;
}

a {
text-decoration: none;
color: #d32525;
}

a:visited {
color: #980000;
}

a:hover {
text-decoration: underline;
color: #e05252;
}

a:active {
color: #980000;
}

body {

background-image: url(images/bg.jpg);
/* background-repeat: repeat-x; */

margin: 0;
padding: 0;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.72em;
color: #666666;
}

img {
border-width: 0;
}

/* 1 HEADER */

.header {
background-image: url(Images/gcsbanner.jpg);
background-repeat: no-repeat;
position: relative;
width: 746px;
height: 135px;
margin-left: auto;
margin-right: auto;
}

.nav{
background-image: url(images/nav_mod.gif);
background-repeat: no-repeat;
position: relative;
width: 746px;
height: 25px;
margin-left: auto;
margin-right: auto;
}

And initially i was trying to add the mainMenu within <div> of .nav class, but the looking of the main menu becomes ugly. so i just add the code between ... as:

<body>


<script type="text/javascript" src="./js/milonic_src.js"></script>
<script type="text/javascript">

</script>

<script type="text/javascript" src="./js/menu_data.js"></script>


<form id="form1" runat="server">
<div class="header"></div>

<table border="0">
<tr>
<td align="right">
<script type="text/javascript" src="./js/embedded_main_menu.js">
</script>
</td>
</tr>
</table>

<div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>

<div class="footerbg">
<div class="footer">
<asp:menu id="menub" runat="server"
datasourceid="SiteMapDataSource1"
cssclass="menub"
orientation="Horizontal"
maximumdynamicdisplaylevels="0"
skiplinktext=""
staticdisplaylevels="2" />
</div>
</div>

<asp:sitemapdatasource id="SiteMapDataSource1" runat="server" startingnodeoffset="0" />
</form>
</body>
</html>

Therefore, would be a way to set the menu to the position i wanted. Thanks Ruth!!!

Poster: Ruth
Dated: Thursday May 3 2007 - 6:09:54 BST

Hi,

I'm not really going to be able to do anything here since I don't have your menu_data code, I don't have your images nor all the page layout. Can you not put up a test page?

I think the reason the menu didn't look right is perhaps to do with position relative. And, with the page I could probably fix it. I'll try to make a page with what you posted, but I don't know how it will work.

Ruth

Poster: Ruth
Dated: Thursday May 3 2007 - 6:30:32 BST

Hi,

You can put it in the nav div if you want. Just put the table in the div. Like this

Code:

<div class="nav"> 
<table border="1" bordercolor="red" align="right" class="menutd"> 
<tr> 
<td> 
<script type="text/javascript" src="embedded_main_menu.js"> 
</script> 
</td> 
</tr> 
</table> 

<asp:menu id="menua" runat="server" 
cssclass="menua" 
orientation="Horizontal" 
maximumdynamicdisplaylevels="1" 
skiplinktext="" 
staticdisplaylevels="2" 
datasourceid="SiteMapDataSource1"> 

</asp:menu> 
</div> 

Note the table has a class in it, add this to your style

Code:

.menutd{font-size:1.5em}

And in your menu_data.js file change font-size to font-size="1.5em"; or whatever you want. The reason it looked bad is you have a table style set at 1em, then the menu data file is also set at 75%, so the menu was getting font size of 75% of 1em. Generic css codes for table, tr, td, usually margin and padding, can many times end up getting applied to the menu. When that happens, if the menu is in a table, just code a . class for the menu to fix those other css styles.

As you see, it is the table that is aligned to the right in the div. When you put the menu in a table, or div, you have to position it as relative, so many times things like screenposition= will not work.

If this isn't what you want, I will need a test page. Also, and I don't know how to use it, but there is an asp menu in the download, it's in the extras folder.

Ruth

Poster: jz18
Dated: Thursday May 3 2007 - 7:24:21 BST

Hello Ruth,

Thanks for letting me know about this. And i did that before. The menu was actually moving to the right. Thanks!

I still have another problem, I don't know how to change the width of each menu, for example the width between two separators. I just want to make the space between those two separator become smaller (just as wide as the menu text). Thanks

Poster: jz18
Dated: Thursday May 3 2007 - 7:28:10 BST

maybe i can descirbe the situation like this:

the menu i got is like --->
Home |sample code ->|works ->|Contacts ->|

However, what i want is to have something like this:
Home | sample code -> | works ->| Contacts ->|

so the width between those separators can be controlled.

How to do that? what's the property value would be set, thanks Ruth!

Poster: Ruth
Dated: Thursday May 3 2007 - 12:27:00 BST

Hi,

Are you talking about the size of the menu items? I really don't know what you mean. Separators are a property of the menu, padding is a property of the menu, itemwidth is a property of the menu, menu width is a property. These are all different things and can be controlled. It depends on what it is you want to do and I don't understand what it is you want.

For example, you can set the size of the table to x pixels, and then set the size of the menu to the same number using menuwidth="100%"; which will make it fill the table, and then if you want the items to spread out because they aren't taking up enough room then you can also set itemwidth="100%"; which will spread them out in the menu.

Or if you're just wanting more space in the items, you can set padding to 4 number parameters, padding="2px 5px 2px 5px";

Or if it is the separators you want to be away from the subimages, then you would set the separatorpadding property.

So, below my name are links to lists of various properties you can use, style, menu and item properties. If this doesn't help, then you will have to put up some kind of test page, because I can't just keep guessing at what it is you want.

Ruth

Poster: jz18
Dated: Friday May 4 2007 - 1:11:46 BST

Hello Ruth,

Thanks for the explanation, i have read the properties page. And i don't know how to set the value of some properties, for example some properties are using percentage value, some are using just integer, and some are using 'left' 'top' etc.

And also my problem is the menu width, not entire menu's width. just the width of single item within the menu, not menuitem's width. for example:

Home -> | Works -> | others -> | ......

'|' represent as separator, 'Home', 'works', 'others' are the actual the mainmenu's single cell, there will be menuitem underneath. U see the space from works -> to '|' are too many. What i want is to make the mainmenu looks like:

Home -> | Works -> | others -> | ......

which mean there is only one space between the words 'works' and arrow '->' and also one space from arrow '->' to spearator '|'

Do you get what i mean?

Really sorry for my poor english.

Poster: Ruth
Dated: Friday May 4 2007 - 5:31:50 BST

Hi,

Quote:

'Home', 'works', 'others' are the actual the mainmenu's single cell

No they are not a single cell. They are menu items, each one is a separate menu item, a separate cell, in the main menu, and coding separator will put one between each item. You could even code each item to have a different background color. The only way the 3 items could be one item is if you coded the aI string as

Code:

aI("text=<a href='home.htm'>Home</a>  <a href='works.htm'>Works</a>  <a href='others.htm'>Others</a>;type=html;");

So, if you want to spread the items out, then you can set up padding as I believe I noted, padding="2px 5px 2px 5px"; You can also use subimagepadding=3 which would put padding around the subimage 'arrow' or you could just use itemwidth= and set the width you want. You can use pixels or percentages.

It seems kind of logical, for the most part, that if you are aligning text it will take a noun, i.e left, right, center; and if you are assigning a width it would take a number. You can use either percentage or pixels for widths, as to sizes, depending on what it is, for example a font you could use pixels, percentage, ems, pts whatever applies to fonts usually. Though I recommend pixels. As pixels is the default coding for the menu, then putting itemwidth=100; makes the item 100 pixels wide, if you want percentages, then it would be itemwidth="100%"; That is usually used when a menuwidth="100%"; has been specified and spreads the items equally in the menu.

So, setting the menuStyle with

Code:

fontsize=10;
align="center";
padding="2px 5px 2px 5px";
subimage="arrow.gif";
subimagepadding=5;
separatorcolor="#000000";
separatorsize=1;
separatorpadding=2;

Would make the font 10px, align it to the center, put padding around each item's text of top and bottom 2px, left and right 5px, would add 5px padding - top, bottom, left and right - around any subimage that is in an item, would put a 1px separator that is black in color between each item, and would put padding before and after the separator of 2px.

Ruth

Industrial Strength JavaScript and DHTML Menus

how to set the text alignment of the submenu when mouseover