Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    [jquery] change drop down menu into drop-up

    I'm asking for help in setting this drop-down menu into drop-up menu. Anyone willing to assist? Because i don't know what needs to be changed, i heared that it should be passed bottom: 0; position: absolute into the menu ccs section, but it's not working ^^ ;/



    here is a css:

    Code:
        #jMenu {
            	display:table;
            	margin:0;
            	padding:0
            }
            
            /********************/
            /** premier niveau **/
            /********************/
            #jMenu li {
            	display:table-cell;
            	background-color:#322f32;
            	margin:0;
            	//float:left;
            }
            	#jMenu li a {
            		padding:10px;
            		display:block;
            		background-color: transparent;
            		color:#fff;
            		text-transform:uppercase;
            		cursor:pointer;
            		font-size:12px;
            	}
            	
            /*******************/
            /** second niveau **/
            /*******************/
            #jMenu li ul {
            	display:none;
            	position:absolute;
            	padding:0;
            	margin:0
            }
            	#jMenu li ul li {
            		background-color:#322f32;
            		display:block;
            		border-bottom:1px solid #484548;
            		padding:0
            	}
            	#jMenu li ul li.arrow {
            		background:#322f32 url('../arrow_down.png') no-repeat center center;
            		height:6px;
            		padding:0;
            		border-bottom:none;
            		padding-bottom:10px
            	}
            		#jMenu li ul li a {
            			font-size:11px;
            			text-transform:none;
            			padding:7px;
            			display:block;
            			border-top:1px solid transparent;
            			border-bottom:1px solid transparent;
            		}
            		#jMenu li ul li a.isParent {
            			background:#3A3A3A url('../arrow_right.png') no-repeat right center;
            		}
            			#jMenu li ul li a:hover {
            				background-color:#514c52;
            				border-top:1px solid #322f32;
            				border-bottom:1px solid #322f32;
            			}
    Last edited by VIPStephan; 04-21-2013 at 06:20 PM. Reason: corrected code BB tag

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,771
    Thanks
    23
    Thanked 550 Times in 549 Posts
    Welcome to the forums adasiax.
    Thanks for the css. Now we need the html.
    Please use the hash mark [#] located above you when entering a message in the tool bar to generate code tags and put your code inside of those.
    Evolution - The non-random survival of random variants.

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Also welcome here is a html :

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>Plugin JQuery Menu v1.6</title>
    	<meta http-equiv="description" content="" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<link rel="stylesheet" href="jquery/jMenu.jquery.css" type="text/css" />
    
    </head>
    <body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <ul id="jMenu">
    	<li><a class="fNiv">Category 1</a>
    		<ul>
    			<li class="arrow"></li>
    			<li><a>Category 1.2</a>
    				<ul>
    					<li><a>Category 1.3</a></li>
    					<li><a>Category 1.3</a></li>
    					<li><a>Category 1.3</a></li>
    					<li><a>Category 1.3</a></li>
    					<li><a>Category 1.3</a>
    						<ul>
    							<li><a>Category 1.4</a></li>
    							<li><a>Category 1.4</a></li>
    							<li><a>Category 1.4</a></li>
    							<li><a>Category 1.4</a>
    								<ul>
    									<li><a>Category 1.5</a></li>
    									<li><a>Category 1.5</a></li>
    									<li><a>Category 1.5</a>
    										<ul>
    											<li><a>Category 1.6</a></li>
    											<li><a>Category 1.6</a></li>
    											<li><a>Category 1.6</a></li>
    											<li><a>Category 1.6</a></li>
    											<li><a>Category 1.6</a></li>
    										</ul>
    									</li>
    								</ul>
    							</li>
    							<li><a>Category 1.4</a></li>
    							<li><a>Category 1.4</a></li>
    						</ul>
    					</li>
    					<li><a>Category 1.3</a></li>
    				</ul>
    			</li>
    			<li><a>Category 1.2</a></li>
    			<li><a>Category 1.2</a>
    				<ul>
    					<li><a>Category 1.3</a></li>
    					<li><a>Category 1.3</a>
    						<ul>
    							<li><a>Category 1.4</a></li>
    							<li><a>Category 1.4</a></li>
    							<li><a>Category 1.4</a></li>
    							<li><a>Category 1.4</a></li>
    							<li><a>Category 1.4</a></li>
    							<li><a>Category 1.4</a></li>
    							<li><a>Category 1.4</a></li>
    							<li><a>Category 1.4</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li><a>Category 1.2</a></li>
    		</ul>
    	</li>
    	
    	
    	<li><a class="fNiv">Category 2</a>
    		<ul>
    			<li class="arrow"></li>
    			<li><a>Category 2.2</a>
    				<ul>
    					<li><a>Category 2.3</a></li>
    					<li><a>Category 2.3</a></li>
    				</ul>
    			</li>
    			<li><a>Category 2.2</a>
    				<ul>
    					<li><a>Category 2.3</a></li>
    					<li><a>Category 2.3</a></li>
    					<li><a>Category 2.3</a></li>
    				</ul>
    			</li>
    			<li><a>Category 2.2</a>
    				<ul>
    					<li><a>Category 2.3</a></li>
    					<li><a>Category 2.3</a></li>
    					<li><a>Category 2.3</a></li>
    					<li><a>Category 2.3</a></li>
    					<li><a>Category 2.3</a></li>
    					<li><a>Category 2.3</a></li>
    				</ul>
    			</li>
    			<li><a>Category 2.2</a></li>
    		</ul>
    	</li>
    	
    	
    	<li><a class="fNiv">Category 3</a>
    		<ul>
    			<li class="arrow"></li>
    			<li><a>Category 3.2</a>
    				<ul>
    					<li><a>Category 3.3</a></li>
    					<li><a>Category 3.3</a></li>
    					<li><a>Category 3.3</a></li>
    					<li><a>Category 3.3</a></li>
    					<li><a>Category 3.3</a></li>
    					<li><a>Category 3.3</a></li>
    					<li><a>Category 3.3</a></li>
    				</ul>
    			</li>
    			<li><a>Category 3.2</a>
    				<ul>
    					<li><a>Category 3.3</a></li>
    					<li><a>Category 3.3</a></li>
    				</ul>
    			</li>
    			<li><a>Category 3.2</a></li>
    			<li><a>Category 3.2</a></li>
    		</ul>
    	</li>
    	
    	
    	<li><a class="fNiv">Category 4</a>
    		<ul>
    			<li class="arrow"></li>
    			<li><a>Category 4.2</a></li>
    			<li><a>Category 4.2</a></li>
    			<li><a>Category 4.2</a>
    				<ul>
    					<li><a>Category 4.3</a></li>
    					<li><a>Category 4.3</a></li>
    					<li><a>Category 4.3</a></li>
    					<li><a>Category 4.3</a></li>
    				</ul>
    			</li>
    			<li><a>Category 4.2</a></li>
    		</ul>
    	</li>
    	
    	
    	<li><a class="fNiv">Category 5</a>
    		<ul>
    			<li class="arrow"></li>
    			<li><a>Category 5.2</a>
    				<ul>
    					<li><a>Category 5.3</a></li>
    					<li><a>Category 5.3</a></li>
    					<li><a>Category 5.3</a></li>
    					<li><a>Category 5.3</a></li>
    				</ul>
    			</li>
    			<li><a>Category 5.2</a></li>
    			<li><a>Category 5.2</a></li>
    			<li><a>Category 5.2</a></li>
    		</ul>
    	</li>
    	
    	<li><a class="fNiv">Category 6</a></li>
    	
    	<li><a class="fNiv">Category 7</a>
    		<ul>
    			<li class="arrow"></li>
    			<li><a>Category 7.2</a></li>
    			<li><a>Category 7.2</a></li>
    			<li><a>Category 7.2</a></li>
    			<li><a>Category 7.2</a></li>
    		</ul>
    	</li>
    </ul>
    
    <script type="text/javascript" src="jquery/jquery.js"></script>
    
    <script type="text/javascript" src="jquery/jMenu.jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#jMenu").jMenu();
      })
    </script>
    
    </body>
    </html>
    and JS:

    Code:
    (function(b,c){b('*').hover(function(){b(this).data(c,1)},function(){b(this).data(c,0)}).data(c,0);b[c]=function(a){return b(a)[c]()};b.fn[c]=function(a){a=0;b(this).each(function(){a+=b(this).data(c)});return a>0}})(jQuery,'isHovered');
    
    
    /** jMenu Plugin **/
    (function($){
    
    	$.jMenu = {
    		/**************/
    		/** OPTIONS **/
    		/**************/
    		defaults: {
    			ulWidth : 'auto',
    			absoluteTop : 35,
    			absoluteLeft : 0,
    			effects : {
    				effectSpeedOpen : 300,
    				effectSpeedClose : 300,
    				effectTypeOpen : 'slide',
    				effectTypeClose : 'slide',
    				effectOpen : 'linear',
    				effectClose : 'linear'
    			},
    			TimeBeforeOpening : 200,
    			TimeBeforeClosing : 200,
    			animatedText : false,
    			paddingLeft: 7
    		},
    		
    		/*****************/
    		/** Init Method **/
    		/*****************/
    		init:function(options){
    			/* vars **/
    			opts = $.extend({}, $.jMenu.defaults, options);
    			
    			$("#jMenu a:not(.fNiv)").each(function(){
    				var $thisChild = $(this);
    				
    				/* Add css - arrow right */
    				if($.jMenu._IsParent($thisChild))
    					$thisChild.addClass('isParent');
    					
    				/* Add the animation on hover **/
    				if(opts.animatedText)
    					$.jMenu._animateText($thisChild);
    				
    				/* Actions on hover */
    				$thisChild.bind({
    					mouseover:function(){
    						$.jMenu._hide($thisChild);
    						$.jMenu._showNextChild($thisChild);
    					}
    				});
    			});
    			
    			/* Actions on parents links */
    			$('#jMenu li a.fNiv').bind({
    				mouseover:function(){
    					var $this = $(this);
    					var $child = $this.next();
    					ULWidth = $.jMenu._returnUlWidth($this);
    					$.jMenu._closeList($("#jMenu ul"));
    					if($child.is(':hidden'))
    						$.jMenu._showFirstChild($this);
    				}
    			});
    			
    			/* Close all when mouse  leaves */
    			$('#jMenu').bind({
    				mouseleave : function(){
    					setTimeout(function(){$.jMenu._closeAll();},opts.TimeBeforeClosing);
    				}
    			});
    		},
    		
    		
    		/****************************
    		*****************************
    			jMenu Methods Below
    		*****************************
    		****************************/
    		
    		/** Show the First Child Lists **/
    		_showFirstChild:function(el){
    			
    			if($.jMenu._IsParent(el))
    			{
    				var SecondList = el.next();
    				
    				if(SecondList.is(":hidden"))
    				{
    					var position = el.position();
    					
    					SecondList
    					.css({
    						top : position.top + opts.absoluteTop,
    						left : position.left + opts.absoluteLeft,
    						width : ULWidth
    					})
    					.children().css({
    						width: ULWidth
    					});
    					
    					$.jMenu._show(SecondList);
    				}
    			}
    			else
    				return false;
    		},
    		
    		/** Show all others Child lists except the first list **/
    		_showNextChild:function(el){
    			if($.jMenu._IsParent(el))
    			{
    				var ChildList = el.next();
    				if(ChildList.is(":hidden"))
    				{
    					var position = el.position();
    					
    					ChildList
    					.css({
    						top : position.top,
    						left : position.left + ULWidth,
    						width : ULWidth
    					})
    					.children().css({
    						width:ULWidth
    					});
    					$.jMenu._show(ChildList);
    					
    				}
    			}
    			else
    				return false;
    		},
    		
    		
    		/**************************************/
    		/** Short Methods - Generals actions **/
    		/**************************************/
    		_hide:function(el){
    			if($.jMenu._IsParent(el) && !el.next().is(':hidden')) 
    				$.jMenu._closeList(el.next());
    			else if(($.jMenu._IsParent(el) && el.next().is(':hidden')) || !$.jMenu._IsParent(el)) 
    				$.jMenu._closeList(el.parent().parent().find('ul'));
    			else
    				return false;
    		},
    		
    		_show:function(el) {
    			switch(opts.effects.effectTypeOpen)
    			{
    				case 'slide':
    					el.stop(true, true).delay(opts.TimeBeforeOpening).slideDown(opts.effects.effectSpeedOpen, opts.effects.effectOpen);
    					break;
    				case 'fade':
    					el.stop(true, true).delay(opts.TimeBeforeOpening).fadeIn(opts.effects.effectSpeedOpen, opts.effects.effectOpen);
    					break;
    				default :
    					el.stop(true, true).delay(opts.TimeBeforeOpening).show(opts.effects.effectSpeedOpen, opts.effects.effectOpen);
    			}
    		},
    		
    		_closeList:function(el) {
    			switch(opts.effects.effectTypeClose)
    			{
    				case 'slide':
    					el.slideUp(opts.effects.effectSpeedClose, opts.effects.effectClose);
    					break;
    				case 'fade':
    					el.fadeOut(opts.effects.effectSpeedClose, opts.effects.effectClose);
    					break;
    				default :
    					el.hide(opts.effects.effectSpeedClose, opts.effects.effectClose);
    			}
    			
    		},
    		
    		_closeAll:function(){
    			if(!$('#jMenu').isHovered()) {
    				$('#jMenu ul').each(function(){
    					$.jMenu._closeList($(this));
    				});
    			}
    		},
    		
    		_IsParent:function(el) {
    			if(el.next().is('ul')) return true;
    			else return false;
    		},
    		
    		_returnUlWidth:function(el) {
    			switch(opts.ulWidth) {
    				case "auto" :
    					ULWidth = parseInt(el.parent().outerWidth());
    					break;
    				default :
    					ULWidth = parseInt(opts.ulWidth);
    			}
    			return ULWidth;
    		},
    		
    		_animateText:function(el) {
    			var paddingInit = parseInt(el.css('padding-left'));
    			
    			el.hover(function(){
    				$(this)
    				.stop(true,true)
    				.animate({
    					paddingLeft: paddingInit + opts.paddingLeft
    				}, 100);
    			}, function(){
    				$(this)
    				.stop(true,true)
    				.animate({
    					paddingLeft:paddingInit
    				}, 100);
    			});
    		},
    		
    		_isReadable:function(){
    			if($("a.fNiv").length > 0)	return true;
    			else return false;
    		},
    		
    		_error:function(){
    			alert('Please, check you have the \'.fNiv\' class on your first level links.');
    		}
    	};
    	
    	jQuery.fn.jMenu = function(options){
    		if($.jMenu._isReadable())
    			$.jMenu.init(options);
    		else
    			$.jMenu._error();
    	};
    })(jQuery);

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well, i add margin: -163px 0 0 ; into #jMenu li ul section of css but it's work only in main menu, the submenus are appearing in wrong places and all is working only on Opera, mozilla have some errors


  •  

    Tags for this Thread

    Posting Permissions

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