[RESOLVED] Menus

[RobDog888]

What is the best approach when creating menus? Using Javascript if fine if the browser has it enables or supported. An html table with each row as a menu item is fine and stable but leaves much to be desired.

Someone have a good solution that is not resource intensice or limited to a particular browser?

I need it to be as compliant as possible with all browsers as possible.

Thanks

[Wokawidget]

Popup menus must be created using Javascript...almost 100% sure. But I suck at web UI

WOka

[RobDog888]

So for a nice looking static non javascript menu a table will be good? I think I can use CSS to customize it. That should be widely compatible?

[Wokawidget]

errrr.yea.

Everything in a web page is in tables...generally.

woof

[RobDog888]

Errr, more is CSS better compatibility then JavaScript?

[Wokawidget]

CSS has nothing to do with jScript.

CSS styles items on a page.
JScript adds UI functionality, like menus, roll over images and pop windows etc. completely different to CSS

Woka

[Wokawidget]

Show me an example of what u're looking for.

Woka

[RobDog888]

Just something that will look nice and maybe have rollovers? Heck I dont know. I'm not very creative. Surprize me.

[Wokawidget]

Something like attached here.

Roll overs require Javascript.
Make ya mind up what u want

Woka

[mendhak]

Something like attached here.

Roll overs require Javascript.
Make ya mind up what u want

Woka

Yeah, in the attachment.

[mendhak]

What is the best approach when creating menus? Using Javascript if fine if the browser has it enables or supported. An html table with each row as a menu item is fine and stable but leaves much to be desired.

Someone have a good solution that is not resource intensice or limited to a particular browser?

I need it to be as compliant as possible with all browsers as possible.

Thanks

No, you must use CSS, Tables, and Javascript to do it. Search for examples on it, and you can then modify it to suit your needs.

[Wokawidget]

what attachment???

Woka

[RobDog888]

I dont see any attachments.

Ok, no Js, only html and CSS. I dont know how to search. Someone Gimme Code!

Since this is in aspx shouldnt it not matter or is that limiting to certain browsers? I'm not sure but if the server is running the framework then shouldnt all be compatible?

[Wokawidget]

I am not sure what you're getting at here

.NET doesn't allow you to create stuff like this. you MUST use javascript.

The only "menus" you can create are like what's on the left here:

www.vbForums.com/usercp.php?

these would be done using something like:

<table>
	<tr class="MenuHeader">
		<td>
			Forums
		</td>
	</tr>
	<tr class="MenuItem">
		<td>
			<asp:HyperLink id="lnkVB6" NavigateUrl="Forum.aspx?ForumID=4" runat="server">Visual Basic 6</asp:HyperLink>
		</td>
	</tr>
	<tr class="MenuItem">
		<td>
			<asp:HyperLink id="lnkVBNET" NavigateUrl="Forum.aspx?ForumID=6" runat="server">VB.NET</asp:HyperLink>
		</td>
	</tr>
	<tr class="MenuItem">
		<td>
			<asp:HyperLink id="lnkASPNET" NavigateUrl="Forum.aspx?ForumID=42" runat="server">ASP.NET</asp:HyperLink>
		</td>
	</tr>
</table>

You would then add the following inside the HEAD tag:

<LINK href="Styles/Booking.css" type="text/css" rel="StyleSheet">

This CSS file will contain the values for MenuHeader and MenuItem.

This table can be build dynamically using VB.NET in the code behind.

Woka

[Wokawidget]

all the funky little UI things you see in web pages are all done by javascript. So if your user doesn't allow Jscript that this seriously limits you to what UI functionality you can add.
Woka

[RobDog888]

Ok, thanks, but do you know of any good css generators or tutorials?

[Wokawidget]

add a css file to ya project.
.NET has an in built editior thingy so you can create CSS entries like MenuHeader and Menu item, which will be in the format:

MENUHEADER
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt; 
  color: #00366;
  font-style: normal; 
  font-weight: normal;
  background-color: #ffffff;
}
MENUITEM
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 8pt; 
  color: #000033;
  font-style: normal; 
  font-weight: normal;
}

