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 5 of 5

Thread: Menu CSS

  1. #1
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    Hi all,, sooo... I've been working on a slide down menu thats HTML and CSS based so I dont have the problem people can't see it. Before I had a flash based slide down menu (same style as I have now).
    My menu has custom made buttonbackgrounds for both menu and submenu. Now my question is... my old menu had hover and select effects (different background for both menu and submenu buttons). How do I make the same effect with CSS,, whats the code and where do I have to put it in the code.
    (My menu is set to have the CSS and the HTML in one page)

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    i could give a more detailed reply if you posted the code for your menu but all you really need is to use a:hover . you will be told you can use :hover on any css but IE has poor support for hover outside the <a> tag. it can work but i recommend just using the <a> tag. if your link does not go to the edges of the <li> just add display: block; to the css for the a tag.

    ul.menu li a { display: block; overflow: hidden; background: url(whatever1); }
    ul.menu li a:hover { background: url(whatever2); }

    while($get_it !== true){ continue; }

  4. #3
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    Im quite new in designing websites lol,, actually this is the 1st one im making lol. Ehh... if i put the code here could you show me where to put the codes for the hover. Also,, Im just integrating my menu in my website,, but right now I've basically found 2 problems. A) My submenus dont work... when i click on them they just dont load in my iframe,, ive already tried to see if it was the iframe linking but even with target="_blank" it doesnt work... Only way I saw it did work,, was by rightclicking on the submenu and then choose the option "open" but then again thats not what im trying to make lol. Also the Menu's that have submenus under them, wont load untill you double click on them... is there a way to make them load while single clicking??

    Anyways heres the full code of my menu... Hope any1 can help me
    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>

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    ok. well thats not a css problem. i don't use javascript enough to help you with this. you may post it in the scripting/javascript section.

    while($get_it !== true){ continue; }

  6. #5
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    Ive fixed the problem with the linking of the menu...
    Tho... I would like to recall on your css hover once more tho,, ive been trying it, but i cant really find the place where i should put it to make it work >.<
    (cant totally understand menu builds yet lol)
    Could you help me out with that once more maybe??


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 04:24 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com