Expanding Navigation...

[DocBoy52]

<span style="font-family:Verdana"></span id="Verdana"><font size="1"></font id="size1">

Alright, I seem to be having an issue with some navigation here. I dont know javascript, and so making this type of navigation using that (as most people probably would) is out of the question. Basically I am attempting to make the type of navigation where you have a list of 5 or 6 buttons stacked on top of one another.. when you roll your mouse over one of them, the menu expands into 3 or 4 different buttons off to the right of the original menu, etc. (Just like the windows start menu, basically).

Creating them isn't the problem at all.. it's implementing them into my interface.

In my experience, in order to implement a flash movie into an HTML document, you basically have to have a rectangle large enough to accompany all content that you want to be seen...

Let's say I have a 2 column table. Left cell is where the navigation goes, right cell is where the content goes. Now, let's say I only want the left cell to be 250 pixels wide maximum, but when the navigation menu is expanded, it is 500 pixels (for only one sub-level). Is there any way I can get the sub-menus to over-lap the content without having a 500 pixel wide SWF file (and a 500 pixel left table cell as well)? I was thinking of experimenting with transparent windows and such (as you see more and more with the flash pop-ups that come up on a page), but I am not sure that this would solve my problems.

Is there any way to do this, or am I going to be forced to learn some javascript, and write out a code using that?

John H.

[courtjester]

