Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Extended jQuery Gooey Menu with Dropdown

  1. #1
    Join Date
    Feb 2013
    Location
    Ranchi
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cool Extended jQuery Gooey Menu with Dropdown

    1) Script Title: Extended jQuery Gooey Menu with Dropdown

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/gooeymenu.htm

    3) Describe problem:

    Hi There,

    Please help me for adding new dropdown menu in this script or wherever need changes in css or js file.

    I am using jQuery Gooey Menu uses the popular "lava lamp" effect to create CSS menus with a moving gooey background effect using GEL BUTTON.

    I want to add a dropdown menu with this menu.
    Code for want to use dropdown in this menu.
    HTML Code:
    <div class="header">
    		<ul id="gooeymenu2" class="solidblockmenu">
    			<li><a href="index.html">Home</a></li>
    
    			<!--Here i want to use drop down menu -->
    
    			<li><a href="about_us.html">About Us</a></li>
    			<li><a href="objective.html">Objective</a></li>
    			<li><a href="member.html">Member</a></li>
    			<li><a href="funding.html">Funding / Legal Status</a></li>
    			<li><a href="donation.html">Donation</a></li>
    			<li><a href="projects.html">Projects</a></li>
    			<li><a href="gallery.html">Gallery</a></li>
    			<li><a href="contact.html">Contacts</a></li>
    		</ul>
    			<script type="text/javascript">
    				gooeymenu.setup({id:'gooeymenu2', selectitem:0, fx:'easeOutBack'})
    			</script>
    </div><!--/ div class="header" -->

    for example where i want to use this menu : http://www.ajks.org/

    Thanks.
    Last edited by traq; 03-08-2014 at 05:00 PM. Reason: please use BBCode tags when posting code

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    For some reason I cannot see the question again. Are you wanting a drop down under certain items? And do you want the Gooey button to be on the sub elements?
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    What happened to his original post?
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by Deadweight View Post
    What happened to his original post?
    I am not sure, but I have straightened it out.

    @Highlender, your post was auto-moderated again after you edited it. This can happen sometimes if you have frequent edits, or if your posts have certain keywords that the filter thinks are "spam"-like. It also happens quite often if you edit a post which was moderated previously, so I would suggest you avoid editing your original post again.

    Let me know if you have any further problems.

  5. #5
    Join Date
    Feb 2013
    Location
    Ranchi
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi,
    Actually i posted the question but edit frequently , and it will be auto-moderated. so you can see the problem, can you give solutions for this.
    Thanks

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Try to submit your posts only when they are ready, so you don't have to go back and edit as often.
    If you click [Go Advanced], you can see a preview of your post before you submit it, and make any corrections then.

    If your post is moderated, please be patient; we review/approve moderated posts as quickly as possible (usually within a few hours).

  7. #7
    Join Date
    Feb 2013
    Location
    Ranchi
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    any solution for above question ??

  8. #8
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    I asked you a question first? Do you want the button to float over the sub-elements or would you just like the elements to just have a normal drop down.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  9. #9
    Join Date
    Feb 2013
    Location
    Ranchi
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for replying Mr. DEADWEIGH

    I want to the elements to just have a normal drop down.

  10. #10
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    hr{
    margin:50px 0;
    color:#eee;
    }
    
    ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
    _visibility: hidden; /*IE6 rule*/
    }
    
    /* ######### Gel Menu CSS ######### */
    
    ul.gelbuttonmenu{
    position:relative;
    padding: 0;
    margin: 0;
    margin-bottom:1em;
    text-align: center; //set value to "left", "center", or "right"*/
    }
    
    ul.gelbuttonmenu li{
    display: inline;
    }
    
    ul.gelbuttonmenu li a{
    color: black;
    font-weight:bold;
    padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/
    margin-right: 20px; /*spacing between each menu link*/
    text-decoration: none;
    }
    
    ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
    position:absolute;
    width:0px;
    background:lightblue;
    background:url(gelbuttonleft.gif) top left no-repeat, url(gelbuttonright.gif) top right no-repeat, url(gelbuttoncenter.gif) top center repeat-x;
    }
    
    
    .submenu {
     position:absolute;z-Index:101;width:200px;height:200px;margin-Top:5px;background-Color:#FFFFCC;
    
    }
    
    
    /*]]>*/
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    
    <script >
    
    /* jQuery Gooey Menu
    * Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
    * Author: Dynamic Drive at http://www.dynamicdrive.com/
    * Visit http://www.dynamicdrive.com/ for full source code
    */
    
    jQuery.noConflict()
    
    jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/
    		if (s == undefined) s = 1.70158;
    		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    	}
    })
    
    
    var gooeymenu={
    	effectmarkup: '<li class="active"></li>',
    
    	setup:function(usersetting){
    		jQuery(function($){ //on document.ready
    			function snapback(dur){
    				if ($selectedlink.length>0)
    					$effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx)
    			}
    			var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting)
    			var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL
    			var $menulinks=$menu.find('li a')
    			var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL
    			$effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window
    			if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined
    				var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')
    			}
    			else{
    				var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined
    			}
    			setting.defaultselectedBool=$selectedlink.length
    			$menulinks.mouseover(function(){
    				clearTimeout(setting.snapbacktimer)
    				var $target=$(this)
    //alert($target.position().left+" "+$target.get(0).offsetLeft)
    
    				$effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx)
    				if (setting.defaultselectedBool==0) //if there is no default selected menu item
    					$selectedlink=$target //set current mouseover element to selected element
    			})
    			if ($selectedlink.length>0){
    				snapback(0)
    				$menu.mouseleave(function(){
    					setting.snapbacktimer=setTimeout(function(){
    						snapback(setting.fxtime)
    					}, setting.snapdelay)
    				})
    			}
    				$(window).bind('resize', function(){
    					snapback(setting.fxtime)
    				})
    		})
    	}
    }/***********************************************
    * Gooey Menu Script (c) Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    </script>
    
    <link rel="stylesheet" type="text/css" href="gooeymenu.css" />
    
    </head>
    
    <body>
    <ul id="gooeymenu1" class="gelbuttonmenu">
     <li>
      <a href="http://www.dynamicdrive.com/">Home</a>
     </li>
     <li>
      <a href="http://www.dynamicdrive.com/style/">CSS Codes</a>
      <div class="submenu" >Sub Menu 1</div>
     </li>
     <li>
      <a href="http://www.dynamicdrive.com/forums/">Forums</a>
     </li>
     <li>
      <a href="http://tools.dynamicdrive.com">Tools</a>
      <div class="submenu" >Sub Menu 3</div>
     </li>
     <li>
      <a href="http://www.javascriptkit.com/">JavaScript</a>
     </li>
     <li>
      <a href="http://www.cssdrive.com">CSS Gallery</a>
     </li>
    </ul>
    
    <script>
    
    var zxcSubMenu={
    
     init:function(o){
      var id=o.ParentID,p=document.getElementById(id),clds=p?p.getElementsByTagName('LI'):[];
      if (clds[0]){
       var sm,a,z0=0;
       o.ary=[]
       for (;z0<clds.length;z0++){
        sm=this.bycls(o.SubMenuClass,'*',clds[z0])[0];
        if (sm){
         sm.style.left=sm.style.top='-3000px';
         a=[clds[z0],sm];
         this.addevt(clds[z0],'mouseover','show',o,a);
         this.addevt(sm,'mouseover','show',o,a);
         this.addevt(clds[z0],'mouseout','hide',o,a);
         this.addevt(sm,'mouseout','hide',o,a);
         document.body.appendChild(sm);
         o.sm=a;
        }
       }
      }
     },
    
     show:function(o,sm){
      sm!=sm?this.hide(o,o.sm):null;
      clearTimeout(sm[2]);
      var p=this.pos(sm[0]);
      sm[1].style.left=p[0]+'px';
      sm[1].style.top=p[1]+sm[0].offsetHeight+'px';
      o.sm=sm;
     },
    
     hide:function(o,sm){
      sm[2]=setTimeout(function(){ sm[1].style.top='-3000px'; },200);
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1,p2){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null;
     },
    
     bycls:function(n,t,o){
      for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){
       if((' '+c[z0].className+' ').match(' '+n+' ')){
        a.push(c[z0]);
       }
      }
      return a;
     }
    
    
    }
    
    zxcSubMenu.init({
     ParentID:'gooeymenu1',
     SubMenuClass:'submenu'
    });
    
    gooeymenu.setup({id:'gooeymenu1'})
    
    </script>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  11. The Following User Says Thank You to vwphillips For This Useful Post:

    Highlender (03-12-2014)

Similar Threads

  1. jQuery Gooey Menu Problem
    By CarvellKid in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-21-2013, 06:35 PM
  2. jQuery Gooey Menu
    By WebIT in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-20-2012, 03:37 PM
  3. jQuery Gooey Menu
    By gjhunter in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 06-24-2012, 04:09 PM
  4. jQuery Gooey Menu Problems
    By badinerie in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 02-15-2012, 07:58 PM
  5. jQuery Gooey Menu Help
    By billyjoee007 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-14-2011, 08:58 PM

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
  •