Sujet Précédent Sujet Suivant

Menu horizontal et Javascript

Résolu
cs_Lucky062 Messages postés 9 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008 - 9 déc. 2008 à 10:45
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 - 11 déc. 2008 à 12:51
Bonjour à tous,
   Je suis débutant et peut être que la question est stupide, mais je me lance !
   Voici un moment que je cherche et je ne trouve pas ! Je n'ai à ma disposition que HTML, CSS et Javascript.
   Tous les menus que j'ai vu sont intégrés dans le code HTML, ce qui oblige à l'integrer dans toutes le pages.
   Existe-t-il un moyen par Javascript de l'intégrer par un "link ... quelque chose" et donc de pouvoir modifier l'ensemble des pages en ne changeant que le .js ?
   Merci grandement de votre aide.
Lucky

15 réponses

Réponse 1 / 15
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
11 déc. 2008 à 12:51
cliquer sur le bouton "réponse acceptée"
( en général celui de de la réponse qui t'a aidé )
         
3
Réponse 2 / 15
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
9 déc. 2008 à 11:29
>>Tous les menus que j'ai vu sont intégrés dans le code HTML
on peut dire ça oui...

>>Existe-t-il un moyen par Javascript de l'intégrer
uniquement en javascript ?
dans ce cas, remplace les lignes html par des document.write("ces mêmes lignes");
  en javascript, que tu mets dans un .js

tu es sûr de ne pas disposer du shtml ? essaye, car là on peut inclure ce qu'on veut
crée une page.shtml avec cette ligne : 
il est <!--#echo var="DATE_GMT" -->

et dis nous
( sur ton micro ça ne fonctionnera qu'en "émulant un site", easyphp, wamp... par exemple ou autres )

Cordialement

         
0
Réponse 3 / 15
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
9 déc. 2008 à 11:47
tu pourrais aussi utiliser le xml ( peut-être associé au xls )...
mais il doit bien y avoir d'autres solutions...
         
0
Réponse 4 / 15
cs_Lucky062 Messages postés 9 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008
9 déc. 2008 à 12:38
Bonjour Bul3,
   Merci de ton aide !
   Pour faire court, je travaille dans un groupe de sociétés dont le système informatique est géré par un service info international TRES SECURISE. J'ai à charge de construire un petit intranet (local, sur notre réseau interne, d'où uniquement le HTML et JS) dans ma société. J'ai repéré un fichier créé par le propriétaire de ce site : http://www.milonic.co.uk/menu/ et j'aurais aimé pouvoir créér quelque chose d'approchant. Je n'aurai pas les droits d'utilisation de ce genre de produit et je me demandais si d'autres n'avaient pas eu le même genre de problème.

Tu me dis : dans ce cas, remplace les lignes html par des document.write("ces mêmes lignes");
  en javascript, que tu mets dans un .js , je suis vraiment dans l'apprentissage, tu aurais des exemples d'utilisation, s'il te plait ?

Merci encore !!
Lucky
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 15
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
9 déc. 2008 à 12:48
>>tu aurais des exemples d'utilisation, s'il te plait ?

en html :
                           <li>CS</li>
                           <li> </li>
en js :
document.writeln( '<li>CS</li>' +

                          '<li> </li>' );

         
0
Réponse 6 / 15
cs_Lucky062 Messages postés 9 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008
9 déc. 2008 à 14:11
OK ! Merci encore !
J'ai essayé dans un bloc <style> c'est excellent  cela fonctionne bien !
Plus difficile pour moi, comment intégrer tout cela dans ce genre de programme que j'ai trouvé ? Tu peux m'aider là dessus, s'il te plait ? Je vois bien les <li> mais comment traiter le reste ....  ....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
 for (var i = 1; i<=10; i++) {
  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
 }
if (d) {d.style.display='block';}
}
//-->
</script>




