• 0

[Wordpress] Problem with the stylish of the submenu! HELP please!


Question

Hello every one! i having a problem using the ddsmoothmenu javascript code on my wordpress website. the problem is that i having wrong dimensions on the sub menu here you can see in the image

post-331966-0-77836100-1300726852.png

here the code of the java script

//** Smooth Navigational Menu- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//** Menu created: Nov 12, 2008

//** Dec 12th, 08" (v1.01): Fixed Shadow issue when multiple LIs within the same UL (level) contain sub menus: http://www.dynamicdrive.com/forums/showthread.php?t=39177&highlight=smooth

//** Feb 11th, 09" (v1.02): The currently active main menu item (LI A) now gets a CSS class of ".selected", including sub menu items.

//** May 1st, 09" (v1.3):
//** 1) Now supports vertical (side bar) menu mode- set "orientation" to 'v'
//** 2) In IE6, shadows are now always disabled

//** July 27th, 09" (v1.31): Fixed bug so shadows can be disabled if desired.


var ddsmoothmenu={

//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', 'down.gif', 0], right:['rightarrowclass', 'right.gif',0
transition: {overtime:200, outtime:200}, //duration of slide in/ out animation, in milliseconds
shadow: {enable:false, offsetx:5, offsety:5},

///////Stop configuring beyond here///////////////////////////

detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, //detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,

getajaxmenu:function($, setting){ //function to fetch external page containing the panel DIVs
	var $menucontainer=$('#'+setting.contentsource[0]) //reference empty div on page that will hold menu
	$menucontainer.html("Loading...")
	$.ajax({
		url: setting.contentsource[1], //path to external menu file
		async: true,
		error:function(ajaxrequest){
			$menucontainer.html('Errorching content. Server Response: '+ajaxrequest.responseText)
		},
		success:function(content){
			$menucontainer.html(content)
			ddsmoothmenu.buildmenu($, setting)
		}
	})
},


buildmenu:function($, setting){
	var smoothmenu=ddsmoothmenu
	var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
	$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
	var $headers=$mainmenu.find("ul").parentheadeheaders.hover(
		function(e){
			$(this).children('a:eq(0)').addClass('selected')
		},
		function(e){
			$(this).children('a:eq(0)').removeClass('selected')
		}
	)
	$headers.each(function(i){ //loop through each LI header
		var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
		var $subul=$(this).find('ul:eq(0)').css({display:'block'})
		this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
		this.istopheader=$curobj.parents("ul").length==1? true : false //is top level header?
		$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
		/*$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
			'<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
			+'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
			+ '" style="border:0;" />'
		)*/
		if (smoothmenu.shadow.enable){
			this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
			if (this.istopheader)
				$parentshadow=$(document.body)
			else{
				var $parentLi=$curobj.parents("li:eq(0)")
				$parentshadow=$parentLi.get(0).$shadow
			}
			this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'})  //insert shadow DIV and set it to parent node for the next shadow div
		}
		$curobj.hover(
			function(e){
				var $targetul=$(this).children("ul:eq(0)")
				this._offsets={left:$(this).offset().left, top:$(this).offset().top}
				var menuleft=this.istopheader && setting.orientation!='v'? 0 : this._dimensions.w
				menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader && setting.orientation!='v'? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
				if ($targetul.queue().length<=1){ //if 1 or less queued animations
					$targetul.css({left:menuleft+"pxdth:this._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
					if (smoothmenu.shadow.enable){
						var shadowleft=this.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
						var shadowtop=this.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : this._shadowoffset.y
						if (!this.istopheader &amp;&amp; ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
							this.$shadow.css({opacity:1})
						}
						this.$shadow.css({overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:this._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
					}
				}
			},
			function(e){
				var $targetul=$(this).children("ul:eq(0)")
				$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
				if (smoothmenu.shadow.enable){
					if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
						this.$shadow.children('div:eq(0)').css({opacity:0})
					}
					this.$shadow.css({overflow:'hidden'}).animate({height:0othmenu.transition.outtime)
				}
			}
		) //end hover
	}) //end $headers.each()
	$mainmenu.find("ul").css({display:'none'visible'})
},

init:function(setting){
	if (typeof setting.customtheme=="object" &amp;&amp; setting.customtheme.length==2){ //override default menu colors (default/hover) with custom set?
		var mainmenuid='#'+setting.mainmenuid
		var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid
		document.write('<stylee="text/css"&gt;\n'
			+mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n'
			+mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n'
		+'&lt;/style&gt;')
	}
	this.shadow.enable=(document.all &amp;&amp; !window.XMLHttpRequest)? false : this.shadow.enable //in IE6, always disable shadow
	jQuery(document).ready(function($){ //ajax menu?
		if (typeof setting.contentsource=="object"){ //if external ajax menu
			ddsmoothmenu.getajaxmenu($, setting)
		}
		else{ //else if markup menu
			ddsmoothmenu.buildmenu($, setting)
		}
	})
}

} //end ddsmoothmenu variable

//Initialize Menu instance(s):

and here is the code of my css

#mainMenu {
 position: absolute; 
 bottom: -80px; 
 left: 0px; 
 background: url(images/menu.png) no-repeat; 
 width: 961px; 
 height: 98px; 
 z-index: 10; 
 }

#mainMenu ul li{
	float:right;
}

#mainMenu ul li a {
	font-weight:bold;
	display:block;
	color:#ffffff;
	padding:25px 25px 0;
	font-size:15px;
}

#mainMenu ul li a span {
	font-size:10px;	
	color:#999;
	line-height:120%;

}

#mainMenu ul li a:hover {
	text-decoration:none;
	color:#2fc8ff;
}


#mainMenu.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
#mainMenu.ddsmoothmenu ul li{
position: relative;
float: left;
}

