D'après le tutoriel menu accordeon

Bonjour,
j'ai utilisé ce tuto:
menu accordeon.

Et je me demandais comment faire pour que ça se déroule vers le haut.

Si jamais vous avez une solution toute simple..

Merci.
Modifié par maika (27 Sep 2010 - 16:19)

Position absolue et une définition d'un départ bottom, le sous menu monte mais pas forcément à partir du menu...
Pas trouver mieux pour le moment.

Toujours sur ce menu j'ai modifié le subMenu avec un "position:absolute" Je trouve ça plus simpatique.
problème du coup ça passe pas si java est désactivé. J'ai cherché une solution pour finir par faire un script et un noscript sur le lien vers le fichier CSS et donc créer deux CSS..

Je trouve la solution vraiment moyenne, quelles seraient les autres possibilités?

Merci

ma première solution:

Le Java

<script type="text/javascript" src="jquery-1.4.1.js"></script> 
<script type="text/javascript"> 
<!-- 
$(document).ready( function () { 
    // On cache les sous-menus : 
    $(".navigation ul.subMenu, .navigation ul.subMenu2").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".navigation li.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".navigation li.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.subMenu:visible").length != 0) { 
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") }); 
        } 
         if ($(this).next("ul.subMenu2:visible").length != 0) { 
            $(this).next("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".navigation ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu2").slideDown("normal", function () { $(this).parent().addClass("open") }); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    });

} ) ; 
// --> 
</script>

Le HTML

<table>
<tr valign="top">
    <td>
    <ul class="navigation"> 
        <li class="toggleSubMenu"><span><?=$rubrique[2]?></span> 
            <ul class="subMenu"> 
                <li><a href="index.php?menu=21" title="">&bull; <?=$rubrique[21]?></a></li> 
                <li><a href="index.php?menu=22" title="">&bull; <?=$rubrique[22]?></a></li> 
                <li><a href="index.php?menu=23" title="">&bull; <?=$rubrique[23]?></a></li> 
                <li><a href="index.php?menu=24" title="">&bull; <?=$rubrique[24]?>n</a></li>
            </ul>
        </li> 
    </ul>
    </td>
</tr>
</table>

<div class="piedpage">
<table>
<tr valign="top">
    <td>
    <ul class="navigation2"> 
        <li class="toggleSubMenu2"><span><?=$rubrique[2]?></span>
            <ul class="subMenu2"> 
                <li><a href="index.php?menu=21" title="">&bull; <?=$rubrique[21]?></a></li> 
                <li><a href="index.php?menu=22" title="">&bull; <?=$rubrique[22]?></a></li> 
                <li><a href="index.php?menu=23" title="">&bull; <?=$rubrique[23]?></a></li> 
                <li><a href="index.php?menu=24" title="">&bull; <?=$rubrique[24]?>n</a></li> 
            </ul> 
        </li> 
    </ul>
    </td>
</tr>
</table>
</div>

Le CSS

.navigation { 
      margin: 0; 
      padding: 0; 
      list-style: none;
      background: #333; 
      color: #FFF;  
      width: 75px; 
      font: 0.5em "Trebuchet MS", sans-serif; 
      } 
.navigation a, .navigation span { 
      display: block; 
      padding: 4px 4px; 
      color: #FFF; 
      text-decoration: none; 
      background:#333 url(menu-item.png) left bottom no-repeat; 
      } 
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span { 
      background-image: url(menu-item-deroule.png); 
      } 
.navigation .open a, .navigation .open span { 
      background-image: url(menu-item-enroule.png); 
      } 
.navigation a:hover, .navigation a:focus, .navigation a:active { 
      text-decoration: underline; 
      } 
.navigation .subMenu { 
      background: #666 url(subMenu.png) 0 0 repeat-x; 
      font-size: 1em;
      position:absolute;
      margin: 0;
      padding:0;
      border-bottom: 1px solid #666; 
      }
.navigation ul.subMenu a, .navigation ul.subMenu2 a { 
      background: none; 
      padding: 1px 4px;
      }
      
     /*===================================*/ 
      
.navigation .subMenu2 { 
      background: #666; url(subMenu.png) 0 0 repeat-x; 
      font-size: 1em;
      position:absolute;
      bottom: 22px;
      margin: 0;
      padding:0;
      border-bottom: 1px solid #666; 
      }

.piedpage {
position:absolute;
bottom: 0px;
}

Il y a surement mieux..
Modifié par maika (27 Sep 2010 - 17:39)