DHTML Menu

R

Regina

Thanks for the response, I have just completed the dhtml menu it took awhile
but I did it. Thanks again I love this discussion group!
 
S

Stefan B Rusynko

Add some more top level options so that there is something there to fire when you mouse out

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


|I am very sorry the correct page is
| http://dominicursetta.com/testing_testing.htm I hope this one shows up
| Thanks again in advance
| Regina
|
| "Regina" wrote:
|
| > try this: page http://dominicursetta.com/new_page_2.htm I am now trying to
| > reset all menu leafs and can't qiute get it can you still help?
| >
| > "Regina" wrote:
| >
| > > Thanks for the response, I have just completed the dhtml menu it took awhile
| > > but I did it. Thanks again I love this discussion group!
| > >
| > > "Ronx" wrote:
| > >
| > > > That page is empty - there is nothing to look at apart from the
| > > > background image.
| > > > --
| > > > Ron Symonds - Microsoft MVP (FrontPage)
| > > > Reply only to group - emails will be deleted unread.
| > > > FrontPage Support: http://www.frontpagemvps.com/
| > > >
| > > > | > > > > Hello,
| > > > > My site: http://www.dominicursetta.com I would like to do a dropdwn
| > > > > list for
| > > > > the "Photos" tab. I have read the information from:
| > > > > http://www.interlacken.com/winnt/tips/tipshow.aspx?tip=28 and I
| > > > > cannot make
| > > > > it work. please look at the Test page I have been working on and
| > > > > maybe you
| > > > > can help. Test: http://dominicursetta.com/testing.htm
| > > > > Thank you,
| > > > > Regina
| > > >
| > > >
| > > >
 
R

Ronx

1st. Give the menu a fixed width.
Change
<table border="1" width="100%" id="table1">
to
<table border="1" width="750px" id="table1">

Then give each menu button a size - a DHTML menu relies on absolute
positioning, and floating widths will not help.
With 7 cells, make each cell 14% width, except the last which should
be 16% (to total 100%)

The menu leaf should also have a fixed width, say 100px
Change
<table border="1" width="100%" id="table2">
to
<table border="1" width="100px" id="table2">

The link that opens the menu also needs to show the blank_gif
Change
<a href="webmaster.htm"
onmouseover="FP_changeProp(/*id*/'list',0,'style.visibility','visible','visibility','show')">
to
<a href="webmaster.htm"
onmouseover="FP_changeProp(/*id*/'list',0,'style.visibility','visible','visibility','show');
FP_changeProp(/*id*/'blank_gif',0,'style.visibility','visible','visibility','show')">

The blank_gif needs more work.
The image must be large enough to cover all the menu leafs when they
are shown, plus an allowance for users that use larger font sizes.
The image must be set to a width of 760px, and height 300px (guessing
the extent of the menu leafs at maximum font size.) It must also
close the menu leafs when hovered over, not when clicked.

Change
<div style="position: absolute; top: 42px; left: 142px; z-index: 1;
visibility: visible" id="blank_gif">
<a href="javascript:;">
<img border="0" src="images/blank_website.gif" width="140"
height="272"
onclick="FP_changeProp(/*id*/'blank_gif',0,'style.visibility','hidden','visibility','hide')"></a></div>
to
<div style="position: absolute; top: 10px; left: 0px; z-index: 1;
visibility: visible" id="blank_gif">
<a href="javascript:;"
onmouseover="FP_changeProp(/*id*/'list',0,'style.visibility','hidden','visibility','hide');FP_changeProp(/*id*/'blank_gif',0,'style.visibility','hidden','visibility','hide')">
<img border="0" src="images/blank_website.gif" width="760"
height="300"></a></div>

Finally, when you add links to the cells in the main menu bar, the
links must close (hide) the menu leafs that are opened for adjacent
links.

There is an alternative menu that is easier to code, but perhaps
harder to understand what is going on.
See http://www.seoconsultants.com/css/menus/tutorial/
I am using this at www.rxs-enterprises.org
Or an alternative using custom behaviours at
http://myweb.tiscali.co.uk/jonspivey/menus/index.html
 
R

Regina

Thank you very much for the help on this subject. It will take me awhile to
try, I really need to learn this! I appreciate it very much!! I'll be back if
I run into trouble.
Thanks,
Regina
 
R

Regina

Wow! I did it! Thank you very much Ron for the help! I appreciate it very
much!!! Could you look at what I have done and make sure its okay before I
continue? http://dominicursetta.com/testing_testing.htm If you click on the
link testing it goes to my site. I will be adding this navigation bar with
layers to my site. How does it fit in to my tables?
Thanks again,
Regina
 
