Solved

HTML drop down menu positioning

Posted on 2013-12-17
3
517 Views
Last Modified: 2014-01-05
Experts,

This is most likely fairly basic to everyone here, but I apologize, in that I haven't been able to find any information regarding the topic that I've been able to translate.

Using the HTML drop-down menu example here (written by Tom Lavedas)
http://gallery.technet.microsoft.com/scriptcenter/796bd584-0fdb-43bc-a5d2-aa5fc99a5e5d#content

I've modified the code, and it works great in my little personal GUI HTA I've been building, except Mr. Lavedas has the fixed position of the drop down's in the upper left of the page always.  I'd like to move the menu bar to another div, which itself works, except the drop down sub items always appear in the upper-right as 'fixed'.

Would somebody be able to point me in the correct direction, to as when one moves the <div> and <span> elements the drop down menu exists in - how do you set the sub items to always appear beneath the primary menu item?  - No matter where it falls on the HTA page?

Here is his (Mr. Lavedas') code untouched:

<html> 
<!-- An editable menu bar that looks like a standard Windows menu for use in an HTA --> 
<head> 
<title>Example Menu System</title> 
<script language=vbs> 
resizeto 640, 480 
' Copyright 2010, Tom Lavedas, tlavedas at hotmail dot com 
' Released for non-commercial use, only. 
 
' Define menu items 
Const sMenuItems = "File,Edit,Font,Help" 
 
' Define one submenu constant for each menu item as illustrated below 
' Each is a comma separated list in a single string 
Const sFile = "Open,Close,Save,Save As ...,Exit" 
Const sEdit = "Cut,Copy,Paste,Select All,Deselect All" 
Const sFont = "Arial,Century Gothic,Times" 
Const sHelp = "Help, About" 
Const sHTML = "&nbsp;&nbsp;&nbsp;#sItem#&nbsp;&nbsp;&nbsp;" 
 
Dim dMenus, sMenuOpen 
 
sub Window_onload 
Dim entry 
 
  set dMenus = createObject("Scripting.Dictionary") 
  for each entry in Split(sMenuItems, ",") 
    menu.innerHTML = menu.innerHTML & "&nbsp;<span id=" & entry _ 
                   & " style='padding-bottom:2px' onselectstart=cancelEvent>&nbsp;" _ 
                   & entry & "&nbsp;</span>&nbsp;&nbsp;" 
    dMenus.Add entry, Split(eval("s" & entry), ",") 
  next 
  sMenuOpen = "" 
 
end sub 
 
Sub menu_onmouseover 
  
  clearmenu 
  with window.event.srcElement 
    if .parentElement.ID = "menu" then 
      .style.border = "thin outset" 
      .style.cursor = "arrow" 
    end if 
  end with 
 
end sub 
 
Sub menu_onmouseout 
 
  with window.event.srcElement 
    .style.border = "none" 
    .style.cursor = "default" 
  end with ' srcElement 
 
end sub 
 
Sub dropmenu_onmouseover 
  
  with window.event 
    .srcElement.style.cursor = "arrow" 
    .cancelbubble = true 
    .returnvalue = false 
  end with 
 
end sub 
 
sub SubMenuOver 
 
  with window.event.srcElement 
    if .ID = "dropmenu" then exit sub 
    .style.backgroundcolor = "darkblue" 
    .style.color = "white" 
    .style.cursor = "arrow" 
  end with 
 
end sub 
 
sub SubMenuOut 
 
  with window.event.srcElement 
    .style.backgroundcolor = "lightgrey" 
    .style.color = "black" 
    .style.cursor = "default" 
  end with 
 
end sub 
 
Sub menu_onclick 
Dim oEL, oItem 
 
  if sMenuOpen <> "" then exit sub 
  with window.event.srcElement 
    if .ID <> "menu" then 
      .style.border = "thin inset" 
      nLeft = .offsetLeft 
      ntop  = .offsetTop + replace(menu.style.Height, "px", "") - 5 
      sMenuOpen = trim(.innertext) 
      with dropmenu 
        with .style 
          .border = "thin outset" 
          .backgroundcolor = "lightgrey" 
          .position = "absolute" 
          .left = nLeft 
          .top = nTop 
          .width = "100px" 
          .zIndex = "101" ' added 28 June 2010 
        end with ' style 
        for each sItem in dMenus.Item(sMenuOpen) 
          set oEL = document.createElement("SPAN") 
          .appendChild(oEL) 
          with oEl 
            .ID = sItem 
            .style.height = "20px" 
            .style.width = dropmenu.style.width 
            .style.zIndex = "102" ' added 28 June 2010 
            .innerHTML = Replace(sHTML, "#sItem#", trim(sItem)) 
            set .onmouseover = getRef("SubMenuOver") 
            set .onmouseout = getRef("SubMenuOut") 
            set .onclick = getRef("SubMenuClick") 
            set .onselectstart = getRef("cancelEvent") 
          end with ' child node 
          set oEL = document.createElement("BR") 
          .appendChild(oEL) 
        next 
      end with ' dropmenu 
    end if 
  end with ' srcEement 
 
end sub 
 
sub cancelEvent 
  window.event.returnValue = false 
end sub ' cancelEvent 
 
sub clearmenu 
 
  dropmenu.innerHTML = "" 
  dropmenu.style.border = "none" 
  dropmenu.style.backgroundcolor = "transparent" 
  if sMenuOpen <> "" then 
    document.getElementByID(sMenuOpen).style.border = "none" 
    sMenuOpen = "" 
  end if 
end sub 
 
' ###################  IMPORTANT  ################### 
' Code to accomplish each submenu item defined above 
' Can be as simple as a subroutine call 
' 
Sub SubMenuClick 
 
  sItem = trim(window.event.srcElement.innerText) 
  clearmenu 
  Select Case lcase(sItem) 
    case "open" 
      msgbox "Sorry, " & sItem & " is not implemented" 
    case "close" 
      msgbox "Sorry, " & sItem & " is not implemented" 
    case "save" 
      msgbox "Sorry, " & sItem & " is not implemented" 
    case "save as ..." 
      msgbox "Sorry, " & sItem & " is not implemented" 
    case "exit" 
      window.close 
    case "cut" 
      msgbox "Sorry, " & sItem & " is not implemented" 
    case "copy" 
    case "paste" 
      msgbox "Sorry, " & sItem & " is not implemented" 
    case "select all" 
      msgbox "Sorry, " & sItem & " is not implemented" 
    case "deselect all" 
      msgbox "Sorry, " & sItem & " is not implemented" 
    case "arial" 
      document.body.style.font = "12pt Arial" 
    case "century gothic" 
      document.body.style.font = "12pt Century Gothic" 
    case "times" 
      document.body.style.font = "11pt Times New Roman" 
    case "help" 
      msgbox "Help under construction", vbOKOnly + vbInformation, "Help" 
    case "about" 
      msgbox "Copyright, 2010" & vbCRLF & "Tom Lavedas"_ 
              & vbCRLF & "Released for non-commercial use only",_ 
              vbOKOnly + vbInformation, "About Menu" 
    case else ' catch all for undefined menu items 
      msgbox "Sorry, " & sItem & " is not implemented" 
  end Select 
 
end sub 
 
</script> 
</head> 
<!-- 
     Page layout follows 
--> 
<body onmouseover=menu_onmouseover style="font:12pt Arial"> 
<div id=menu style="position:absolute;left:0;top:0;width:110%;height:23px; 
                    padding-top:2px;background-color:lightgrey; 
                    font:normal 9pt Microsoft Sans Serif;z-Index:100"> 
</div> 
<span id=dropmenu style="font:normal 9pt Microsoft Sans Serif"></span> 
<br><br><br> 
<center> 
<b>Build-Your-Own Menu Example</b><br> 
Copyright, 2010 Tom Lavedas<br> 
For non-commercial use, only. 
</center> 
<span id=msg style="z-Index:10"></span> 
</body> 
</html>

Open in new window


Thanks for any info you guys can share.  Please bare with me as I work through understanding what you would be showing me.
0
Comment
Question by:usslindstrom
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 7

Expert Comment

by:dimmergeek
ID: 39725065
Can you give us a link to your site with the code in the div?
You may have styles that are over-riding.
0
 
LVL 5

Accepted Solution

by:
usslindstrom earned 0 total points
ID: 39725084
It's a HTA I plan on using to speed-up some ticket processing.  A VERY basic HTA at that for viewing AD properties I'm getting tired of looking up through ADUC.

*Attached.  I had to rename the extensions of the following files for EE to allow me to upload it:
.\CFG\txtAssist.cfg
.\Scripts\*.vbs
.\ADGUI.hta



*BTW - thanks for the help.
AD-GUI.zip
0
 
LVL 5

Author Closing Comment

by:usslindstrom
ID: 39757140
I have revisited the code, and applied the positional fix.  The sub menu items are now appearing correctly.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to calculate height of a text using jquery 3 42
Link not working 6 42
Ajax on ASP 2 39
bootstrap css color change 10 21
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question