Need someone to turn a regular css menu into a drop down menu with javascript.

[bensd]

Need someone to turn a regular css menu into a drop down menu with javascript.

The current naviagtion menu is here:

www.gercia.com/menu

Need someone to turn it into a drop down menu.

Please PM me if you can do this

 

[ZCCool4718]

How about I do you one better, how about I show you how to do the same thing that you want to do in javascript in nothing but css?

here is a css code

ul.makeMenu, ul.makeMenu ul {
  width: 130px;             
  border: 0px solid #000000;   
  background-color: #C0C0C0;     
  list-style: none;
  float: left;   
  padding-top:0px;
  padding-bottom:0px;
  padding-left:0px;
  padding-right:0px;       
  cursor: default;         
  margin-left: 0px;         
  margin-right: 0px;        
  margin-top: 0px;        
  margin-bottom: 0px;  
  width: auto;  
  top: 9px;       
  left: 5px;  
  color: #000000;               
}
ul.makeMenu li {
  list-style-type: none;   
  margin: 0px;              
  position: relative;   
  color: #000000;         
}
ul.makeMenu li > ul {    
  display: none;     
  position: absolute;  
  width: 100px;  
  top: 18px;           
  left: 5px;  
  filter:alpha(opacity=80);
  -moz-opacity:.80;
  opacity:.80;
  border: 1px solid #000;   
}
ul.makeMenu li:hover, ul.makeMenu li.CSStoHighlight {
  background-color: #C0C0C0;   
  color: #000000; 
  background: transparent;
}
ul.makeMenu ul.CSStoShow {  
  display: block;         
}
ul.makeMenu li:hover > ul {  
  display: block; 
}.makeMenu a:link {
	text-decoration: none;
	color: #000000;
	font-weight:bold;
}
.makeMenu a:hover {
	text-decoration: none;
	color: #707070;
}
.makeMenu a:visited {
	text-decoration: none;
	color: #000000;
	font-weight:bold;
}
.makeMenu a:active {
    text-decoration: none;
    color: #000000;
	font-weight:bold;
}{

and to make it all work here is the html code

<ul class="makeMenu">
			  <li><a href="#">Link 1</a>   
			  </li>
			</ul>
			<ul class="makeMenu">
			  <li><a href="#">Link 2</a>   
			    <ul>
					<li><a href="#">Link 3</a></li> 
					<li><a href="#">Link 4</a></li>
					<li><a href="#">Link 5</a></li>
			    </ul>
			  </li>
			</ul>

enjoy..

EDIT: BTW works in the stupid IE also.. damn M$ always ****en shit up..

 

[WhiteWebServices]

That should work, but unfortunately IE6 doesn't support the :hover pseudo-class on <li> elements, so it will break the site for ~45% of users. Not your fault though; blame Bill Gates.

 

[ZCCool4718]

I design my sites the way the should look not the way microcrap programs there browsers. So f-ck the 40 or 50 or what ever % its broken on.

it works in IE 7 and firefox 2 the only 2 browsers I care about, and before you say anything.. I don't care how many people use IE 6, I almost don't care about the IE 7 people but my clients do so..

BTW at the time I did this code, it worked in IE 6 so microcrap can go f them selfs for not even making there browsers work in the first place.

BTW I think I read somewere that someone new took over IE project, maybe they will make it standard this time in ie 8

oh edit, if you really want to try to fix it for the IE 6 losers do it with div tags it should work but takes about double the code I think..

 

[WhiteWebServices]

it works in IE 7 and firefox 2 the only 2 browsers I care about, and before you say anything.. I don't care how many people use IE 6, I almost don't care about the IE 7 people but my clients do so..

And your clients don't care about the ~45% of their customers that use IE6?

 

[ZCCool4718]

a few do then I tell them why mircocrap does there browsers and get them to use firefox, most of my clients are small company's that need intranet sites, most of them switch there full office over to firefox in witch I'm happy..

 

[WhiteWebServices]

Okay. If your clients don't have customers, then I see how you can get around the problem.

However, if you're going to (very kindly) post (potentially very useful) code for others to use, but the code won't work in IE6, perhaps you should include a warning about the lack of cross-browser support. Most people don't have the luxury of being able to turn away IE6 users.

 

[whitebark]

http://www.dynamicdrive.com/dynamicindex1/hover.htm

change it to suit your needs

 

[ZCCool4718]

intranet and internet are two different things m8, most of my clients - clients can't access the website I design.

intranet - "An intranet is a private computer network that uses Internet protocols, network connectivity to securely share part of an organization's information or operations with its employees. "intranet

Internet - "The Internet is a worldwide, publicly accessible network of interconnected computer networks that transmit data by packet switching using the standard Internet Protocol (IP)."Internet

I do intranet website design for mainly small and private company's, I do work like the company's forums, CMT systems, and more.

One thing I hate about doing it is not a lot of people can view my work for examples to get more work because most of my work is blocked off from the internet.

 

[fried-chicken]

check this site out, this guy is really good. takes his time to develop cross browser css elemets

http://www.cssplay.co.uk/menus/

emjoy

 

[ZannuZZi]

My suggestion is http://emedianow.com/
They are doing nice things.

 

[WhiteWebServices]

check this site out, this guy is really good. takes his time to develop cross browser css elemets

http://www.cssplay.co.uk/menus/

emjoy

I'm a Stu Nicholls fan too. Some great ideas there.

 

[paaaaaaaaaa]

I wish developers would start using flash some more for navigation. You can build some super sweet navs in flash in a tenth of the time it would take to get a css list menu to work across all browsers.

Did you know flash is brilliant for accessibility. It can be read perfectly by screen readers and tabbed through with a keyboard. Also using ajax frameworks will result in millions of websites having that similar slide down effect, flash can be a truly unique effect. So tell me why flash is not used more??? Oh yeah it costs and people don't like to pay for things in this modern internet world.