Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    Okay lol so since i got redirected to this part of the forum,, this is my problem atm. I'm fairly new at webdesigning so sorry if I ask some stupid questions. I got myself a menu from dhtmlgoodies.com, a slide menu, and ive been customizing it to what i want it to be. Now the problem i have is that my submenu's wont link to my iframe,, in fact they dont link to anything at all,, unless i rightclick on the submenubutton and then click the option "open", also when i test my menu i found out that the mainmenu buttons that contain a submenu need to be doubleclicked to open the page thats under the mainbutton. How do i fix this.
    Then next thing is just for making it look alill nicer, i wanna make like a hover effect and select effect that changes my background into a different background. How do i do this and where should i put it in the code??
    This is my code so far:
    HTML 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">
    <head> <style type="text/css">
    	html{
    		height:100%;
    	}
    	body{
    	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
    	font-size:0.8em;
    	margin:0px;
    	padding:0px;
    	background-color:ffffff;
    	height:100%;
    	text-align:center;
    	margin-top: 15px;
    	}
    	.clear{
    		clear:both;
    	}
    
    	#mainContainer{
    	width:147px;
    	text-align:left;
    	margin:0 auto;
    	background-color: #00000;
    	height:100%;
    	}
    	#leftMenu{
    	width:147px;
    	padding-left:0px;
    	padding-right:0px;
    	float:left;
    	}
    	#mainContent{
    	width: 520px;
    	padding-right:10px;
    	float:left;
    	}
    	/*
    	General rules
    	*/
    
    	/* Active menu item */
    	#dhtmlgoodies_slidedown_menu .dhtmlgoodies_activeItem {
    	font-weight:bold;
    	color: red;
    	}
    
    	#dhtmlgoodies_slidedown_menu li{
    		list-style-type:none;
    		position:relative;
    	}
    	#dhtmlgoodies_slidedown_menu ul{
    		margin:0px;
    		padding:0px;
    		position:relative;
    
    	}
    
    	#dhtmlgoodies_slidedown_menu div{
    		margin:0px;
    		padding:0px;
    	}
    	/* 	Layout CSS */
    	#dhtmlgoodies_slidedown_menu{
    		width:147px;
    	}
    
    	/* All A tags - i.e menu items. */
    	#dhtmlgoodies_slidedown_menu a{
    		color: #000;
    		text-decoration:none;
    		display:block;
    		clear:both;
    		width:170px;
    		padding-left:2px;
    	}
    
    	/* Active menu item */
    	#dhtmlgoodies_slidedown_menu .dhtmlgoodies_activeItem {
    	font-weight:bold;
    	color: #a6d7f9;
    	}
    
    	/*
    	A tags
    	*/
    	#dhtmlgoodies_slidedown_menu .slMenuItem_depth1{	/* Main menu items */
    	margin-top:1px;
    	border-bottom:1px solid #000;
    	font-weight:bold;
    	background-image: url(../Site/images/buttonstd.png);
    	height: 34px;
    	width: 137px;
    	line-height: 34px;
    	vertical-align: middle;
    	padding-left: 10px;
    	font-family: ATFloridianScript;
    	font-size: 21px;
    	color: #046cb6;
    	text-align: center;
    	}
    	#dhtmlgoodies_slidedown_menu .slMenuItem_depth2{	/* Sub menu items */
    	margin-top:1px;
    	background-image: url(../Site/images/submenustd.png);
    	height: 21px;
    	width: 130px;
    	text-align: center;
    	font-family: ATFloridianScript;
    	font-size: 18px;
    	color: #046cb6;
    	}
    	#dhtmlgoodies_slidedown_menu .slMenuItem_depth3{	/* Sub menu items */
    		margin-top:1px;
    		font-style:italic;
    		color:blue;
    	}
    	#dhtmlgoodies_slidedown_menu .slMenuItem_depth4{	/* Sub menu items */
    		margin-top:1px;
    		color:red;
    	}
    	#dhtmlgoodies_slidedown_menu .slMenuItem_depth5{	/* Sub menu items */
    		margin-top:1px;
    	}
    
    	/* UL tags, i.e group of menu utems.
    	It's important to add style to the UL if you're specifying margins. If not, assign the style directly
    	to the parent DIV, i.e.
    
    	#dhtmlgoodies_slidedown_menu .slideMenuDiv1
    
    	instead of
    
    	#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul
    	*/
    
    	#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul{
    		padding:1px;
    	}
    	#dhtmlgoodies_slidedown_menu .slideMenuDiv2 ul{
    		margin-left:5px;
    		padding:1px;
    	}
    	#dhtmlgoodies_slidedown_menu .slideMenuDiv3 ul{
    		margin-left:10px;
    		padding:1px;
    	}
    	#dhtmlgoodies_slidedown_menu .slMenuItem_depth4 ul{
    		margin-left:15px;
    		padding:1px;
    	}
    </style>
    	<script type="text/javascript">
    	/************************************************************************************************************
    	Slide down menu
    	Copyright (C) October 2005  DTHMLGoodies.com, Alf Magne Kalleland
    
    	This library is free software; you can redistribute it and/or
    	modify it under the terms of the GNU Lesser General Public
    	License as published by the Free Software Foundation; either
    	version 2.1 of the License, or (at your option) any later version.
    
    	This library is distributed in the hope that it will be useful,
    	but WITHOUT ANY WARRANTY; without even the implied warranty of
    	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
    	Lesser General Public License for more details.
    
    	You should have received a copy of the GNU Lesser General Public
    	License along with this library; if not, write to the Free Software
    	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
    
    	Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
    	written by Alf Magne Kalleland.
    
    	Alf Magne Kalleland, 2010
    	Owner of DHTMLgoodies.com
    
    	************************************************************************************************************/
    var expandFirstItemAutomatically = false;	// Expand first menu item automatically ?
    var initMenuIdToExpand = false;	// Id of menu item that should be initially expanded. the id is defined in the <li> tag.
    var expandMenuItemByUrl = true;	// Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand
    
    
    var initialMenuItemAlwaysExpanded = true;
    
    var dhtmlgoodies_slmenuObj;
    var divToScroll = false;
    var ulToScroll = false;
    var divCounter = 1;
    var otherDivsToScroll = new Array();
    var divToHide = false;
    var parentDivToHide = new Array();
    var ulToHide = false;
    var offsetOpera = 0;
    if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;
    var slideMenuHeightOfCurrentBox = 0;
    var objectsToExpand = new Array();
    var initExpandIndex = 0;
    var alwaysExpanedItems = new Array();
    
    var dg_activeItem = null;
    
    function popMenusToShow()
    {
    	var obj = divToScroll;
    	var endArray = new Array();
    	while(obj && obj.tagName!='BODY'){
    		if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
    			var objFound = -1;
    			for(var no=0;no<otherDivsToScroll.length;no++){
    				if(otherDivsToScroll[no]==obj){
    					objFound = no;
    				}
    			}
    			if(objFound>=0){
    				otherDivsToScroll.splice(objFound,1);
    			}
    		}
    		obj = obj.parentNode;
    	}
    }
    
    function showSubMenu(e,inputObj)
    {
    
    	if(this && this.tagName)inputObj = this.parentNode;
    	if(inputObj && inputObj.tagName=='LI'){
    		divToScroll = inputObj.getElementsByTagName('DIV')[0];
    		for(var no=0;no<otherDivsToScroll.length;no++){
    			if(otherDivsToScroll[no]==divToScroll)return;
    		}
    	}
    	hidingInProcess = false;
    	if(otherDivsToScroll.length>0){
    		if(divToScroll){
    			if(otherDivsToScroll.length>0){
    				popMenusToShow();
    			}
    			if(otherDivsToScroll.length>0){
    				autoHideMenus();
    				hidingInProcess = true;
    			}
    		}
    	}
    	if(divToScroll && !hidingInProcess){
    		divToScroll.style.display='';
    		otherDivsToScroll.length = 0;
    		otherDivToScroll = divToScroll.parentNode;
    		otherDivsToScroll.push(divToScroll);
    		while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
    			if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
    				otherDivsToScroll.push(otherDivToScroll);
    
    			}
    			otherDivToScroll = otherDivToScroll.parentNode;
    		}
    		ulToScroll = divToScroll.getElementsByTagName('UL')[0];
    		if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub();
    	}
    
    	if(e || inputObj) {
    
    		if(dg_activeItem) {
    			dg_activeItem.className = dg_activeItem.className.replace('dhtmlgoodies_activeItem','');
    		}
    		var aTags = inputObj.getElementsByTagName('A');
    		if(aTags.length>0) {
    			aTags[0].className = aTags[0].className + ' dhtmlgoodies_activeItem';
    			dg_activeItem = aTags[0];
    
    		}
    
    	}
    
    	return false;
    
    
    }
    
    
    
    function autoHideMenus()
    {
    	if(otherDivsToScroll.length>0){
    		divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
    		parentDivToHide.length=0;
    		var obj = divToHide.parentNode.parentNode.parentNode;
    		while(obj && obj.tagName=='DIV'){
    			if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
    			obj = obj.parentNode.parentNode.parentNode;
    		}
    		var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
    		if(tmpHeight<0)tmpHeight=0;
    		if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight  + 'px';
    		ulToHide = divToHide.getElementsByTagName('UL')[0];
    		slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
    		scrollUpMenu();
    	}else{
    		slideMenuHeightOfCurrentBox = 0;
    		showSubMenu();
    	}
    }
    
    
    function scrollUpMenu()
    {
    
    	var height = divToHide.offsetHeight;
    	height-=15;
    	if(height<0)height=0;
    	divToHide.style.height = height + 'px';
    
    	for(var no=0;no<parentDivToHide.length;no++){
    		parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
    	}
    	if(height>0){
    		setTimeout('scrollUpMenu()',5);
    	}else{
    		divToHide.style.display='none';
    		otherDivsToScroll.length = otherDivsToScroll.length-1;
    		autoHideMenus();
    	}
    }
    
    function scrollDownSub()
    {
    	if(divToScroll){
    		var height = divToScroll.offsetHeight/1;
    		var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height));
    		height = height +offsetMove ;
    		divToScroll.style.height = height + 'px';
    
    		for(var no=1;no<otherDivsToScroll.length;no++){
    			var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
    			otherDivsToScroll[no].style.height = tmpHeight + 'px';
    		}
    		if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',5); else {
    			divToScroll = false;
    			ulToScroll = false;
    			if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
    				initExpandIndex++;
    
    				showSubMenu(false,objectsToExpand[initExpandIndex]);
    			}
    		}
    	}
    }
    
    function initSubItems(inputObj,currentDepth)
    {
    	divCounter++;
    	var div = document.createElement('DIV');	// Creating new div
    	div.style.overflow = 'hidden';
    	div.style.position = 'relative';
    	div.style.display='none';
    	div.style.height = '1px';
    	div.id = 'slideDiv' + divCounter;
    	div.className = 'slideMenuDiv' + currentDepth;
    	inputObj.parentNode.appendChild(div);	// Appending DIV as child element of <LI> that is parent of input <UL>
    	div.appendChild(inputObj);	// Appending <UL> to the div
    	var menuItem = inputObj.getElementsByTagName('LI')[0];
    	while(menuItem){
    		if(menuItem.tagName=='LI'){
    			var aTag = menuItem.getElementsByTagName('A')[0];
    			aTag.className='slMenuItem_depth'+currentDepth;
    			var subUl = menuItem.getElementsByTagName('UL');
    			if(subUl.length>0){
    				initSubItems(subUl[0],currentDepth+1);
    			}
    			aTag.onclick = showSubMenu;
    		}
    		menuItem = menuItem.nextSibling;
    	}
    }
    
    function initSlideDownMenu()
    {
    	dhtmlgoodies_slmenuObj = document.getElementById('dhtmlgoodies_slidedown_menu');
    	dhtmlgoodies_slmenuObj.style.visibility='visible';
    	var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];
    	var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
    	mainItemCounter = 1;
    	while(mainMenuItem){
    		if(mainMenuItem.tagName=='LI'){
    			var aTag = mainMenuItem.getElementsByTagName('A')[0];
    			aTag.className='slMenuItem_depth1';
    			var subUl = mainMenuItem.getElementsByTagName('UL');
    			if(subUl.length>0){
    				mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
    				initSubItems(subUl[0],2);
    				aTag.onclick = showSubMenu;
    				mainItemCounter++;
    			}
    		}
    		mainMenuItem = mainMenuItem.nextSibling;
    	}
    
    	if(location.search.indexOf('mainMenuItemToSlide')>=0){
    		var items = location.search.split('&');
    		for(var no=0;no<items.length;no++){
    			if(items[no].indexOf('mainMenuItemToSlide')>=0){
    				values = items[no].split('=');
    				showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));
    				initMenuIdToExpand = false;
    			}
    		}
    	}else if(expandFirstItemAutomatically>0){
    		if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
    			showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
    			initMenuIdToExpand = false;
    		}
    	}
    
    	if(expandMenuItemByUrl)
    	{
    		var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
    		for(var no=0;no<aTags.length;no++){
    			var hrefToCheckOn = aTags[no].href;
    			if(location.href.indexOf(hrefToCheckOn)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
    				initMenuIdToExpand = false;
    				var obj = aTags[no].parentNode;
    				while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
    					if(obj.tagName=='LI'){
    						var subUl = obj.getElementsByTagName('UL');
    						if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
    						if(subUl.length>0){
    							objectsToExpand.unshift(obj);
    						}
    					}
    					obj = obj.parentNode;
    				}
    				showSubMenu(false,objectsToExpand[0]);
    				break;
    			}
    		}
    	}
    
    	if(initMenuIdToExpand)
    	{
    		objectsToExpand = new Array();
    		var obj = document.getElementById(initMenuIdToExpand)
    		while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
    			if(obj.tagName=='LI'){
    				var subUl = obj.getElementsByTagName('UL');
    				if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
    				if(subUl.length>0){
    					objectsToExpand.unshift(obj);
    				}
    			}
    			obj = obj.parentNode;
    		}
    
    		showSubMenu(false,objectsToExpand[0]);
    
    	}
    
    }
    	window.onload = initSlideDownMenu;
    	</script>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
    
    <body>
    <div id="mainContainer">
    <div id="leftMenu">
    		<!-- START OF MENU -->
    		<div id="dhtmlgoodies_slidedown_menu">
    			<ul>
    				<li><a href="home.html" target="tekst">Home</a></li>
    				<li><a href="aboutus.html" target="tekst">About Us</a></li>
    				<li><a href="reuen.html" target="tekst">Dogs</a>
    					<ul>
    						<li><a href="reuen.html" target="tekst">Reuen</a></li>
    						<li><a href="teven.html" target="tekst">Teven</a></li>
    						<li><a href="inmemoriam" target="tekst">In Memoriam</a></li>
    					</ul>
    				</li>
    				<li><a href="#">Puppies</a>
    					<ul>
    						<li><a href="beschikbaar.html" target="tekst">Beschikbaar</a></li>
    						<li><a href="verwacht.html" target="tekst">Verwacht</a></li>
    						<li><a href="nesten.html" target="tekst">Vorige Nesten</a></li>
    					</ul>
    				</li>
    				<li><a href="shows.html" target="tekst">Shows</a>
                    	<ul>
                        	<li><a href="negen.html" target="tekst">2009</a></li>
                            <li><a href="tien.html" target="tekst">2010</a></li>
                            <li><a href="elf.html" target="tekst">2011</a></li>
                            <li><a href="handling.html" target="tekst">Handling</a></li>
                    	</ul>
                   <li><a href="photos.html" target="tekst">Photos</a></li>
                   <li><a href="#">Links</a>
                   		<ul>
                        	<li><a href="lhasa.html" target="tekst">Lhasa Apso</a></li>
                            <li><a href="shihtzu.html" target="tekst">Shih-Tzu</a></li>
                            <li><a href="ovrassen.html" target="tekst">Overige Rassen</a></li>
                            <li><a href="clubs.html" target="tekst">Clubs</a></li>
                            <li><a href="overig.html" target="tekst">Overig</a></li>
                        </ul> 
              <li><a href="contact.html" target="tekst">Contact</a>
                   		<ul>
                       	  <li><a href="guestbook.html" target="tekst">Guestbook</a></li>
                        </ul>            
                   </li>
               </ul>                
    </div>
    PS. is there a way to rewrite Java into HTML so theres a 100% ensurance that every1 will be able to see the menu?? If so,, how should i do it and is there a program for it maybe that will do it??

  2.  

  3. #2
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    Problem solved :surprised: i had to change return: false to return: true in the code lol


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com