Results 1 to 10 of 10

Thread: AnyLink Drop Down Menu animation

  1. #1
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink Drop Down Menu animation

    AnyLink Drop Down Menu
    http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    I am able to get this menu to work but i have need to customize it a little and i have been trying to figure out but i haven't been able to get it to work yet.

    What i want is when the menu opens, it does a fade or a scroll to open. likewise when it closes, it fades out or scroll upwards to close.

    At first i tried to use mootools for the animation but i couldnt get it to work because i do not know how to use it.

    Then i made my own function which decreases the div's size and then does a setTimeout to call itself again until it hits 0. but since the div that is popped up for each of the menu items is the same div, when you leave one of the menu items to go to the other, the second div scrolls shut if the animation isnt complete.

    If anyone has any ideas on how to accomplish this or has a better understanding of mootools or anther js framework that would be easier please let me know.

    Thanks.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,138
    Thanks
    3
    Thanked 1,007 Times in 992 Posts
    Blog Entries
    16

    Default

    Well, I'm familiar with jQuery, so using that, adding a fade effect to the menu is straightforward. Just replace the original script in the HEAD section with the below instead:

    Code:
    <script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
    
    <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
    ***********************************************/
    
    //July 14th, 08": Custom mod. Adds fade in/out effect using jQuery 1.2.x
    var fadespeed=300 //fade speed in milliseconds
    
    //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="-500px"
    if (menuwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    }
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
    obj.visibility=visible
    jQuery(dropmenuobj).hide().fadeIn(fadespeed)
    }
    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 topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    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){ //move up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    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){
    jQuery(dropmenuobj).fadeOut(fadespeed)
    //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>
    Make sure you've also uploaded the jquery.js file referenced in the above code from jQuery.com or elsewhere.

  3. #3
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up It works!

    It works exactly how i wanted it to. Thanks a lot.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    I tried this out dd. I was curious to see how you did it, and to see how it looked in IE 7 because I suspected that, as with most fading of text in IE 7, it would lose its anti-aliasing quality, which it did. Otherwise it's a very slick effect!
    - John
    ________________________

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

  5. #5
    Join Date
    Aug 2004
    Posts
    10,138
    Thanks
    3
    Thanked 1,007 Times in 992 Posts
    Blog Entries
    16

    Default

    Whatever shortcomings or kudos on the fade effect goes to jQuery.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by ddadmin View Post
    Whatever shortcomings or kudos on the fade effect goes to jQuery.
    And to whoever chooses to use jQuery's (and many, just about all in fact) fading routines for text. This is really an issue/trend with IE and, as it so happens, Opera. I haven't really looked into the logic behind this as far as the developers of these two browsers are concerned. However, since I surf in Opera, and test in IE (and others) - nothing terribly unusual in that, I'm somewhat surprised that this hasn't become a fairly big issue in the script development community where fading elements containing text is concerned.
    - John
    ________________________

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

  7. #7
    Join Date
    Nov 2008
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Very nice.. I incorporated this effect and like the fade in fade out transition. adds a bit of life & sophistication versus just popping on and off like a light switch!

    BUT.. as the op asked, could it be made to slide down or slide up on mouse over and mouse out? I have seen some very cool scripts where the menu slides down and then slides back up.

    I love this script, have already spent time customizing it for my site, so want to stick with it and see if it can be taken to the next level and slide up and down as a transition?

    And no, I am not asking to have both effect in 1 mind you, but given a choice, I would rather have the slide up and down transition than the fade in/out.

    I just do not have that level of skill.
    Last edited by eTard; 11-19-2008 at 10:15 PM.

  8. #8
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How Create Sub Menu

    Hi,
    Can any body tell me, how to create sub menu in this script ??

    Awaiting of the quick reply.

  9. #9
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    How could i create sub menu in this script ??

  10. #10
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    Well, I'm familiar with jQuery, so using that, adding a fade effect to the menu is straightforward. Just replace the original script in the HEAD section with the below instead:

    Code:
    <script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
    
    <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
    ***********************************************/
    
    //July 14th, 08": Custom mod. Adds fade in/out effect using jQuery 1.2.x
    var fadespeed=300 //fade speed in milliseconds
    
    //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="-500px"
    if (menuwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    }
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
    obj.visibility=visible
    jQuery(dropmenuobj).hide().fadeIn(fadespeed)
    }
    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 topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    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){ //move up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    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){
    jQuery(dropmenuobj).fadeOut(fadespeed)
    //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>
    Make sure you've also uploaded the jquery.js file referenced in the above code from jQuery.com or elsewhere.
    How could i create sub menu in this script ??

Tags for this Thread

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
  •