Ask a Question related to Macromedia Dynamic HTML, Design and Development.
-
noobie2005 #1
dynamic menu...again
Hey, it's me again, and it did work, but now I'm having trouble, yet again, as
my SN states, I'm still a rookie at this, and learning this as I go, so please
be patient with me. This time it's having the menu, stay in place while the
user mouse is over the drop-down menu...I think that sounds confusing, but I
hope you get my drift, but this time I'll include the CSS page too. The code is
almost the same:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
if(navigator.appName == "Netscape"){
window.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = track;
function track(e)
{
var x = (document.all) ? event.x : e.pageX;
var y = (document.all) ? event.y : e.pageY;
if (x<1 || x>60 || y<53 || y>123)
document.getElementById("menu_1").style.visibility = "hidden";
if (x<70 || x>130 || y <53 || y>123)
document.getElementById("menu_2").style.visibility = "hidden";
if (x<140 || x>200 || y<53 || y>123)
document.getElementById("menu_3").style.visibility = "hidden";
if (x<210 || x>270 || y<53 || y>123)
document.getElementById("menu_4").style.visibility = "hidden";
if (x<280 || x>340 || y<53 || y>123)
document.getElementById("menu_5").style.visibility = "hidden";
if (x<350 || x>470 || y<53 || y>123)
document.getElementById("menu_6").style.visibility = "hidden";
}
function reveal(menu){
if(menu == 1) document.getElementById("menu_1").style.visibility = "visible";
if(menu == 2) document.getElementById("menu_2").style.visibility = "visible";
if(menu == 3) document.getElementById("menu_3").style.visibility = "visible";
if(menu == 4) document.getElementById("menu_4").style.visibility = "visible";
if(menu == 5) document.getElementById("menu_5").style.visibility = "visible";
if(menu == 6) document.getElementById("menu_6").style.visibility = "visible";
}
</script>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 id="bar"><center>JAVASCRIPT TEST DYNAMIC MENU SCRIPT</center></h1>
<table id="bar" cellpadding="2" cellspacing="3" align="center">
<tr bgcolor="#004000">
<td><a href="javascript://" onMouseOver="reveal(1)">PRODUCTS</a></td>
<td><a href="javascript://" onMouseOver="reveal(2)">INFORMATION</a></td>
<td><a href="javascript://" onMouseOver="reveal(3)">WHERE TO BUY</a></td>
<td><a href="javascript://" onMouseOver="reveal(4)">USER GROUPS</a></td>
<td><a href="javascript://" onMouseOver="reveal(5)">COMPANY</a></td>
<td><a href="javascript://" onMouseOver="reveal(6)">NEWS</a></td>
</tr>
</table>
<div id="menu_1" class="menu" style="left:1px">
<a href=""> Main-Line Units </a><br/>
<a href=""> Hose & Drip Units </a><br/>
<a href=""> Fertilizers & Supplements</a><br/>
<a href="">Parts & Accessories</a>
</div>
<div id="menu_2" class="menu" style="left:75px">
<a href="target1.html"> Item 1 </a><br/>
<a href="target2.html"> Item 2 </a><br/>
<a href="target3.html"> Item 3 </a>
</div>
<div id="menu_3" class="menu" style="left:170px">
<a href="target1.html"> Item 1 </a><br/>
<a href="target2.html"> Item 2 </a><br/>
<a href="target3.html"> Item 3 </a>
</div>
<div id="menu_4" class="menu" style="left:260px">
<a href="target1.html"> Item 1 </a><br/>
<a href="target2.html"> Item 2 </a><br/>
<a href="target3.html"> Item 3 </a>
</div>
<div id="menu_5" class="menu" style="left:290px">
<a href="target1.html"> Item 1 </a><br/>
<a href="target2.html"> Item 2 </a><br/>
<a href="target3.html"> Item 3 </a>
</div>
<div id="menu_6" class="menu" style="left:350px">
<a href="target1.html"> Item 1 </a><br/>
<a href="target2.html"> Item 2 </a><br/>
<a href="target3.html"> Item 3 </a>
</div>
</body>
</html>
And the CSS page:
#bar
{
background-color: #2E8B57;
font-family: Arial;
font-size: 12pt;
font: bold;
color : White;
text-align : center;
text-transform : capitalize;
padding : 5 5 5 5;
}
.menu
{
background-color: Orange;
font-family: Arial;
font-size: 11pt;
color : White;
text-align : left;
text-transform : capitalize;
visibility: hidden;
}
a
{
font-family: Arial;
text-decoration : none;
color: White;
}
a:hover
{
background : #FF8C00;
font-family: Arial;
text-decoration: none;
color: White;
font: bold;
}
noobie2005 Guest
-
Dynamic Menu
Dear All, How could I make a menu have many sub-menus, note that the menu and sub-menus items come from database. Ex: a menu have items like:... -
Help with Dynamic Menu
Hey everyone, I'm developing a piece right now and have come to a stand still. The menu part of the project will contain a number of "Business... -
dynamic menu system going to dynamic page
please can someone help me - im at the end of my tether! ive got an access db. Its got a list of words that is to be a menu system stored in it.... -
Dynamic Menu...is it possible?
I'm new with Flash and I need to know if it is possible with Flash to get a menu created dynamically where the information is coming from a database.... -
Dynamic Menu Help
Hello, I have a written a simple dynamic menu seen here (http://www.digitaris.com). It uses an xml file to create the categories and... -
Murray *TMM* #2 Re: dynamic menu...again
Can you post a link to the page?
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================
"noobie2005" <webforumsuser@macromedia.com> wrote in message
news:d6ln8v$rso$1@forums.macromedia.com...> Hey, it's me again, and it did work, but now I'm having trouble, yet
> again, as
> my SN states, I'm still a rookie at this, and learning this as I go, so
> please
> be patient with me. This time it's having the menu, stay in place while
> the
> user mouse is over the drop-down menu...I think that sounds confusing, but
> I
> hope you get my drift, but this time I'll include the CSS page too. The
> code is
> almost the same:
>
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <title>Untitled Document</title>
>
> <script language="javascript" type="text/javascript">
> if(navigator.appName == "Netscape"){
> window.captureEvents(Event.MOUSEMOVE);
> }
> document.onmousemove = track;
>
> function track(e)
> {
> var x = (document.all) ? event.x : e.pageX;
> var y = (document.all) ? event.y : e.pageY;
> if (x<1 || x>60 || y<53 || y>123)
> document.getElementById("menu_1").style.visibility = "hidden";
> if (x<70 || x>130 || y <53 || y>123)
> document.getElementById("menu_2").style.visibility = "hidden";
> if (x<140 || x>200 || y<53 || y>123)
> document.getElementById("menu_3").style.visibility = "hidden";
> if (x<210 || x>270 || y<53 || y>123)
> document.getElementById("menu_4").style.visibility = "hidden";
> if (x<280 || x>340 || y<53 || y>123)
> document.getElementById("menu_5").style.visibility = "hidden";
> if (x<350 || x>470 || y<53 || y>123)
> document.getElementById("menu_6").style.visibility = "hidden";
> }
>
> function reveal(menu){
> if(menu == 1) document.getElementById("menu_1").style.visibility =
> "visible";
> if(menu == 2) document.getElementById("menu_2").style.visibility =
> "visible";
> if(menu == 3) document.getElementById("menu_3").style.visibility =
> "visible";
> if(menu == 4) document.getElementById("menu_4").style.visibility =
> "visible";
> if(menu == 5) document.getElementById("menu_5").style.visibility =
> "visible";
> if(menu == 6) document.getElementById("menu_6").style.visibility =
> "visible";
> }
> </script>
>
> <link href="menu.css" rel="stylesheet" type="text/css">
> </head>
> <body>
> <h1 id="bar"><center>JAVASCRIPT TEST DYNAMIC MENU SCRIPT</center></h1>
>
> <table id="bar" cellpadding="2" cellspacing="3" align="center">
> <tr bgcolor="#004000">
> <td><a href="javascript://" onMouseOver="reveal(1)">PRODUCTS</a></td>
> <td><a href="javascript://" onMouseOver="reveal(2)">INFORMATION</a></td>
> <td><a href="javascript://" onMouseOver="reveal(3)">WHERE TO BUY</a></td>
> <td><a href="javascript://" onMouseOver="reveal(4)">USER GROUPS</a></td>
> <td><a href="javascript://" onMouseOver="reveal(5)">COMPANY</a></td>
> <td><a href="javascript://" onMouseOver="reveal(6)">NEWS</a></td>
> </tr>
> </table>
>
> <div id="menu_1" class="menu" style="left:1px">
> <a href=""> Main-Line Units </a><br/>
> <a href=""> Hose & Drip Units </a><br/>
> <a href=""> Fertilizers & Supplements</a><br/>
> <a href="">Parts & Accessories</a>
> </div>
> <div id="menu_2" class="menu" style="left:75px">
> <a href="target1.html"> Item 1 </a><br/>
> <a href="target2.html"> Item 2 </a><br/>
> <a href="target3.html"> Item 3 </a>
> </div>
> <div id="menu_3" class="menu" style="left:170px">
> <a href="target1.html"> Item 1 </a><br/>
> <a href="target2.html"> Item 2 </a><br/>
> <a href="target3.html"> Item 3 </a>
> </div>
> <div id="menu_4" class="menu" style="left:260px">
> <a href="target1.html"> Item 1 </a><br/>
> <a href="target2.html"> Item 2 </a><br/>
> <a href="target3.html"> Item 3 </a>
> </div>
> <div id="menu_5" class="menu" style="left:290px">
> <a href="target1.html"> Item 1 </a><br/>
> <a href="target2.html"> Item 2 </a><br/>
> <a href="target3.html"> Item 3 </a>
> </div>
> <div id="menu_6" class="menu" style="left:350px">
> <a href="target1.html"> Item 1 </a><br/>
> <a href="target2.html"> Item 2 </a><br/>
> <a href="target3.html"> Item 3 </a>
> </div>
> </body>
> </html>
>
> And the CSS page:
> #bar
> {
> background-color: #2E8B57;
> font-family: Arial;
> font-size: 12pt;
> font: bold;
> color : White;
> text-align : center;
> text-transform : capitalize;
> padding : 5 5 5 5;
> }
> .menu
> {
> background-color: Orange;
> font-family: Arial;
> font-size: 11pt;
> color : White;
> text-align : left;
> text-transform : capitalize;
> visibility: hidden;
> }
> a
> {
> font-family: Arial;
> text-decoration : none;
> color: White;
> }
> a:hover
> {
> background : #FF8C00;
> font-family: Arial;
> text-decoration: none;
> color: White;
> font: bold;
> }
>
Murray *TMM* Guest
-
noobie2005 #3 Re: dynamic menu...again
Sure, here's the link:
[url]http://www.isminternet.com/danlopez/menu/menu.htm[/url]
I changed it a bit with tables instead of <div> tags and it's no longer a
mouseover function, just a mousedown function instead. My problem is kinda
still the same, aligning everything under the appropriate menu heading and
displaying one menu under Product Specs correctly, basicly it's supposed to pop
out from the other menu, I hope that's understandable. Again thank you guys so
much for your help!
noobie2005 Guest
-
Murray *TMM* #4 Re: dynamic menu...again
This menu is going to be totally dependent on the screen state, since you
have hardwired the 'trigger' coordinates. If there is a slight vertical
scroll, the menu's operation could be compromised.
if (x<70 || x>130 || y<53 || y>123)
document.getElementById("menu_1").style.visibility = "hidden";
Have you seen that? Macromedia's HALO templates have exactly the same
problem.
The problem you are having is that you have used non-positioned divs for
your submenus. As such, they behave like any block tag, i.e., they expand
to occupy the entire line - that's why they stack one above the other.
That's also why your inline coordinates are not working. To make these
submenus behave, you need to position them absolutely, and assign them
widths. Then you can snug them up to the main menu choices.
Of course, you then have the problem of them aligning with centering content
on the page, but that's another thread.
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================
"noobie2005" <webforumsuser@macromedia.com> wrote in message
news:d6lqef$1tc$1@forums.macromedia.com...> Sure, here's the link:
>
> [url]http://www.isminternet.com/danlopez/menu/menu.htm[/url]
>
> I changed it a bit with tables instead of <div> tags and it's no longer a
> mouseover function, just a mousedown function instead. My problem is kinda
> still the same, aligning everything under the appropriate menu heading and
> displaying one menu under Product Specs correctly, basicly it's supposed
> to pop
> out from the other menu, I hope that's understandable. Again thank you
> guys so
> much for your help!
>
Murray *TMM* Guest
Reply With QuoteSimilar Questions and Discussions
Posting Permissions
- You may not post new threads
- You may post replies
- You may not post attachments
- You may not edit your posts
