7 replies [Last post]
Ankabout
Offline
newbie
Last seen: 17 years 40 weeks ago
Joined: 2004-08-19
Posts: 4
Points: 0

Hey, I've been busy working on a menu using an unordered list, but I'm running into problems.

I am making a list with a cutom image as the bullet, and on hover it changes to a different bullet. Each menu item should have a submenu with normal disc bullets in a certain colour. I hope that makes sense, maybe this SC helps:

Menu item 3 is being hovered here.

This is the code I used for that:

ul.menu
{
margin: 0px 10px;
padding: 0px 0px 5px;
font-size: 15px;
font-family: tahoma, times new roman;
font-weight: bold;
text-decoration: none;
color: #000000;
}

ul.submenu
{
margin: 0px 10px 0px 12px;
padding: 0px 0px 5px;
font-size: 12px;
font-family: tahoma, times new roman;
font-weight: normal;
text-decoration: none;
color: #FF0000;
list-style-type: disc
}

li.four a
{
list-style-image: url(images/bullet_4.jpg);
text-decoration: none;
color: #000000;
}

li.four a:hover
{
list-style-image: url(images/bullet_4_over.jpg);
text-decoration: none;
color: #000000;
}

li.foursub a
{
list-style-image: none;
}

li.foursub a:hover
{
list-style-image: none;
margin: 0px 0px 0px 3px;
}

<ul class="menu">
<li class="one"><a href="index.php">&nbsp;Menu 1</a></li>
<li class="two"><a href="index.php">&nbsp;Menu 2</a></li>
<li class="three"><a href="index.php">&nbsp;Menu 3</a></li>
<li class="four"><a href="index.php">&nbsp;Menu 4</a>
  <ul class="submenu">
  <li class="foursub"><a href="index.php">Menu 4 part one</a></li>
  <li class="foursub"><a href="index.php">Menu 4 part 2</a></li>
  <li class="foursub"><a href="index.php">Menu 4 part 3</a></li></ul></li>
<li class="five"><a href="index.php">&nbsp;Menu 5</a></li>
</ul>

I only included the code for menu item 4 but I'm sure you can work out the rest.

Now I have a number of questions:

1. Is there a way to do this without a class for each and every menu colour?

2. It seems that in order to get the submenu to have the right color and not use an image, I need to make a <ul> class for each submenu colour AS WELL AS separate <li> classes for each color. What can I do to change this?

3. Am I being really difficult trying to do something that's way easier than this?

brockly
Offline
Regular
Kent England
Last seen: 17 years 40 weeks ago
Kent England
Joined: 2004-08-18
Posts: 22
Points: 0

Different List Styles

Is this more helpfull

<style type="text/css">



.menutitle{
	cursor:pointer;
	margin-bottom:0px;
	background-color:#212D50;
	color:#FFFFCC;
	font-family:Verdana, sans-serif;
	font-size:8pt;
	font-weight:bold;
	text-align:left;
	padding:5px;
	border-bottom:1px solid #330000;
}
.menutitlehover{
	cursor:pointer;
	margin-bottom:0px;
	background-color:#330000;
	color:#FFFFFF;
	font-family:Verdana, sans-serif;
	font-size:8pt;
	font-weight:bold;
	text-align:left;
	padding:5px;
	border-bottom:1px solid #330000;
}

.submenu{
	margin-bottom:0px;
	color:#FFFFCC;
	text-align:left;
}

.suboption{
	padding:1px;
	padding-left:5px;
	color:#FFFFCC;
	background-color:#55698A;
	font-size:8pt;
	text-align:left;
	font-weight:bold;
	cursor:pointer;
	letter-spacing:1px;
}

.suboptionhover{
	padding:1px;
	padding-left:5px;
	color:#212D50;
	background-color:#CCFFFF;
	font-size:8pt;
	text-align:left;
	font-weight:bold;
	cursor:pointer;
	letter-spacing:1px;
}




//-->

</STYLE>

then in the body

<script type="text/javascript">
function nav_on(name)
{
	name.className = "menutitlehover";
}
function nav_off(name)
{
	name.className = "menutitle";	
}
</script>

<script type="text/javascript">



