Un menu sous la bannière

Publié le 26 août 2008 par blogtuto

Ce petit menu très simple qui fonctionne à tous les coups rencontre toujours un vif succès.
Il y a juste à le copier à le coller et à le personnaliser. Je mets en gras les parties à copier mais je laisse le reste du script pour que vous puissisez bien visualiser

</head>
    <body>
        <div id="container">
            <div class="container-decorator1">
                <div class="container-decorator2">
                    <div id="banner-img">
                        <div class="banner-img-decorator1">
                            <div class="banner-img-decorator2">
                                <div class="img-link">
                                    <a href="{$blog.url}"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="banner">
                        <div class="banner-decorator1">
                            <div class="banner-decorator2">
                                <h1><a href="{$blog.url}">{$blog.title}</a></h1>
                                <h2>{$blog.description|default:" "}</h2>
                            </div>
                        </div>
                    </div>
<script type="text/javascript">
menuhz = 1;
bgcolor ='#EEEEEE';
bgcolor2='#DDDDDD';
bgcolor3='#87D300';
bgcolor4='#2080a0';
largeur = 138;
hauteur = 30;
i       = 0;
menup = new Array;
menup[i++]='Accueil/Index';
menup[i++]='{$blog.url}';
menup[i++]='A propos';
menup[i++]='{$blog.url}about.html';
menup[i++]='Archives';
menup[i++]='{$blog.url}archives/';
menup[i++]='nom';
menup[i++]='adresse.html';
menup[i++]='nom';
menup[i++]='adresse.html';
menup[i++]='nom';
menup[i++]='adresse.html';

menup[i++]='Contact';
menup[i++]='mailto:lavande@lignepapilles.com';

document.write('<style>');
document.write('.ejsmenu {ldelim}color:'+bgcolor4+'; cursor:pointer;{rdelim}')
document.write('</style>')
document.write('<DIV ID=top><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='+bgcolor3+' WIDTH=100% HEIGHT='+hauteur+'><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=100%>'+(menuhz?'<tr>':''))

quote = '"';
for(pass=0;pass<menup.length;pass+=2)
document.write((menuhz?"":"<tr>")+"<TD WIDTH="+largeur+" ALIGN=center BGCOLOR="+bgcolor+" onMouseDown='location.href="+quote+menup[pass+1]+quote+"' onMouseOver='this.style.background="+quote+bgcolor2+quote+"' onMouseOut='this.style.background="+quote+bgcolor+quote+"' CLASS=ejsmenu><FONT SIZE=1 FACE=Verdana><B>"+menup[pass]+"</B></FONT></TD>")

document.write('</tr></TABLE></TD></TR></TABLE></DIV>')
</script>
                    <div id="left">

Le code est copier sur toutes les pages du script et non dans la feuille de style (ni dans els colonnes d'ailleurs). dans la page d'accueil, pade des archives, catégories...
Ce menu est visible sur mon blog (haut et fort) : www.lignepapilles.com