Results 1 to 3 of 3

Thread: DropDown Menu

  1. #1
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DropDown Menu

    I am testing the AnyLink Drop Down Menu for my site.
    I inserted the style sheet and script into the code and the following in the body
    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> |

    <a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick)

    The problem I am having is that when I click on the link on the drop down menu, it opens up to [target="_blank], since I am using frames, can I have those links open to [target="mainFrame"]. Where do I insert this statement or is there a differenet statement to do this.

    Thank you

  2. #2
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Is this not possible in regular Frames?

    Here's the script I used:

    <style type="text/css">

    #dropmenudiv{
    position:absolute;
    border:1px solid black;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }

    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    }

    #dropmenudiv a:hover{ /*hover background color*/
    background-color: yellow;
    }

    </style>


    <script type="text/javascript">

    /***********************************************
    * AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
    menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
    menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
    menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="http://cnn.com">CNN</a>'
    menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
    menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'

    var menuwidth='165px' //default menu width
    var menubgcolor='lightyellow' //menu bgcolor
    var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclick="yes" //hide menu when user clicks within menu?

    /////No further editting needed

    var ie4=document.all
    var ns6=document.getElementById&&!document.all

    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }


    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    if (menuwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    }
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }

    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    }
    return edgeoffset
    }

    function populatemenu(what){
    if (ie4||ns6)
    dropmenuobj.innerHTML=what.join("")
    }


    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)

    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    }

    return clickreturnvalue()
    }

    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }

    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }

    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }

    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }

    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }

    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }

    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu

    </script>
    Last edited by ahew72; 04-23-2005 at 04:01 PM. Reason: Added script

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    First of all,

    Quote Originally Posted by ahew72
    [target="_blank]
    is ambiguous. It should either be:

    Code:
    target="_blank"
    or

    Code:
    target=_blank
    Without testing, I imagine it would be interpreted as no target, opening in the same page or frame where the link is. I think you mean the link is opening in a new window but, I cannot be sure. Since the behavior of the demo is to open in the same window or frame, I am inclined to think you might mean that as well. In any case, to get the link to open in the frame you mention just put it in the menu array declarations, example:

    Code:
    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="http://www.javascriptkit.com" target="mainFrame">JavaScript Kit</a>'
    menu1[1]='<a href="http://www.freewarejava.com" target="mainFrame">Freewarejava.com</a>'
    menu1[2]='<a href="http://codingforums.com" target="mainFrame">Coding Forums</a>'
    menu1[3]='<a href="http://www.cssdrive.com" target="mainFrame">CSS Drive</a>'
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •