IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Rendre un menu horizontal


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Janvier 2009
    Messages
    6
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2009
    Messages : 6
    Par défaut Rendre un menu horizontal
    Bonjour,

    je vous soumets le problème qu'il se pose à moi concernant le code Javascript.

    Il s'agit d'une galerie que je viens d'installer et qui fonctionne trés bien.
    Seulement, pour l"intégrer à mon site, j'aurai besoin de transformer un menu vertical en menu horizontal.

    Voiçi la partie intéressante du code :
    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
    	function updateGalleriesMenu(request)
    	{
    		var result = getEncoded(request,'enc');
    		
    		if (result != "null") {
    			var galleries = result.split("|");
    			var selected = null;
    			var menu = "";
    			var gallery_list = new Array();
    			
    			var ul = document.createElement('ul')
    			
    			for (var i=0; i<galleries.length-1; i++)
    			{
    				var galleries_data = galleries[i].split(":");
    				var id = galleries_data[0];
    				var g_id_files = galleries_data[1];
    				var g_password = galleries_data[2];
    				
    				id_files[id] = g_id_files;
    				id_password[id] =  (g_password) ? g_password : '';
    				
    				var li = document.createElement('li')
    				li.setAttribute('id', 'mitem_'+i)
    				if (i>0) li.setAttribute('class', 'topline')
    				
    				if (number_galleries) {
    					var em = document.createElement('em')
    					em.innerHTML = zero(i+1)+'&nbsp;'
    					li.appendChild(em)
    				}
    				
    				var a = document.createElement('a')
    				a.setAttribute('id', id)
    				a.setAttribute('href', 'javascript:;')
    				if (!number_galleries) a.setAttribute('class', 'nonum')
    				a.onclick = function() { setGallery(this.id.sq(),this) }
    				a.innerHTML = ''
    					+((g_password)?'<img class="lock" src="images/lock.gif" alt="" />':'')
    					+ galleryName(id)
    					+' <small>('+g_id_files+')</small>'
    					
    				li.appendChild(a)
    				
    				ul.appendChild(li)
    			}
    J'ai essayé plusieurs méthodes qui vont de la suppression des éléments de la liste > résultat : plus de menu
    changer ces deux éléments par des espaces html > résultat : le menu ne s'arrête pas de charger
    changer les éléments par des sauts de lignes (autant essayer) > résultat : le menu ne s'arrête pas de charger encore une fois.


    J'imagine que c'est plus simple que je ne le pense, toutefois je n'ai pas la réponse.

  2. #2
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    Salut,

    Un fichier css doit être fourni, il faut modifier la classe topline. Probablement mettre un display:inline ou quelque chose comme ça.

  3. #3
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Janvier 2009
    Messages
    6
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2009
    Messages : 6
    Par défaut
    Voiçi le code que j'ai retenu relatif à ce menu :

    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
    #msc_menu ul {
    	display: block;
    	margin: 0px 0px 10px 0px;
    	padding: 4px 0px 4px 0px;
    	font-size: 12px;
    	background: <?php echo $theme_general_dimmed?>;
    	border-top: 1px solid <?php echo $theme_menu_bg?>;
    }
     
    #msc_menu ul li {
    	display: block;
    	/*min-height: 14px;*/
    	margin: 0px;
    	padding: 4px 0 4px 10px;
    	color: <?php echo $theme_menu_link?>;
    	font-size: 12px;
    	background: <?php echo $theme_general_dimmed?>;
    	/*white-space: nowrap;*/
    }
     
    #msc_menu ul li:hover {
    	background: <?php echo $theme_menu_bg_hover?>;
    }
     
    #msc_menu ul li.odd {
    	background: <?php echo $theme_general_dimmed?>;
    }
     
    #msc_menu ul li.even {
    	background: <?php echo $theme_general_dimmed?>;
    }
     
    #msc_menu ul li.topline {
    	border-top:1px solid <?php echo $theme_general_bg?>;
    }
     
    #msc_menu ul li em {
    	font-style: normal;
    	font-weight: normal;
    	font-size: 9px !important;
    	font-size: 10px;
    }
     
    #msc_menu ul li a,
    #msc_menu ul li a:link,
    #msc_menu ul li a:active,
    #msc_menu ul li a:visited {
    	font-size: 12px;
    	/*padding-left: 4px;*/
    	border-left: 1px solid <?php echo $theme_menu_bg?>;
    }
     
    #msc_menu ul li a.nonum,
    #msc_menu ul li a.nonum:link,
    #msc_menu ul li a.nonum:active,
    #msc_menu ul li a.nonum:visited {
    	border-left: 0px;
    }
    J'ai changé
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #msc_menu ul li.topline {
    	border-top:1px solid <?php echo $theme_general_bg?>;
    }
    en

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #msc_menu ul li.topline {
    	display:inline;
    }
    Ca a juste supprimé un petit espace entre deux possibilités du menu.


    J'ai aussi essayé de changer les "display: block;" en display:inline;
    sans résultat.

  4. #4
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Janvier 2009
    Messages
    6
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2009
    Messages : 6
    Par défaut
    Est-ce que vous avez besoin de plus d'informations ?

Discussions similaires

  1. Rendre un menu vertical horizontal
    Par laurentSc dans le forum Mise en page CSS
    Réponses: 18
    Dernier message: 04/09/2012, 15h30
  2. Menu Horizontal demande d'informations
    Par M1000 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 22/12/2005, 13h34
  3. prob menu horizontal
    Par tinkye_winkye dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 25/01/2005, 11h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo