Modification SPRY MenuBar

F2 · 29/09/2009, 22h44

Salut à tous,

je suis en train de m'arracher les cheveux pour essayer d'arranger comme je veux le widget Spry Menubar sur ma page web.

ce que je veux faire : que la barre de menu principale fasse toujours la même largeur que la fenetre du browser

ce que j'ai fait : j'ai mis la width des items du menu à 20% (vu que j'ai 5 items dans le menu principal, cela occupe en toute logique 100% de la page)

ce qui pose problème : le fait d'avoir mis ce "20%" m'empêche de modifier la taille des items des sous-menus. voyez plutôt l'image jointe, c'est le résultat que j'ai actuellement.

http://panchit0.wordpress.com/files/2009/09/sample.jpg

voici le code de la feuille CSS qui vient avec le widget SpryMenuBar, que j'ai modifié quelque peu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 1em;
	cursor: default;
	width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li   /* NIVEAU I */
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: 20%;
	float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul    /* NIVEAU II */
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: auto;
	left: -1000em;
	position: absolute;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	float: none;
	background-color: transparent;
	text-align: left;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -3% 0 0 97%;
	width: 100%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}

et le code html correspondant. mais je ne pense pas qu'il y ait de problème là-dedans, c'est juste pour bien poser le contexte de mon problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<td height="50" colspan="3"><ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="../ES/index.html" class="MenuBarHorizontal">Inicio</a>          </li>
      <li><a href="../ES/porque.html">&iquest;Porque Renovable ?</a></li>
      <li><a href="../TestComoFunciona.html" class="MenuBarItemSubmenu">Como Funciona</a>
        <ul>
          <li><a href="../ES/comofunciona1.html">Eolico y Fotovoltaico</a></li>
          <li><a href="../ES/comofunciona2.html">Termico</a></li>
        </ul>
        </li>
      <li><a href="../ES/productos.html" class="MenuBarItemSubmenu">Productos</a>
          <ul>
            <li><a href="#" class="MenuBarItemSubmenu">Modulos Solares</a>
                <ul>
                  <li><a href="#">Mono/Policristallino</a></li>
                  <li><a href="#">CIGS</a></li>
              </ul>
            </li>
            <li><a href="#">Eolico</a></li>
            <li><a href="#" class="MenuBarItemSubmenu">Controladores</a>
                <ul>
                  <li><a href="#">STECA</a></li>
                  <li><a href="#">OUTBACK</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">Acumuladores</a>
                <ul>
                  <li><a href="#">Surrette/Rolls serie 4000</a></li>
                  <li><a href="#">Surrette/Rolls serie 5000</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">Inversores</a>
                <ul>
                  <li><a href="#">12 V</a></li>
                  <li><a href="#">24 V</a></li>
                  <li><a href="#">48 V</a></li>
              </ul>
            </li>
            <li><a href="#">Refrigeracion</a></li>
            <li><a href="#" class="MenuBarItemSubmenu">Colectores Termicos</a>
                <ul>
                  <li><a href="#">Domestico</a></li>
                  <li><a href="#">Industrial/Comercial</a></li>
                  <li><a href="#">Calentamiento albercas</a></li>
              </ul>
            </li>
            <li><a href="#">Bombeo</a></li>
            <li><a href="#">Sistemas predise&ntilde;ados</a></li>
          </ul>
      </li>
      <li><a href="../ES/contactanos.html">Contactanos</a></li>
    </ul>    </td>

Suggestions, critiques, idées, conseils, j'accepte tout, ça me fera forcément avancer !

Mon cuir chevelu vous dit merci.

**lefou4** · 30/09/2009, 13h43

Au niveau de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
ul.MenuBarHorizontal ul    /* NIVEAU II */
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: auto;
	left: -1000em;
	position: absolute;
}

as-tu essayé avec width: 100% ?

F2 · 30/09/2009, 18h10

salut,
oui j'avais déjà essayé et ça ne change rien.
en fait j'ai l'impression que les sous-menus héritent de la classe des items du menu principal, et du coup je peux pas modifier leur largeur... j'suis un peu perdu là.

**lefou4** · 02/10/2009, 18h45

Envoyé par F2

salut,
oui j'avais déjà essayé et ça ne change rien.
en fait j'ai l'impression que les sous-menus héritent de la classe des items du menu principal, et du coup je peux pas modifier leur largeur... j'suis un peu perdu là.

Désolé mais là je ne vois pas trop comment résoudre ce problème.

Modification SPRY MenuBar

CSS

Vue hybride

Discussions similaires

Partager

Partager