R

Ronx

Well done.

I find that small, light fonts on a dark background do not show as
well as small dark fonts on a light background.
Change your font-family CSS to
font-family: "MS Reference", Sans-Serif;
(Note the quotes and comma.)
and consider increasing the font size.
Fonts should not be sized in points (pt). Points are a print size,
(equals 1/72 inches), not a dimension normally associated with
screens. 8pt is roughly equal to 11px, pixels being a better screen
measure.

There is some extra code in the page that does not appear to do
anything, such as empty paragraphs, and a table that appears to be
used for spacing.

In general layers do not fit into tables - tables move around as the
page and fonts are resized by users, but layers are fixed in position
and thus seem to jump out of the table.

However, one way to get round this is to introduce more code:
<table>
<tr>
<td>
<div style="position:relative">
<!-- your menu goes here, with ALL its layers -->
</div>
</td>

The relatively positioned <div> makes the menu start its positioning
from wherever that <div> is located.
 
R

Ronx

Change
<div style="position: absolute; top: 134px; left: 22px; z-index: 1;
visibility: visible" id="blank_gif">
to
<div style="position: absolute; top: 134px; left: 22px; z-index: 1;
visibility: hidden" id="blank_gif">

I would suggest that you develop the menu as a page on its own, and
include it (as a FrontPage included content file) in your DWT. This
will make it easier to deal with the menu as an entity.
The include file would then be included in a table cell on the DWT.
However, the menu will have to start with

<div style="position:relative;">
<!-- The entire menu goes here -->
</div>
 
R

Regina

Got it Ron, I made the image transparent (I should have thought of that) I
appreciate the help!
Regina
 
R

Regina

Hello,
I have completed my dhtml menu:) Could you please just take a look at the
page to see if there are any abnormalities in the code before I continue?
Also to make sure it is visible in all browsers. I only have one drop down
under the tab Photos: http://dominicursetta.com/testing.htm
Thank you for all of your help!
Regina
 
R

Ronx

There are a few things to correct::
in <table ... id="table4" >
delete
<div align="center">
<div align="center">
<div align="center">

There does not appear to be any corresponding </center> tags, and the
tags are not required.

Also change the first <td> to <td height="25">
Table height is invalid HTML, and may be ignored by some browsers.

In new_page_4.htm
change
<body>
to
<body><div style="position: relative;">
and change
</body>
to
</div></body>
These changes allow the menu to be used within a table cell, without
any problems in other browsers.

Also, there is an error:
Use Cut (Ctrl+x) to remove
<div style="position: absolute; top: 18px; left: 16px; z-index: 1;
visibility: hidden" id="blank_gif">
and then paste it above the lines:
<a href="javascript:;"
onmouseover="FP_changeProp(/*id*/'list',0,'style.visibility','hidden','visibility','hide');FP_changeProp(/*id*/'blank_gif',0,'style.visibility','hidden','visibility','hide')">
<img border="0" src="images/blank_website.gif" width="740"
height="350"></a></div>

Finally, you may wish to add events to close the Photos menu leaf and
blank_image when you mouseover the Pit Crew or News menu options.
 
R

Ronx

You still haven't moved
<div style="position: absolute; top: 18px; left: 16px; z-index: 1;
visibility: hidden" id="blank_gif">
to above
<a href="javascript:;"
onmouseover="FP_changeProp(/*id*/'list',0,'style.visibility','hidden','visibility','hide');FP_changeProp(/*id*/'blank_gif',0,'style.visibility','hidden','visibility','hide')">
<img border="0" src="images/blank_website.gif" width="740"
height="350"></a></div>
where it belongs. As it stands, the div holding the blank_image is
split by the menu leaf, which is not good.

With the addition of the relatively positioned div, the measuring
point for the absolutely positioned divs has changed. The menu bar
needs to moved to top:0px, left:0px, and the other layers moved to
suit.

The relatively positioned div is essential, since it allows the menu
to be placed in a table cell and display correctly in all browsers.
Without it, some browsers will move the menu to above or below its
correct position.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

DHTML Menu 12
how do i create a multi-level navigation button in FP2003 1
Navigation menubar in DHTML 1
Changing cell colour with DHTML Menus 1
Rollover hyperlink 2
swap image problem 5
Jump menu greyed out 1
Drop Down Menus & FP 2003 0

Top