.NET has intellisence for CSS files too

Woof

[RobDog888]

Ya, I found the css sheet in the IDE but unless your very creative its not that easy to creat something that looks professional.

[Wokawidget]

That's where you look at source HTL from other web sites and see what they use for colors, fonts, cellpadding etc, and then create a CSS based on that.
Will make you one when I get home.

Woof

[RobDog888]

What would I do without you BadgerBoi?

How about some color scheme with Red, Grey, and White.

[Wokawidget]

Here you do:
Style sheet:

.MenuTable
{
	border-style:solid;
	border-width: thin;
	background-color: #4a3c8c;
}

.MenuHeader
{
	font-weight: bold;
	color: #f7f7f7;
	border-width: 0px;
}

.MenuItem
{
	color: black;
	background-color: #dedfde;
	border-width: 0px;
}

and HTML:

<table class="MenuTable">
	<tr class="MenuHeader">
		<td>
			Forums
		</td>
	</tr>
	<tr class="MenuItem">
		<td>
			<asp:HyperLink id="lnkVB6" NavigateUrl="Forum.aspx?ForumID=4" runat="server">Visual Basic 6</asp:HyperLink>
		</td>
	</tr>
	<tr class="MenuItem">
		<td>
			<asp:HyperLink id="lnkVBNET" NavigateUrl="Forum.aspx?ForumID=6" runat="server">VB.NET</asp:HyperLink>
		</td>
	</tr>
	<tr class="MenuItem">
		<td>
			<asp:HyperLink id="lnkASPNET" NavigateUrl="Forum.aspx?ForumID=42" runat="server">ASP.NET</asp:HyperLink>
		</td>
	</tr>
</table>

Hope that helps.

Woka

[RobDog888]

Thanks BadgerBoi. I'm going to check it out in a few. Got to do some stuff first. What about the anchor links mouseover and stuff?

[RobDog888]

Ok, I can build on that. How about creating a separate A link for the menu that is setarate from the rest of the page's A links?

[Wokawidget]

eh?

Woof

[RobDog888]

A = Anchor or link.

[{yak}]

I'm not sure, as I've never used the asp hyperlink, but do you mean, how to have the menu's anchor tags have specific colors, different from the rest of the page? If so, you can just specify the class along with the regular anchor stuff:

// using the example provided above
<html>
<head>
<style type="text/css">
.MenuTable
{
    border-style:solid;
    border-width: thin;
    background-color: #4a3c8c;
}

.MenuHeader
{
    font-weight: bold;
    color: #f7f7f7;
    border-width: 0px;
}

.MenuItem
{
    color: black;
    background-color: #dedfde;
    border-width: 0px;
}
.MenuItem a.noDecor
{
    text-decoration: none;
    color: black
}
.MenuItem a:link
{
    color: black;
}
.MenuItem a:visited
{
    color: #CFDCE6;
}
.MenuItem a:hover
{
    color: white;
}
.MenuItem a:active
{
    color: #CFDCE6;
}
</style>
</head>
<body>
<table class="MenuTable">
    <tr class="MenuHeader">
        <td>
            Forums
        </td>
    </tr>
    <tr class="MenuItem">
        <td>
            <a href="Forum.aspx?ForumID=4">Visual Basic 6</a>
        </td>
    </tr>
    <tr class="MenuItem">
        <td>
            <a href="Forum.aspx?ForumID=6">VB.NET</a>
        </td>
    </tr>
    <tr class="MenuItem">
        <td>
            <a href="Forum.aspx?ForumID=42">ASP.NET</a>
        </td>
    </tr>
</table>
</body>
</html> 

[RobDog888]

Yup, thats it. Thanks for the quick reply. I guess I owe you twice now.
I havent done a full website in a long time. Its starting to come back tome now.

Edit: I suppose I could also change the cells backcolor during a link hover and change it back after giving the cell a rollover effect.

[{yak}]

Yep, you got it.

I guess I owe you twice now.

I'll be taking you up on that sooner than later, JK