/*Top level menu link items style*/

* html #mainMenu.ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}


/*1st sub level menu*/
#mainMenu.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
padding-bottom:10px;
padding-right:10px;
background: url(images/secondarydropdown.png) repeat-y; box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border: 1px solid #232323; border-top: none;
/*border-bottom:1px solid #222;*/
}

/*Sub level menu list items (undo style from Top level List Items)*/
#mainMenu.ddsmoothmenu ul li ul li{
float: none;
display: list-item;
padding:0;
}


/* Sub level menu links style */
#mainMenu.ddsmoothmenu ul li ul li a, #mainMenu.ddsmoothmenu ul li ul li a:hover{
text-align:left;
margin:-5px;
/*background:#000;*/
line-height:100%;
height:10%;
font-size:13px;
display: block; padding: 22px 5px 15px 28px; color: #ffffff; font-family: Century Gothic, Arial, sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); background: url(images/secondary-dropdown-bullet.png) no-repeat 15px 27px;

}

#mainMenu.ddsmoothmenu ul li ul li a:hover {
	color:#1FA2E1;	
}

#mainMenu.ddsmoothmenu ul li ul li a.last, #mainMenu.ddsmoothmenu ul li ul li a.last:hover {
	border:none;
}

/* Holly Hack for IE \*/
* html #mainMenu.ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

also how i can make the submenu always be in front of the slider? i'm using nivo slider

thanks!!

0 answers to this question

Recommended Posts

There have been no answers to this question yet

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • hi thanks for input. those two modems are supported  thankfully. i really am leaning towards the b12 though since there's a few complaints of the cm3000 and its chipset (drops and whatnot), although those might just be vocal minority complaints.
    • A PDF or text file is all you need for Copilot to generate a PowerPoint for you in seconds by Usama Jawad Assistive AI is all the rage these days. In the past few hours alone, we have witnessed AI summaries on YouTube, context-aware text generation capabilities in Google Sheets, Gemini tools on the cloud, the availability of additional AI models with smarter defaults in Visual Studio, and chat summarization on WhatsApp. Now, Microsoft has detailed an upcoming Copilot capability in PowerPoint. Microsoft has outlined a streamlined approach to creating PowerPoint presentations within seconds using a PDF or text file, and a natural language prompt as input. Previously, you could just ground Word files for this purpose, so support for additional formats is certainly welcome. In order to generate a slide deck using Copilot, you can simply open a PowerPoint presentation in the platform of your choice and click the Copilot button. In the resulting Copilot pane, select the "Create a presentation from a file" option, which allows you to type in the name of a PDF or text file stored on the cloud or browse for files in OneDrive or SharePoint manually using the "Attach cloud files" button. You can then refine your prompt by adding details about items that you'd like Copilot to focus on and click the "Send" button. This will generate the slide deck which you can rearrange or add more topics to, before you create the final version of the presentation. Of course, this is a particularly useful feature in many scenarios including those which require you to create a slide deck based on some detailed documentation that you have already completed. That said, it's obviously worth vetting any content that Copilot creates, since data inaccuracy is still a concern when it comes to AI models. This feature is available to Insiders across PowerPoint for web, Windows, and Mac for the following versions: Windows: Version 2409 (Build 18025.20000) or later Mac: Version 16.88 (Build 24082514) or later That said, you do need an Enterprise Copilot license in order to utilize the AI assistant in this way.
    • >For instance, if you are watching a tutorial, you could ask for a summary or even for a quiz on the main points. At that point, the content creator should get their cut, Google. Instead: >If people are getting everything they need from a summary without ever clicking through, there's not much reason to watch the actual video. That means fewer views, less watch time, and less money. Do content creators get to write their own summaries or turn off Google's summary content thievery? Somehow I doubt it...
  • Recent Achievements

    • One Month Later
      jfam earned a badge
      One Month Later
    • First Post
      TheRingmaster earned a badge
      First Post
    • Conversation Starter
      Kavin25 earned a badge
      Conversation Starter
    • One Month Later
      Leonard grant earned a badge
      One Month Later
    • Week One Done
      pcdoctorsnet earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      549
    2. 2
      ATLien_0
      203
    3. 3
      +FloatingFatMan
      178
    4. 4
      Michael Scrip
      147
    5. 5
      Som
      118
  • Tell a friend

    Love Neowin? Tell a friend!