CSS/Javascript DropOVER menu

Posted on 2009-02-20
Last Modified: 2012-05-06
Hello experts,

I've been trying to get a vertical dropOVER menu working correctly.  I've done normal  dropdown's before but this time I need to have the menu expanding to the right of the element, not underneath like normal menu's do.

I've tried to Google it to no avail.  At this point it doesn't matter to me if it requires creating images.  Ideally I wanted something done in pure CSS and/or Javascript and/or whatever else; I just need to get this working.

Just for an example:

I made that site and I really like the dropdown there, but is there any way to modify it so instead of the menu dropping down, I could change X-Y coordinates to have it expand to the side instead?

I've included the Javascript and CSS files, as well as the header where the dropdown is happening.  I'm thinking modifications to that CSS file might do the trick?.

Help please :)
Question by:jpve
    LVL 16

    Accepted Solution


    Author Comment

    Thank you so much, the points are yours, but I've got a question if you don't mind:

    That's the temporary site I'm using it for.  Hovering over SEO Website Optimization expands 2 sub-links, then hovering over either on of those expands more.  Notice, however, when you hover over the sub-links to display the child links, it shifts the site about 50px to the left.

    I'm positive this is a CSS issue, but I'm not really sure how to solve it.  The page I'm working on has inline CSS styles being used, but in the site is also calling a default.css file from the root that I'm guessing is causing a conflict because notice if you hover spots in the content area, it will turn the bg color of a TD gray?

    Like I said, the points are yours - more if you can help me with part 2.  I've included both the page with the inline styles (it's actually a PHP include), and default.css.

    LVL 16

    Expert Comment

    Well, at the moment the whole menu is visible (in IE7 en FireFox).

    Are you testing with it?

    Author Comment

    I was testing it, but gave up and decided to try another script.  If anyone wants to help, I'm all ears :)

    It's the Suckerfish script, which I'm sure there are members here who are a whole lot more familiar with it than I am.  Here's what I've got done so far:

    If you hover over Website Usability, you'll see another menu expand "1", then hovering over that you'll see Menu Item 1, 2, 3, 4 and 5.  That's the part step I want to eliminate.  Instead of having that "1" menu, I'd like for what expands from the "1" menu to instead expand for Website Usability, if possible.

    This is my first attempt @ using the magic combo of CSS and lists, so wish me luck.  In the pasted code is superfish.js.  I've included the rest as files.
     * Superfish v1.4.8 - jQuery menu widget
     * Copyright (c) 2008 Joel Birch
     * Dual licensed under the MIT and GPL licenses:
    	$.fn.superfish = function(op){
    		var sf = $.fn.superfish,
    			c = sf.c,
    			$arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
    			over = function(){
    				var $$ = $(this), menu = getMenu($$);
    			out = function(){
    				var $$ = $(this), menu = getMenu($$), o = sf.op;
    					if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){$path);}
    			getMenu = function($menu){
    				var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
    				sf.op = sf.o[menu.serial];
    				return menu;
    			addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
    		return this.each(function() {
    			var s = this.serial = sf.o.length;
    			var o = $.extend({},sf.defaults,op);
    			o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
    				$(this).addClass([o.hoverClass,c.bcClass].join(' '))
    			sf.o[s] = sf.op = o;
    			$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
    				if (o.autoArrows) addArrow( $('>a:first-child',this) );
    			var $a = $('a',this);
    				var $li = $a.eq(i).parents('li');
    		}).each(function() {
    			var menuClasses = [c.menuClass];
    			if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
    			$(this).addClass(menuClasses.join(' '));
    	var sf = $.fn.superfish;
    	sf.o = [];
    	sf.op = {};
    	sf.IE7fix = function(){
    		var o = sf.op;
    		if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
    	sf.c = {
    		bcClass     : 'sf-breadcrumb',
    		menuClass   : 'sf-js-enabled',
    		anchorClass : 'sf-with-ul',
    		arrowClass  : 'sf-sub-indicator',
    		shadowClass : 'sf-shadow'
    	sf.defaults = {
    		hoverClass	: 'sfHover',
    		pathClass	: 'overideThisToUse',
    		pathLevels	: 1,
    		delay		: 800,
    		animation	: {opacity:'show'},
    		speed		: 'normal',
    		autoArrows	: true,
    		dropShadows : true,
    		disableHI	: false,		// true disables hoverIntent detection
    		onInit		: function(){}, // callback functions
    		onBeforeShow: function(){},
    		onShow		: function(){},
    		onHide		: function(){}
    		hideSuperfishUl : function(){
    			var o = sf.op,
    				not = (o.retainPath===true) ? o.$path : '';
    			o.retainPath = false;
    			var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
    			return this;
    		showSuperfishUl : function(){
    			var o = sf.op,
    				sh = sf.c.shadowClass+'-off',
    				$ul = this.addClass(o.hoverClass)
    			$ul.animate(o.animation,o.speed,function(){$ul);$ul); });
    			return this;

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Mobile App Development with PhoneGap

    PhoneGap can help you leverage your already existing HTML5, JavaScript, and CSS skills in order to create and deploy cross-platform mobile apps.This program comprehensively covers HTML5 mobile app development from top to bottom.

    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
    The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

    779 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

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now