| Re: Petit Bug MultiMenu (2 MultiMenu gardent la même largeur) |
Titre du sujet : Re: Petit Bug MultiMenu (2 MultiMenu gardent la même largeur)
par blueteen sur 20/10/2006 08:43:26
voilà, c'est ok comme ça.
j'ai fait la manip' sur un site de test, pour les menus 11 et 12.
si tu veux l'utiliser pour d'autres menus, tu as juste à copier les css existants, et remplacer les nombres dans ces feuilles de styles. (renomme aussi les feuilles de styles)
par exemple, tu édites : basic_dd11.css et basic_dd_ie11.css
et tu remplaces tous les 11 par le nombre que tu veux (il y a 15 valeurs à changer : avec un éditeur de texte, tu peux faire un changement groupé, ça prendra 5 secondes)
je vais coller ci-dessous, le nouveau template et les feuilles de styles pour le bloc 11. (feuilles de style pour IE, et celle pour les autres navigateurs)
voici le nouveau template pour le menu horizontal css
modules/multiMenu/templates/multimenu_dyn_horiz_css.html
<!-- Start multiMenu <{$block.mm}> -->
<!-- Thanks to http://www.stunicholls.myby.co.uk/ for this pure css menuhcss ! -->
<link rel="stylesheet" type="text/css" href="<{$xoops_url}>/modules/multiMenu/script/08/basic_dd<{$block.mm}>.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="<{$xoops_url}>/modules/multiMenu/script/08/basic_dd_ie<{$block.mm}>.css" />
<![endif]-->
<style type="text/css">
.menuhcss<{$block.mm}> ul li a:hover ul {
width:<{$block.block_size}>px;
}
.menuhcss<{$block.mm}> ul li a, .menuhcss ul li a:visited {
width:<{$block.block_size}>px;
}
.menuhcss<{$block.mm}> ul li:hover ul {
width:<{$block.block_size}>px;
}
</style>
<div class="menuhcss<{$block.mm}>">
<!-- Start multiMenu <{$block.mm}> -->
<{assign var=ul_main value=0}>
<{assign var=ul_sec value=0}>
<{foreach item=imenu from=$block.contents}>
<{if $imenu.submenu == 0}>
<{if $ul_sec == 1}></ul><{assign var=ul_sec value=0}><{/if}>
<{if $ul_sec == 1}><{assign var=ul_sec value=0}><{/if}>
<{if $ul_main == 1}>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<{assign var=ul_main value=0}>
<{/if}>
<{if $ul_main == 0}>
<{assign var=ul_main value=1}>
<{/if}>
<ul>
<li>
<a class="hide<{$block.mm}>" <{if $imenu.linkurl}>href="<{$imenu.linkurl}>"<{/if}> title="<{$imenu.alt_title}>"><{$imenu.image}> <{$imenu.title}></a>
<!--[if lte IE 6]>
<a href="<{$imenu.linkurl}>" title="<{$imenu.alt_title}>"><{$imenu.image}> <{$imenu.title}>
<table><tr><td>
<![endif]-->
<{elseif $imenu.submenu == 1 OR $imenu.submenu == 2}>
<{if $ul_sec == 0}><ul><{assign var=ul_sec value=1}><{/if}>
<li><a <{if $imenu.linkurl}>href="<{$imenu.linkurl}>"<{/if}> title="<{$imenu.alt_title}>"><{$imenu.image}> <{$imenu.title}></a></li>
<{elseif $imenu.submenu == 3}>
<{if $ul_sec == 0}><ul><{assign var=ul_sec value=1}><{/if}>
<div><li><a class="note<{$block.mm}>" <{if $imenu.linkurl}>href="<{$imenu.linkurl}>"<{/if}> title="<{$imenu.alt_title}>"><{$imenu.image}> <{$imenu.title}></a></li></div>
<{elseif $imenu.submenu == 4}>
<{if $ul_sec == 0}><ul><{assign var=ul_sec value=1}><{/if}>
<div><li><a class="cat<{$block.mm}>" <{if $imenu.linkurl}>href="<{$imenu.linkurl}>"<{/if}> title="<{$imenu.alt_title}>"><{$imenu.image}> <{$imenu.title}></a></li></div>
<{/if}>
<{/foreach}>
<{if $ul_main == 1 OR $ul_sec == 1}>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<{/if}>
<!-- End multiMenu <{$block.mm}> -->
</div>
pour la feuille : modules/multiMenu/script/08/basic_dd11.css
/* common styling */
/* set up the overall width of the menuhcss div, the font and the margins */
li { margin-left: 0;}
.menuhcss11 {
font-family: arial, sans-serif;
margin:0 0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menuhcss11 ul {
padding:0;
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menuhcss11 ul li {
float:left;
position:relative;
list-style-type: none;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menuhcss11 ul li a, .menuhcss11 ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
height:20px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:20px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menuhcss11 ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menuhcss li on hover */
.menuhcss11 ul li:hover a {
color:#fff;
background:#b3ab79;
}
/* make the sub menuhcss ul visible and position it beneath the main menuhcss list item */
.menuhcss11 ul li:hover ul {
display:block;
position:absolute;
top:21px;
}
/* style the background and foreground color of the submenu links */
.menuhcss11 ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menuhcss11 ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
/*
.menuhcss ul li:hover ul li.cat a {
background:#ffffff;
color:red;
}
.menuhcss ul li:hover ul li.note a {
background:#ffffff;
color:green;
}
*/
.menuhcss11 ul li:hover a.cat {
background:#ffffff;
color:red;
}
.menuhcss11 ul li:hover a.cat:hover{
background:#ffffff;
color:blue;
}
.menuhcss11 ul li:hover a.note {
background:#ffffff;
color:green;
}
.menuhcss11 ul li:hover a.note:hover {
background:#ffffff;
color:blue;
}
pour la feuille : modules/multiMenu/script/08/basic_dd_ie11.css
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menuhcss11 ul li a.hide11, .menuhcss11 ul li a:visited.hide11 {
display:none;
}
/* set the background and foreground color of the main menuhcss link on hover */
.menuhcss11 ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menuhcss ul visible and position it beneath the main menuhcss list item */
.menuhcss11 ul li a:hover ul {
display:block;
position:absolute;
top:22px;
left:0;
}
/* style the background and foreground color of the submenu links */
.menuhcss11 ul li a:hover ul li a {
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menuhcss11 ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}
.menuhcss11 ul li a:hover ul li a.cat11 {
background:#ffffff;
color:red;
}
.menuhcss11 ul li a:hover ul li a.cat11:hover {
background:#ffffff;
color:blue;
}
.menuhcss11 ul li a:hover ul li a.note11 {
background:#ffffff;
color:green;
}
.menuhcss11 ul li a:hover ul li a.note11:hover {
background:#ffffff;
color:blue;
}
|
|
