Rollover en menú expandible
Gente, tengo un menu expandible y el tema es que no puedo ha cer que que tenga un rollover, aca dejo el codigo para ver si tiran una onda.
Saludos y gracias.
<code>
CSS
<style>
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
.submenu{
margin-bottom: 0.5em;
}
</style></code>
<code>
JAVA
<script>
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style>\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"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar> 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>
</code>
<code>
HTML
<div>
<div>Site Menu</div>
<span class="submenu" id="sub1">
- <a href="new.htm">What's New</a><br>
- <a href="hot.htm">What's hot</a><br>
- <a href="revised.htm">Revised Scripts</a><br>
- <a href="morezone/">More Zone</a>
</span>
<div>FAQ/Help</div>
<span class="submenu" id="sub2">
- <a href="notice.htm">Usage Terms</a><br>
- <a href="faqs.htm">DHTML FAQs</a><br>
- <a href="help.htm">Scripts FAQs</a>
</span>
<div>Help Forum</div>
<span class="submenu" id="sub3">
- <a href="http://www.codingforums.com">Coding Forums</a><br>
</span>
<div>Cool Links</div>
<span class="submenu" id="sub4">
- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
- <a href="http://www.freewarejava.com">Freewarejava</a><br>
- <a href="http://www.cooltext.com">Cool Text</a><br>
- <a href="http://www.google.com">Google.com</a>
</span>
<img src="about.gif"><br>
<span class="submenu" id="sub5">
- <a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
- <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
- <a href="http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
</span>
</div>
</code>
Axel
Nadie :-? ?
iamgrimi
podrías poner el ejemplo y un jpg de como quieres que quede yasí sería mas fácil
Axel
Ojo, no quiero que quede de alguna forma, solo quiero que tenga rollover ya que no lo puedo cambiar! aca dejo un ejemplo
orange
Axel
Nadie :-? ?
Para mi una de las cosas fundamentales a la hora de pedir ayuda en un foro es tratar de ser claro y conciso.
Si yo abro un hilo y me encuentro una pregunta directa o un problema claro, a lo mejor me pongo a investigar para tratar de ayudarte.
Si lo que me encuentro es un chorro de código, HTML, CSS y JS para más inri, lo que me dan ganas es de cerrar la ventana del navegador.
Sólo en analizar lo que pones (porque no das muchos datos del problema) ya me tiraría un buen rato... como comprenderás al final la gente simplemente pasa.
Ojo, no te lo digo de malas, es simplemente un consejo. Ya he visto por aquí muchas preguntas y muchos problemas. Y sé las cosas que funcionan y las que no.
Axel
Orange, bien seguro que tienes razon, pero no fue que recurro al foro para q me solucionen problema y con respecto a la cantidad de código si es mucha de hecho cuando estaba presionando el boton enviar estaba en duda de hacerlo. Igualmente para mi el titulo del post creo que es claro, pero todo bien, no hay problema!. Thanx igual.
iamgrimi
Como ves tienes código CSS muy limitado:
<code>
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
.submenu{
margin-bottom: 0.5em;
}
.submenu{display: none;}</code>
trata agregando la funcin del CSS en a:hover en el identificador del menú, como dice orange este tema se ha tratado en muchas ocaciones y hay una sección d erecursos CSS como a list apart que te pueden ayudar muchisimo... te dejo el ejemplo:
<code>
.masterdiv ul li a:hover{
background-color: aqui el color en HEX;
}
</code>
y con eso es m{as que suficinte no vi mas de tu código así que checate los floats y displays porque a lo mejor te sale raro el color pero eso se arregla limpiando el CSS
Aqui habia un tut de como hacerlo hace un tiempo
http://alistapart.com/
Axel
Gracias, voy a chekear con eso a ver si funciona ahora. Thanx again.
iamgrimi
de nada y recuerda que http://www.google.com.mx/search?q=menu+css+rollover&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:es-ES:official&client=firefox-a siempre salva de estas....