Mise en forme menu déroulant

Question

lecobra_20

17 Feb 2006 à 16:45

Bonjour !

Voilà j'ai un menu déroulant vertical. Il marche très bien et tou ca. Mais le problème c'est que j'aime pas trop la mise en forme CSS.
En faite je voudrais avoir une mise en forme du genre menu word de microsoft. avec les rubriques et sous rubriques.
Pouvez-vous regarder mon menu et si une personne savez comment faire pour faire la même mise en forme que le menu word.
Je vous remercie d'avance !

Code html et Css du menu :


<!-- WebMenu JavaScript code -->
              <script type="text/javascript" src="fichier_javascript/fs-webmenu.js"></script>
              <!-- WebMenu styles -->
              <style>
                 /* Do not change. Hidden submenus require this. */
                .wmSubMenuHidden {position:absolute;visibility:hidden;}

                 /* horizontal menu styles */
                .hItemOn  {width:120px;margin:1px;padding:3px 2px 4px 2px;background:#ffffff;border:1px solid #000000;cursor:pointer;}
                .hItemOff {width:120px;margin:1px;padding:3px 2px 4px 2px;background:#ffffff;border:1px solid #000000;cursor:pointer;}
              </style>

              <!-- menu -->
              <!-- submenu - visible, wrapper table is here for horizontal alignement only -->
              <!-- --------------------------------------------------------------------------------------- wmItemOn(item, level, styleOn,  styleOff, submenuId, submenuPosition) -------------------------- -->
              <table align="left" cellpadding="0" cellspacing="0">
                <tr>
		<!-- submenu - MNU PRINCIPAL -->
                  <td><div class="hItemOff" onClick="javascript:window.location='index.html'"  onmouseover="javascript:wmItemOn(this,0,'hItemOn','hItemOff','hSubmenu1',WM_BOTTOM);" onMouseOut="wmStartOffTimer();">Fichier &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="fichier_images/icon/arrow_right_black.gif"></</div>
                  <td><div class="hItemOff" onClick="javascript:window.location='index.html'"  onmouseover="javascript:wmItemOn(this,0,'hItemOn','hItemOff','hSubmenu2',WM_BOTTOM);" onMouseOut="wmStartOffTimer();">Edition &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="fichier_images/icon/arrow_right_black.gif"></</div></td>
                  <td><div class="hItemOff" onClick="javascript:window.location='index.html'"  onmouseover="javascript:wmItemOn(this,0,'hItemOn','hItemOff','hSubmenu3',WM_BOTTOM);" onMouseOut="wmStartOffTimer();">Application &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="fichier_images/icon/arrow_right_black.gif"></div></td>
                  <td><div class="hItemOff" onClick="javascript:window.location='index.html'"  onmouseover="javascript:wmItemOn(this,0,'hItemOn','hItemOff','hSubmenu4',WM_BOTTOM);" onMouseOut="wmStartOffTimer();">Aide &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="fichier_images/icon/arrow_right_black.gif"></</div></td>
                </tr>
              </table>
              <!-- submenu - SOUS MENU FICHIER -->
              <div id="hSubmenu1" class="wmSubMenuHidden">
                <div class="hItemOff" onClick="javascript:window.location='inscription.php'" onmouseover="javascript:wmItemOn(this,1,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();"><img src="fichier_images/icon/icon_new.gif"> Nouveau</div>
                <div class="hItemOff" onClick="javascript:window.location='deconnexion.php'" onmouseover="javascript:wmItemOn(this,1,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();"><img src="fichier_images/cadena.gif"> Déconnexion</div>
                <div class="hItemOff" onClick="window.close();" onmouseover="javascript:wmItemOn(this,1,'hItemOn','hItemOff',null,null);"  onMouseOut="wmStartOffTimer();"><img src="fichier_images/delete.png"> Quitter</div>
              </div>
              <!-- submenu - SOUS MENU EDITION -->
              <div id="hSubmenu2" class="wmSubMenuHidden">
                <div class="hItemOff" onClick="javascript:window.location='index.html'" onmouseover="javascript:wmItemOn(this,1,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">item level 1</div>
                <div class="hItemOff" onClick="javascript:window.location='index.html'" onmouseover="javascript:wmItemOn(this,1,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">item level 1</div>
                <div class="hItemOff" onClick="javascript:window.location='index.html'" onmouseover="javascript:wmItemOn(this,1,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">item level 1</div>
              </div>
 		  <!-- submenu - SOUS MENU APPLICATION -->
              <div id="hSubmenu3" class="wmSubMenuHidden">
               <div class="hItemOff" onClick="javascript:window.location='gestion_annuaire/index.php'" onmouseover="javascript:wmItemOn(this,1,'hItemOn','hItemOff','hSubmenu6',WM_RIGHT);" onMouseOut="wmStartOffTimer();"><img  src="fichier_images/icon/icon_new.gif"> Annuaire &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="fichier_images/icon/arrow_right_black.gif"></div>
                <div class="hItemOff" onClick="javascript:window.location='gestion_memo/index.php'" onmouseover="javascript:wmItemOn(this,1,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();"><img  src="fichier_images/icon/icon_new.gif"> Memo</div>
                <div class="hItemOff" onClick="javascript:window.location='gestion_favorie/index.php'" onmouseover="javascript:wmItemOn(this,1,'hItemOn','hItemOff','hSubmenu7',WM_RIGHT);"  onMouseOut="wmStartOffTimer();"><img  src="fichier_images/icon/icon_new.gif"> Favorie &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="fichier_images/icon/arrow_right_black.gif"></div>
                <div class="hItemOff" onClick="javascript:window.location='gestion_divxtheque/index.php'" onmouseover="javascript:wmItemOn(this,1,'hItemOn','hItemOff','hSubmenu5',WM_RIGHT);"  onMouseOut="wmStartOffTimer();"><img  src="fichier_images/icon/icon_new.gif"> Vidéotech &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="fichier_images/icon/arrow_right_black.gif"></div>
		</div>
		 <!-- submenu - SOUS MENU AIDE -->
              <div id="hSubmenu4" class="wmSubMenuHidden">
                <div class="hItemOff" onClick="javascript:popupcentree('aide/version.php',450,280,'menubar=no,scrollbars=no,statusbar=no')" onmouseover="javascript:wmItemOn(this,2,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">A propo de</div>
                <div class="hItemOff" onClick="javascript:window.location='index.html'" onmouseover="javascript:wmItemOn(this,2,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">Aide OfficeGestion</div>
                <div class="hItemOff" onClick="javascript:window.location='index.html'" onmouseover="javascript:wmItemOn(this,2,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">item level 2</div>
              </div>
		<!-- submenu - SOUS MENU VIDEOTECH -->
              <div id="hSubmenu5" class="wmSubMenuHidden">
                <div class="hItemOff" onClick="javascript:window.location='gestion_divxtheque/index.php?pgid=news'" onmouseover="javascript:wmItemOn(this,2,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">Nouveautée</div>
                <div class="hItemOff" onClick="javascript:window.location='gestion_divxtheque/index.php?pgid=liste'" onmouseover="javascript:wmItemOn(this,2,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">Liste</div>
                <div class="hItemOff" onClick="javascript:window.location='gestion_divxtheque/index.php?pgid=listepret'" onmouseover="javascript:wmItemOn(this,2,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">Liste prêts</div>
              </div>
		<!-- submenu - SOUS MENU ANNUAIRE -->
              <div id="hSubmenu6" class="wmSubMenuHidden">
                <div class="hItemOff" onClick="javascript:window.location='gestion_annuaire/ajout.php'" onmouseover="javascript:wmItemOn(this,2,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">Ajouter</div>
              </div>
		<!-- submenu - SOUS MENU FAVORIES -->
              <div id="hSubmenu7" class="wmSubMenuHidden">
                <div class="hItemOff" onClick="javascript:window.location='gestion_favorie/ajouter_liens.php'" onmouseover="javascript:wmItemOn(this,2,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">Ajouter liens</div>
                <div class="hItemOff" onClick="javascript:window.location='gestion_favorie/ajouter_categorie.php'" onmouseover="javascript:wmItemOn(this,2,'hItemOn','hItemOff',null,null);" onMouseOut="wmStartOffTimer();">Ajouter catégories</div>
              </div>

<!-- /horizontal menu -->

Code javascript pour le déroulement du menu :


/* 
 
 */


// *** note ******************************************************************* 

// Public methods, those that are intended to be used on a web page,
// are prefixed with wm.


// *** submenu position *******************************************************

// Two positions are available for now. New positions can be easily added.
var WM_BOTTOM = "bottom";
var WM_RIGHT = "right";

// Margin values in pixels. Allows for submenu position to be fine-tuned.
var MARGIN_BOTTOM = 1;
var MARGIN_RIGHT = 1;


// *** item activation ********************************************************

// One set of global values is enough, 
// no one can navigate more than one menu at the time.

// There can be only one active item at the time on whole page.
var currentItem = null;

// There is only one way to reach a submenu. 
// The trail to that submenu is kept in this array.
// Every time an item is activated trail has to be reset. 
// All submenus after the current level removed and the current one added.
var menuTrail = new Array();

// This is needed when switching from one menu to another with two different
// styles, otherwise last element gets styleOff from the other menu.
var currentStyleOff = null;

// This function activates an item. 
// An item is active when mouse is over that item.
// Parameters:
// - item  . . . . . . . item to be activated
// - level . . . . . . . level of the submenu
// - styleOn . . . . . . style class name when item is active
// - styleOff. . . . . . style class name when item is not active
// - submenuId . . . . . id of the submenu that is to be attached to this item, pass null if no submenu
// - submenuPosition . . position of the submenu, ex: WM_RIGHT or WM_BOTTOM, pass null if no submenu
function wmItemOn(item, level, styleOn, styleOff, submenuId, submenuPosition) {

  debug("level:" + level + ", styleOn:" + styleOn + ", styleOff:" + styleOff + ", submenu:" + submenuId + "/" + submenuPosition);

  stopOffTimer();

  // turn off previous item 
  if (currentItem != null) {
    if (styleOff != currentStyleOff && currentStyleOff != null) {
      currentItem.className = currentStyleOff;
    } else {
      currentItem.className = styleOff;
    }
  }

  // make this item new current item
  currentItem = item;
  item.className = styleOn;
  currentStyleOff = styleOff;


  if (submenuId != null) {

    // take care of attached submenu

    hide(level);

    var menu = document.getElementById(submenuId);

    // item dimensions: item.offsetHeight, item.offsetWidth
    if (submenuPosition == WM_BOTTOM) {
      menu.style.top = findOffsetTop(item) + item.offsetHeight + MARGIN_BOTTOM;
      menu.style.left = findOffsetLeft(item);
    }

    if (submenuPosition == WM_RIGHT) {
      menu.style.top = findOffsetTop(item);
      menu.style.left = findOffsetLeft(item) + item.offsetWidth + MARGIN_RIGHT;
    }

    menu.style.visibility = "visible";

    menuTrail[level] = menu;
  } else {

    // item has no submenu attached, update the menuTrail
    
    hide(level);
  }

}


// Hide all submenus after the level passed in, inclusive.
function hide(level) {
  for (var i = level; i < menuTrail.length; i++) {
    menuTrail[i].style.visibility = "hidden";
  }
}


// *** timer ******************************************************************

// Timer is needed to turn off all items and submenus, 
// once mouse moves away from the menu.

var timerID = null;
var timerOn = false;
var timecount = 250;

function wmStartOffTimer() {
  if (timerOn == false) {
    timerID = setTimeout("offAll()", timecount);
    timerOn = true;
  }
}

function stopOffTimer() {
  if (timerOn) {
    clearTimeout(timerID);
    timerID = null;
    timerOn = false;
  }
}

// Hide all submenus and turn current item off.
function offAll() {
  hide(0);
  
  if (currentStyleOff != null) {
    currentItem.className = currentStyleOff;
  }
 
  debug("All off by timer.");
}


// *** debug ******************************************************************

// Print text to the debug element. If the element that debugId is pointing to 
// is not found on the page, it does nothing.

var debugId = "wmDebug";

function debug(text) {
  var debug = document.getElementById(debugId);
  if (debug != null) {
     debug.innerHTML = "&raquo; " + text + "<br>" + debug.innerHTML;
  }
}


// *** position ***************************************************************

// Utility code to calculate element position.

// Find total left offset.
function findOffsetLeft(obj){
  var curleft = 0;
  if (obj.offsetParent){
    while (obj.offsetParent){
      curleft += obj.offsetLeft
        obj = obj.offsetParent;
    }
  }else if (obj.x){
    curleft += obj.x;
  }

  return curleft;
}

// Find total top offset.
function findOffsetTop(obj){
  var curtop = 0;
  if (obj.offsetParent)	{
    while (obj.offsetParent){
      curtop += obj.offsetTop
      obj = obj.offsetParent;
    }
  }else if (obj.y){
    curtop += obj.y;
  }

  return curtop;
}

Merci encore[/i]

Nigel

17 Feb 2006 à 16:54

Uch !
Je ne prend pas trop la peine de regarder ça en détails, ça me semble être une sacrée usine à gaz...

Par contre, je te file une adresse pas mal où tu peux trouver des menus déroulants
Modifié par Nigel (17 Feb 2006 - 17:05)

gilles6975

17 Feb 2006 à 18:11

Voila on peut aussi faire du css LOURD !! Smiley biggol

A mon avis tu dois pouvoir trouver plus simple sur alistapart ou sur le lien ci dessus parceque là c'est énorme.

StyleSho

17 Feb 2006 à 18:36

c'est vrai que ca fait beaucoup pour un menu...

Jean-Paul Creative-E

17 Feb 2006 à 20:52

sinon tu peux utiliser la technologie ajax avec la libraire prototype qui te permet de faire du déroulement de menu aussi

lecobra_20

20 Feb 2006 à 08:46

oui c'est énorme comme menu, mais c'est parceque ce menu possède plusier niveau...

Sujet clos

CSS et mise en forme, CSS3

Mise en forme menu déroulant