if (document.getElementById){ 
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); 
		if(el.style.display != "block"){ 
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") 
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

</script>

then for the menu

<div id="masterdiv">

<div class="menutitle" onmouseover="nav_on(this)" onmouseout="nav_off(this)" onclick="SwitchMenu('sub1')">Menu 1</div>
    <span class="submenu" id="sub1">
		<div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location('http:// your url  ')">
			<img src="your img.gif"> Menu 1 prt 1</a></div>
		<div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location('http://your url ')">
			 <img src="your img.gif"> Menu 1 prt 2</a></div>
		<div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location('http://your url ')">
			<img src="your img.gif"> Menu 1 prt 3</a></div>
	</span>	
	

<div class="menutitle" onmouseover="nav_on(this)" onmouseout="nav_off(this)" onclick="SwitchMenu('sub2')">Menu 1</div>
    <span class="submenu" id="sub2">
		<div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location('http:// your url  ')">
			<img src="your img.gif"> Menu 2 prt 1</a></div>
		<div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location('http://your url ')">
			 <img src="your img.gif"> Menu 2 prt 2</a></div>
		<div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location('http://your url ')">
			<img src="your img.gif"> Menu 2 prt 3</a></div>
	</span>


<div class="menutitle" onmouseover="nav_on(this)" onmouseout="nav_off(this)" onclick="SwitchMenu('sub2')">Menu 1</div>
    <span class="submenu" id="sub2">
		<div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location('http:// your url  ')">
			<img src="your img.gif"> Menu 3 prt 1</a></div>
		<div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location('http://your url ')">
			 <img src="your img.gif"> Menu 3 prt 2</a></div>
		<div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location('http://your url ')">
			<img src="your img.gif"> Menu 3 prt 3</a></div>
	</span>		
</div>

Ankabout
Offline
newbie
Last seen: 17 years 40 weeks ago
Joined: 2004-08-19
Posts: 4
Points: 0

Different List Styles

Thanks brockly that does help a bit, it will save me using some weird code to make the menu work in the end, but I still don't get how to use what you gave me to work on my menu with the CSS bullets and all.

My javascript is about as good as my quantum physics so I have no idea how to implement your code into my menu, or vice-versa...

Anyone care to help?

brockly
Offline
Regular
Kent England
Last seen: 17 years 40 weeks ago
Kent England
Joined: 2004-08-18
Posts: 22
Points: 0

Different List Styles

i have added an attachment which is an external java file, so forget the java script in my post before

Quote:
<script type="text/javascript"> 
function nav_on(name) 
{ 
   name.className = "menutitlehover"; 
} 
function nav_off(name) 
{ 
   name.className = "menutitle";    
} 
</script> 

<script type="text/javascript"> 



if (document.getElementById){ 
document.write('<style type="text/css">\n') 
document.write('.submenu{display: none;}\n') 
document.write('</style>\n') 
} 

function SwitchMenu(obj){ 
   if(document.getElementById){ 
   var el = document.getElementById(obj); 
   var ar = document.getElementById("masterdiv").getElementsByTagName("span"); 
      if(el.style.display != "block"){ 
         for (var i=0; i<ar.length; i++){ 
            if (ar[i].className=="submenu") 
            ar[i].style.display = "none"; 
         } 
         el.style.display = "block"; 
      }else{ 
         el.style.display = "none"; 
      } 
   } 
} 

</script>

you can not send .js attachments so i have saved it as a text file all you need to do is open it in note pad and save it as a .js . To do this you must change the save type as to all files then put the Extension .js at the end, you probly know this anyway.

upload the js file to your web site and in the pages using the menu include this in the head section

<SCRIPT language="JavaScript" SRC="menu.js"></SCRIPT>

Ankabout
Offline
newbie
Last seen: 17 years 40 weeks ago
Joined: 2004-08-19
Posts: 4
Points: 0

Different List Styles

Thanks brockly, but I was able to make your menu work fine. The problem is getting it to work and look like the screenshot of the menu I posted. I can see the general idea how you did it, but how to make it work with my CSS images and all, I have no idea. I need to know what to change to make the menu look like mine, using your method.

Ankabout
Offline
newbie
Last seen: 17 years 40 weeks ago
Joined: 2004-08-19
Posts: 4
Points: 0

Different List Styles

I had a look at the code some more and realised that I can simply add another menu item which automatically works if I give it a sub3 name.

What happens, however is that only the 1st submenu takes the CSS code properly, the rest just stays blue with an underline, the IE default.

How do make consecutive menu's and submenu's have different appearances each?

brockly
Offline
Regular
Kent England
Last seen: 17 years 40 weeks ago
Kent England
Joined: 2004-08-18
Posts: 22
Points: 0

Different List Styles

to do that you would have to change the suboption part of the css add more to get your desiered affect.

brockly
Offline
Regular
Kent England
Last seen: 17 years 40 weeks ago
Kent England
Joined: 2004-08-18
Posts: 22
Points: 0

Different List Styles

to do that you would have to change the suboption part of the css add more to get your desiered affect.