<style type="text/css">
<!--
/* CSS issu des tutoriels http://css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 10em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #CCFFFF;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #66FFFF;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #33CCFF;
}


#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}


a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>





    * : Accueil
 

 
    
   * Site industriel
    :
    
     <li>Sous-Menu 1.1</li>
     <li>Sous-Menu 1.2</li>
     <li>Sous-Menu 1.3</li>
     <li>Sous-Menu 1.4</li>
     <li>Sous-Menu 1.5</li>
     <li>Sous-Menu 1.6</li>
    
   
 

 
 
  
   * Menu 2
    :
    
     <li>Sous-Menu 2.1</li>
     <li>Sous-Menu 2.2</li>
     <li>Sous-Menu 2.3</li>
     <li>Sous-Menu 2.4</li>
    
   
 

 
  
   * Menu 3
    :
    
     <li>Sous-Menu 3.1</li>
     <li>Sous-Menu 3.2</li>
     <li>Sous-Menu 3.3</li>
     <li>Sous-Menu 3.4</li>
     <li>Sous-Menu 3.5</li>
    
   
 

 
  
   * Menu 4
    :
    
     <li>Sous-Menu 4.1</li>
     <li>Sous-Menu 4.2</li>
     <li>Sous-Menu 4.3</li>
    
   
 

 

</html>
0
Réponse 7 / 15
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
9 déc. 2008 à 14:25
le reste ?
soit c'est du javascript, et "il suffit" de le mettre dans le .js
soit c'est du ccs, et il faut faire des document.write ou
        utiliser         <LINK    REL="stylesheet"
                                        TYPE="text/css"
                                        HREF="fichier.css">
soit c'est du html, et il faut faire des document.write

t'as pas regardé le shtml ?

         
0
Réponse 8 / 15
cs_Lucky062 Messages postés 9 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008
9 déc. 2008 à 14:29
Ok ! Je vais voir ce shtml ! Je te dis quoi demain !
 A bientôt !
Lucky
0
Réponse 9 / 15
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
9 déc. 2008 à 14:34
@+ Lucky
62 c'est le département ? l'année de naissance ? ou quoi ?
le 0 m' inquiétant....
         
0
Réponse 10 / 15
cs_Lucky062 Messages postés 9 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008
9 déc. 2008 à 14:37
Je suis du Pas de Calais ; un Chti quoi !
Je fais des recherches sur Google à propos de "shtml" et je vois.
A+
0
Réponse 11 / 15
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
9 déc. 2008 à 15:01
un ch'ti, un ch'tit... un boyau rouge ouais
moi un ch'ti "gueule noire" d'origine, qui émigra dans la pas-de-calais
     puis ailleurs...

j'avais un lien.. mais rompu  ( ponctuellement ?)  http://scarabee.com/

         
0
Réponse 12 / 15
cs_Lucky062 Messages postés 9 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008
9 déc. 2008 à 15:10
Tu sais, les ch'ti "s'étendent" de la Picardie aux Flandres, mais les meilleurs sont dans le PdC quand même !!!

J'déconne ; on est tous bons  !!
Ad' min t'chiot !!
Lucky
0
Réponse 13 / 15
cs_Lucky062 Messages postés 9 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008
11 déc. 2008 à 11:31
Bonjour Bul3,

Voila, j'ai essayé de mettre en pratique ton enseignement. J'ai vu que tu avais posté plusieurs manières d'élaborer des menus. J'ai repris l'une d'entre elles avec l'espoir de l'adapter à mon application ! Mais, problème, les sous menus ne se déroulent pas ! Je ne trouve pas où j'ai pu "déconner" ! Cela fonctionne dans tes exemples, et plus du tout quand je l'intègre  ! Tu pourrais voir cet exemple, s'il te plait !?
Merci par avance !
Lucky

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta name="GENERATOR" content="Microsoft Visual Studio 6.0"><title>titi</title>


<style>
  ul.menu   { list-style-type: none;
       margin : 0;
       padding: 0;
      }
  ul.menu li  { float: left;
       margin-left: 10px;
       border: 0;
      }
  ul.menu ul  { position: absolute;
       display: none;
       list-style-type: none;
       margin: 0;
       padding: 0;
      }
  ul.menu ul li  
      { float: none;
       padding: 0;
      }
  ul.menu li a:link, ul.menu li a:visited
      { display: block;
       color: #800000;
       background: #FFFFAA;
       margin:0;
       padding: 4px 4px;
       text-decoration: none;
      }
  ul.menu li a:hover
      { background: #FFCC99; }
  ul.menu li:hover > ul
      { display: block; }
  ul.menu a { border:1px solid #FFCC99; }
</style>


</head>


<script>
  document.writeln( ' ' );
   document.writeln( '<li>[# Un]' );
    document.writeln( '' );
     document.writeln( '<li>[# Niveau 1.1]</li> ' );
     document.writeln( '<li>[# Niveau 1.2]</li> ' );
    document.writeln( '' );
   document.writeln( '</li>' );
   document.writeln( '<li>[# Deux]' );
    document.writeln( '' );
     document.writeln( '<li>[# Niveau 2.1]</li> ' );
     document.writeln( '<li>[# Niveau 2.2]</li> ' );
     document.writeln( '<li>[# Niveau 2.3]</li> ' );
    document.writeln( '' );
   document.writeln( '</li>' );
   document.writeln( '<li>[# Trois]' );
    document.writeln( '' );
     document.writeln( '<li>[# Niveau 3.1]</li> ' );
     document.writeln( '<li>[# Niveau 3.2]</li> ' );
     document.writeln( '<li>[# Niveau 3.3]</li> ' );
    document.writeln( '' );
   document.writeln( '</li>' );
   document.writeln( '<li>[# Quatre]' );
    document.writeln( '' );
     document.writeln( '<li>[# Niveau 4.1]</li> ' );
     document.writeln( '<li>[# Niveau 4.2]</li> ' );
    document.writeln( '' );
   document.writeln( '</li>' );
   document.writeln( '<li>[# Cinq]' );
    document.writeln( '' );
     document.writeln( '<li>[# Niveau 5.1]</li> ' );
     document.writeln( '<li>[# Niveau 5.2]</li> ' );
     document.writeln( '<li>[# Niveau 5.3]</li> ' );
    document.writeln( '' );
   document.writeln( '</li>' );
   document.writeln( '<li>[# Six]' );
    document.writeln( '' );
     document.writeln( '<li>[# Niveau 6.1]</li> ' );
     document.writeln( '<li>[# Niveau 6.2]</li> ' );
     document.writeln( '<li>[# Niveau 6.3]</li> ' );
    document.writeln( '' );
   document.writeln( '</li>' );   
  document.writeln( '' );
  
 </script>





PRESENTATION DU SITE
</html>
0
Réponse 14 / 15
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
11 déc. 2008 à 11:57
1° pourquoi tous ces document.write ???
   met directement en html ! ce sera moins lourd,
   ça fonctionnera même pour ceux qui désactivent le javascript...
   ..
2° ça marche néanmoins parfaitement... avec FF !
    avec IE, si tu mets le bon doctype, ça fonctionnera aussi

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ou
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ou ...

         
0
Réponse 15 / 15
cs_Lucky062 Messages postés 9 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008
11 déc. 2008 à 12:43
C'est S U P E R !!
Cela fonctionne !! De nouveau merci beaucoup ! Je vais pouvoir continuer à apprendre avec ce "squelette" : inserer des images dans les menus, faire des rollovers, ... !
Je te tiendrais au courant de mes avancées !
Merci encore !
Lucky
(Je ne sais pas clore la discution )
0

Discussions similaires

menu en c
sebz10 -
decricri62 -

4 réponses
comment créer un sous menu
msi79 -
msi79 -

8 réponses
Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Rejoignez-nous