Hola gente , he comprado una plantilla muy chula que utiliza css y javascript .
Estoy intentado averiguar como funciona el menú de arriba que hace lo siguiente:
Cuando entras en un enlace (contacto, quienes etc etc..) se queda un botón de color rojo encima de dicho elemento del menú (o enlace), he intentado averiguar como hace esto sin éxito. Al principio creía que era el javascript que viene vinculado en el html , pero despúes de borrar estos includes (o como se llamen en javascript) el menú sigue funcionando con este efecto, por lo que deduzco que todo lo hace el CSS.
Alguien tiene alguna idea de como consigue esto:
Este es el código html (fijarse que la clase current que es lo responsable de que salga el botón rojo está solo en "about us", pero a medida que pinchas en otro enlace cambia la clase current a este nuevo enlace, ya que viendo el código html del navegador veo como cambia la clase de item de menú).
HEAD
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
Código:
<div class="menu">
<ul>
<li><a href="index.html" >Main page</a></li>
<li><a href="index-1.html" class="current">About us</a></li>
<li><a href="index-2.html">Portfolio</a></li>
<li><a href="index-3.html">Plantings</a></li>
<li class="last"><a href="index-4.html">Contacts</a></li>
</ul>
</div>
Y el css de
.current es este (pongo todo el header por si algo se me escapa):
/*header*/
Código:
#header {font-size:0.8125em; color:#FFFFFF }
#header .logo{ margin:42px 0 0 0; position:absolute }
#header .menu{padding:72px 0 0 400px}
#header .menu1{margin:37px 0 0 400px; position:absolute}
#header ul{margin:0; padding:0; list-style:none;}
#header ul li{ margin:0; display:inline}
#header ul .last a{background:none}
#header ul li a{color:#2b2b2b; font-weight:bold; background:url(images/bg_menu.gif) top right no-repeat; text-decoration:none; width:99px; text-align:center; display:block; float:left; line-height:26px; padding-right:9px}
#header ul li a:hover { color:#fff; text-decoration:none; background:url(images/bg_menu-act.gif) top left no-repeat;}
#header ul li .current{ color:#fff; text-decoration:none; background:url(images/bg_menu-act.gif) top left no-repeat; }
#header ul .last a{width:99px; padding-right:0}
Mil gracias por la ayuda