This can be done via CSS... You can use the Z-index property and do this. As far as I know it is functional in all browser types (plz correct me if I'm wrong...) Only problem with this method is that you'll have to make a transparent .swf so that when it's not expanded you can see the text underneath it. (Opera doesn't support Transparent swf's). You can set the background to be Transparent in the publish file. It's actually a line of code written to the .html file so you have to copy and paste :wink:. HTH

[Webforumz Staff]

Yes, like Court Jester suggested, you would need to use transparent SWFs, which simply aren't supported in much other than IE and can be problematic if your layout is based on percentages.

Javascript would definetly be easier, more effective and would work in all browsers. However you should be able to find a script to do this for you... Can anyone suggest some good Javascript resource sites, or maybe you guys already know a good script to do this?

[DocBoy52]

Court Jester, you mention using CSS and the z-index property, but in Flash I cant seem to find anything on the z-index. What is this, and how does one implement CSS in flash?

Also, I still dont understand how this will prevent you from having a 500 pixel table cell, if that is how big the SWF file needs to be in order to accompany all graphical elements... could you please explain a little further?

[Rob]

If this *could* be done in flash, it would need to be done in conjuction with CSS absolute positioning, Javascript and MULTIPLE flash files (one for menu, and each sub-menu). I'm not sure css and javascript will allow you to absolutly position flash objects.

If the above were possible (it may just be, you'll need to look into it) then this way would negate the need for a table cell completly.

Maybe sirkent could offer some feedback on this, but in my opinion, you would be best to save yourself a lot of time and trouble and go for something that is a cross css / javascript effort.... and even, I would warn you about not using javascript at all.

I would always be very careful when using javascript for navigation as sometimes search engine spiders will not see (and follow) the links.

I am inclined to say the same for Flash, although I have learned today that google will follow
links and index content inside flash files (swf). This however is ONLY google, and I doubt the rest will follow suit for a while to come.

The only other advice I give most people, is ONLY use flash and javascript (and java) if it is absolutly 100% nessesary. You do NOT know what features are turned on, and off in your visitors browser... nor do you know if your visitors browser even supports what you use to implement this.

Sure you can write some 1000 line long piece of code to check for the presence of every feature you need, and sniff which browser it is, but all in all even that would be unrelyable.

I hope you take this advice onboard when making a decision about your navigation, and hope you have found my comments helpful.

[DocBoy52]

Thanks for the tips Rob. Definitely some good pointers on the functionality and usability end of web-design. At this point in time I dont have a layout that I am even trying to implement this into... but whenever I come across things that I am not sure about, I like to figure it out for future reference. It's never a good thing to have a client approach you asking if you can do something, and then having to scramble to attempt to figure it out and get it working before the due date. Of course, it still happens. Never-the-less, judging by the general responses so far, I am getting the vibe that javascript is the ideal way to do this. So with that in mind... any suggestions to start off with? I'm guessing that since I've never really worked with javascript that much, that this might be quite a big task to start out with. I just really hate swiping scripts. What kind of elements would a script such as this require? Layers? Formatting tables? I really dont know. Any suggestions would definitely help.

[Rob]

You dont have to 'swipe' the scripts as such.... just download a few... play with them, and generally get a feel for what they do. Learn from them, then if you feel inclined, build your own!

[courtjester]

The flash file would only be 1 file... Just build the file like you normally would but when you go to publish click on the make transparent under the HTML tab. The z-index is a CSS feature that will actually move the flash file in-front of the html document itself, so when expanded it'll cover up the text, but when it's not it'll just show the text like normal.

Code: Select all

<style type="text/css">
p.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>


Default z-index is 0. Z-index 1 has higher priority.</p>
<body>
<p class=x><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 WIDTH="760" HEIGHT="400" id="Banner" ALIGN="">
 <PARAM NAME=movie VALUE="Banner.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=transparent> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="Banner.swf" quality=high wmode=transparent bgcolor=#FFFFFF  WIDTH="760" HEIGHT="400" NAME="Banner" ALIGN=""
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT></p>

ok create a flash file called Banner (plz rename before you put on the web cause some pop-up blockers will block this because of it's title... IE 6 SP 2 being one of them...) You can mess around with the positioning in the Style portion or leave it as it is to keep it on the left. Design the basics of the rest of your site and throw this on there. And there ya have it.

[Rob]

Court Jester... this is IE only.

I'm sure he wants it to work in other browsers seeing how internet explorer will soon be losing the browser war.

[courtjester]

its IE, Netscape, and all kinds of other browsers... only one I know that doesn't support it is Opera.. and how many people use that anyhow? If MSN.com can use it I think it should be fine for a regular Joe.

[DocBoy52]

Alright, I am still not entirely sure that this bit of information is going to achieve what I am looking for, if I am using tables. Check out these examples that I have made:

http://www.cage-in.com/samples/navtest2.html
http://www.cage-in.com/samples/navtest3.html

The only difference between them is that in the first one, the z-index is set to 1, and in the 2nd one, the z-index is set to 0.

Notice however, that regardless of what it is, the green table cell still needs to be at least 240 pixels wide in order to hold the SWF file. Even though when the menu is collapsed, it is only about 125 pixels wide, the SWF file needs to be 240 pixels in order to have room for the sub-menu to show up, when it is expanded.

So, how can I get around this, so that the expanded menu's overlap the table cell?

[Webforumz Staff]

Court Jester, I also mentioned that there are problems with transparent flash and the css positioning it uses. It can be difficult to overlay the flash on top of percentage-based layouts (which could even include just percentage text).

[courtjester]

Ok, change the code to this...

Code: Select all

<style type="text/css">
p.x
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
</style>
</head>
<p class="x">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="240" height="130">
        <param name="movie" value="navtest.swf" />
        <param name="quality" value="high" />
		<PARAM NAME="wmode" VALUE="transparent"> 
		<PARAM NAME="bgcolor" VALUE="#FFFFFF">
		<EMBED src="navtest.swf" quality=high wmode=transparent bgcolor=#FFFFFF  WIDTH="240" HEIGHT="130" NAME="navtest" ALIGN=""
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></embed></object>
</p>
<body leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="23%" valign="top" bgcolor="#99CC00"></td>
    <td width="150" bgcolor="#666699"></td>
  </tr>
</table>
</body>
</html>

That works with my .swf.. should work for you as well.

[DocBoy52]

Thanks Court Jester! That code worked like a charm!! Thanks also to everybody else who posted.