WebSite X5 Help Center - Creare un menù laterale

‪ KolAsim ‪ ‪

Moderator

... potresti usare un Oggetto Testo, o una immagine mappata, oppure cercare in rete menu personalizzati da inserire in oggetto HTML...

... oppure usa il modello con menu verticale, ed in Intestazione inserisci il menu orizzontale personalizzato...

.

ciao

Publicado en 05/12/2013 11:05:26 de ‪ KolAsim ‪ ‪

Sebastian B.

User
Autor

ho trovato questo con jquesry ma non riesco a capire come si inseriscono le jquery nel sito

http://www.gleenk.com/menu-comparsa-laterale-jquer

Publicado en 05/12/2013 15:38:07 de Sebastian B.

‪ KolAsim ‪ ‪

Moderator

... io sono senza PC e senza programmi, ...ma ad occhio e croce, dovrebbe essere semplicissimo, specilamente per te che hai la v.10 già provvista di jQuery...

... il l'ho provato sul blocco note catturando il jQuery di un altro sito, ed ha funzionato...

... in poche parole, secondo me, nella v.10 prova ad inserire un Oggetto HTML&WIDGWTS pannello HTML e gli incolli quello che segue:

<ul id="navigation">
<li><a href="#" class="voce1"></a></li>
<li><a href="#" class="voce2"></a></li>
<li><a href="#" class="voce3"></a></li>
<li><a href="#" class="voce4"></a></li>
</ul>
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-50px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-7px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>

... oppure lo metti al al Passo_1 | Impostazioni Generali | ESPERTO | BODY

... ... ...

... ed al Passo_1 | Impostazioni Generali | ESPERTO | HEAD ...incolli:

<style>

body{
background:#fff;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
text-decoration:none;
display: block;
margin-left: -2px;
width: 60px;
height: 40px;
font-size:16px;
font-weight:bold;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
background-repeat:no-repeat;
border-radius:0px 10px 10px 0px;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
border:1px solid #ccc;
}
.voce1 {background: url(blue_monster_happy.png)}
.voce2 {background:url(green_monster_angry.png)}
.voce3 {background:url(red_monster_angry.png)}
.voce4 {background:url(yellow_monster_happy.png)}
</style>

... puoi provarlo subito...

.

ciao

Publicado en 05/12/2013 20:45:01 de ‪ KolAsim ‪ ‪

Mirko Boschetti

Moderator

Funziona benissimo...appena provato...

Publicado en 05/12/2013 22:15:34 de Mirko Boschetti

Mirko Boschetti

Moderator

Al limite modificare o togliere il colore a background...

Publicado en 05/12/2013 22:18:30 de Mirko Boschetti

Sebastian B.

User
Autor

Non riesco a cambiare il colore del testo dal css ho modificato

.voce1 {color:#ff0000}
.voce2 {background:url(green_monster_angry.png)}
.voce3 {background:url(red_monster_angry.png)}
.voce4 {background:url(yellow_monster_happy.png)}
</style>

è giusto?

Publicado en 06/12/2013 08:21:07 de Sebastian B.

Template By Silver™

User

non c'è neppure il testo, quelle sono le immagini dei mostriciattoli

Publicado en 06/12/2013 08:26:02 de Template By Silver™

Sebastian B.

User
Autor

ne ho insertito un altro cosa sbaglio nell'inserimento

il link è questo http://www.gleenk.com/creare-un-semplice-menu-a-tendina-accordion-con-jquery/

Io l'ho inserito così

Questo l'ho messo al passo 1 come hai detto sopra tu

<style>

body {
font-family:Verdana, Geneva, sans-serif;
}
#accordion {
list-style:none;
width:240px;
}
#accordion li {
background: #F99815;
font-size:14px;
cursor:pointer;
padding:4px;
color:#fff;
}
#accordion ul {
list-style:none;
display:none;
margin:0;
padding:0;
}
#accordion ul li {
background:#EBEBEB;
border:0;
padding-left:15px;
border-bottom:1px dashed #999;
border-left:1px dashed #999;
border-right:1px dashed #999;
}
#accordion ul li a {
text-decoration:none;
color:#333;
}
#accordion ul li a:hover {
color:#000;
}
</style>

e questo ho preso un oggetto html/widget e ho incollato questo, ma non va perke?

<ul id="accordion">
<li>Sports
<ul>
<li><a href="#">Golf</a></li>
<li><a href="#">Cricket</a></li>
<li><a href="#">Calcio</a></li>
</ul>
</li>
<li>Community
<ul>
<li><a href="#">Forum</a></li>
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
</ul>
</li>
<li>Contatti
<ul>
<li><a href="http://maps.google.it">Googlemap</a></li>
<li><a href="#">Località</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$("#accordion > li").click(function(){
if(false == $("ul",this).is(':visible')) {
$('#accordion ul').slideUp(300);
}
$("ul",this).slideToggle(300);
});
});
</script>

Publicado en 06/12/2013 08:41:00 de Sebastian B.

Template By Silver™

User

mi sembra che manchi il pezzo di js dell'ultima area nera in basso, che va messo in head racchiuso tra <script> ...</script>

---

dal css eliminerei la prima riga che riguarda il body perchè sarebbe in contrasto con il css di x5.

Publicado en 06/12/2013 08:59:13 de Template By Silver™

‪ KolAsim ‪ ‪

Moderator

... non ho fatto altro, come avevo detto, che di incollare nel blocco note esattamente i due [QUOTE] postati prima, ed o pescato il jQuery nel sito di Mirko, e questo ne è il risultato: http://www.zspace.it/kolasim/prove/menuetichette.html

...

... andrebbe eliminato lo STYLE che riguarda il BODY del mio codice, che io ho colorato fff000 per metterlo in evidenza, appunto perchè lo STYLE della pagina è regolata dal programma: body{background:#fff000;font-family: Arial, Helvetica, sans-serif;margin:0;padding:0;}

.

ciao

Publicado en 06/12/2013 10:43:21 de ‪ KolAsim ‪ ‪

Template By Silver™

User

veramente ormai lui si riferisce ad un altro menu, leggere con attenzione

Publicado en 06/12/2013 11:39:42 de Template By Silver™

‪ KolAsim ‪ ‪

Moderator

... urca è vero!!... ah beh ...!... ... ... ...

Publicado en 06/12/2013 12:07:08 de ‪ KolAsim ‪ ‪

Alberto Z.

User

Per favore date un'occhiata al mio sito.

Ho inserito un menu laterale dx che a vista d'occhio funziona correttamente, il problema e quando faccio l'analisi del progetto, mi segnala errore al codice.

Grazie

Publicado en 06/12/2013 17:09:52 de Alberto Z.

Mirko Boschetti

Moderator

Se metti il link.... forse possiamo vederlo anche noi...

Publicado en 06/12/2013 19:36:08 de Mirko Boschetti

Alberto Z.

User

Scusa, ecco il link: www.ceramicadina.it

Allego anche un'immagine dell'errore riportato.

Grazie anticipatamente.

Publicado en 07/12/2013 11:31:04 de Alberto Z.

Mirko Boschetti

Moderator

Non vedo nessun menu laterale a dx....

Comunque è il solito copia/incolla....alcuni tag in più....

X

Publicado en 07/12/2013 11:59:02 de Mirko Boschetti

Mirko Boschetti

Moderator

Dimenticavo l'allegato....

Publicado en 07/12/2013 12:03:43 de Mirko Boschetti

Mirko Boschetti

Moderator

E poi come indirizzo per il feedready, dovresti mettere cosi:

http://www.nometuosito.it/x5feedready.xml

altrimenti con certi smartphone non funzia.....

Publicado en 07/12/2013 12:13:15 de Mirko Boschetti

Alberto Z.

User

Perdonami ti allego il codice html cosi come riportato, mi indichi per favore cosa eliminare, purtroppo non ho capito, scusami.

Come sottolineavo in alcuni post non sono bravo, scopiazzo di quà e di la.

<html>

<head>
<title>Menu Verticale Tenda a Livelli</title>
</head>
<body>
<br>
<div align="center">
<div id="mv2"></div>
<script language="JavaScript">
[removed]('<STYLE TYPE="text/css">\na.mv2style {color:#2D4A6E;text-decoration:none;}\na:hover.mv2style {color:#B0133B;text-decoration:underlined;}\n</STYLE>');
mv2_menu = new Array();
mv2_lien = new Array();

mv2_menu[0] = '<b>Ceramiche Decorate</b>';
mv2_menu[1] = '<b>Rustico</b>';
mv2_menu[2] = '<b>Terracotta</b>';

mv2_lien[0] = '<A HREF="http://www.ceramicadina.it/oggettistica.html" CLASS=mv2style TARGET="_self"> - Oggettistica</A><BR>'
mv2_lien[1] = '<A HREF="http://www.ceramicadina.it/tegami.html" CLASS=mv2style TARGET="_self"> - Tegami</A><BR>'
mv2_lien[1] += '<A HREF="http://www.ceramicadina.it/boccali.html" CLASS=mv2style TARGET="_self"> - Brocche</A><BR>';
mv2_lien[1] += '<A HREF="http://www.ceramicadina.it/piatti-1.html" CLASS=mv2style TARGET="_self"> - Piatti & Ovali</A><BR>';
mv2_lien[2] = '<A HREF="http://www.ceramicadina.it/accessori.html" CLASS=mv2style TARGET="_self"> - Accessori</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/acquasantiere.html" CLASS=mv2style TARGET="_self"> - Acquasantiere</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/angeli.html" CLASS=mv2style TARGET="_self"> - Angeli</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/borse.html" CLASS=mv2style TARGET="_self"> - Borse</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/campanelle.html" CLASS=mv2style TARGET="_self"> - Campanelle</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/contenitori.html" CLASS=mv2style TARGET="_self"> - Contenitori</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/farfalle.html" CLASS=mv2style TARGET="_self"> - Farfalle</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/illuminazione.html" CLASS=mv2style TARGET="_self"> - Illuminazione</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/magneti.html" CLASS=mv2style TARGET="_self"> - Magneti</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/mini.html" CLASS=mv2style TARGET="_self"> - Mini</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/natale.html" CLASS=mv2style TARGET="_self"> - Natale</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/piatti.html" CLASS=mv2style TARGET="_self"> - Piatti Murali</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/pesci.html" CLASS=mv2style TARGET="_self"> - Pesci & Maschere</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/pergamene.html" CLASS=mv2style TARGET="_self"> - Pergamena</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/salvadanai.html" CLASS=mv2style TARGET="_self"> - Salvadanai</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/portacandele.html" CLASS=mv2style TARGET="_self"> - Porta Candele</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/tegole.html" CLASS=mv2style TARGET="_self"> - Tegole</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/vasi.html" CLASS=mv2style TARGET="_self"> - Vasi</A><BR>';
mv2_lien[2] += '<A HREF="http://www.ceramicadina.it/vassoi.html" CLASS=mv2style TARGET="_self"> - Vassoi & Coppe</A><BR>';

mv2_pos = -1;
function mv2_menu_draw()
{
mv2_aff = "<TABLE BORDER=0 BGCOLOR=#B0133B CELLPADDING=0 CELLSPACING=0 WIDTH=200><TR><TD><TABLE BORDER=0 CELLPADDING=3 CELLSPACING=1 WIDTH=100%>";
for(a=0;a<mv2_menu.length;a++)
{
if(mv2_pos == a || !document.getElementById)
bgcolor = "#B0133B";
else
bgcolor = "#B0133B";
if(document.getElementById)
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><A HREF=\"#\" onMouseOver=\"mv2_pos="+a+";mv2_menu_draw()\" CLASS=mv2style><FONT FACE=\"Verdana\" SIZE=3>"+mv2_menu[a]+"</FONT></A></TD></TR>";
else
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Verdana\" SIZE=3 COLOR=#B0133B>"+mv2_menu[a]+"</FONT></TD></TR>"
if(mv2_pos == a || !document.getElementById)
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Verdana\" SIZE=2>"+mv2_lien[a]+"</FONT></TD></TR>";
}
mv2_aff += "</TABLE></TD></TR></TABLE>";
if(document.getElementById)
document.getElementById("mv2")[removed] = mv2_aff;
else
[removed](mv2_aff);
}

mv2_menu_draw();
</script>
</div>
<br>
<br>
<div align="center"> </div>
</body>
</html>

Publicado en 07/12/2013 12:51:17 de Alberto Z.

Mirko Boschetti

Moderator

Dal <br> in quinta riga....fino al <div align="center"> </div> compreso...ma ora Answer te lo ha modificato un pò....quindi modifica il tuo originale...

Publicado en 07/12/2013 13:34:52 de Mirko Boschetti

Alberto Z.

User

Questo è l'originale, ho solo apportato le modifiche necessarie, nulla di +

<html>
<head>
<title>Menu Verticale Tenda a Livelli</title>
</head>
<body>
<br>
<br>
<div align="center">
<script language="JavaScript">
[removed]('<STYLE TYPE="text/css">\na.mv2style {color:#ff0000;text-decoration:none;}\na:hover.mv2style {color:#CC0000;text-decoration:underlined;}\n</STYLE>');

mv2_menu = new Array();
mv2_lien = new Array();

mv2_menu[0] = '<b>renatoweb.it</b>';
mv2_menu[1] = '<b>Linguaggi web</b>';
mv2_menu[2] = '<b>Forum</b>';

mv2_lien[0] = '<A HREF="http://www....it" CLASS=mv2style TARGET="_self"> . Home page</A><BR>'
mv2_lien[1] = '<A HREF="<span class="underline">http://www...it" CLASS=mv2style TARGET="_self"> . Linguaggio 1</A><BR>'
mv2_lien[2] = '<A HREF="http://www....it/forum/forumdisplay.php?s=&forumid=39" CLASS=mv2style TARGET="_self"> . Forum 1</A><BR>';
mv2_lien[1] += '<A HREF="http://www...." CLASS=mv2style TARGET="_self"> . Linguaggio 2</A><BR>';
mv2_lien[1] += '<A HREF="http://www.....it/" CLASS=mv2style TARGET="_self"> . Linguaggio 3</A><BR>';
mv2_lien[2] += '<A HREF="http://www....it/forum/forumdisplay.php?s=&forumid=1" CLASS=mv2style TARGET="_self"> . Forum 2</A><BR>';
mv2_lien[2] += '<A HREF="http://www.....it/forum/forumdisplay.php?s=&forumid=7" CLASS=mv2style TARGET="_self"> . Discussioni</A><BR>';

mv2_pos = -1;
function mv2_menu_draw()
{
mv2_aff = "<TABLE BORDER=0 BGCOLOR=#ffffff CELLPADDING=0 CELLSPACING=0 WIDTH=200><TR><TD><TABLE BORDER=0 CELLPADDING=3 CELLSPACING=1 WIDTH=100%>";
for(a=0;a<mv2_menu.length;a++)
{
if(mv2_pos == a || !document.getElementById)
bgcolor = "#006699";
else
bgcolor = "#000000";
if(document.getElementById)
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><A HREF=\"#\" onMouseOver=\"mv2_pos="+a+";mv2_menu_draw()\" CLASS=mv2style><FONT FACE=\"Verdana\" SIZE=2>"+mv2_menu[a]+"</FONT></A></TD></TR>";
else
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Verdana\" SIZE=2 COLOR=#000000>"+mv2_menu[a]+"</FONT></TD></TR>"
if(mv2_pos == a || !document.getElementById)
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Verdana\" SIZE=1>"+mv2_lien[a]+"</FONT></TD></TR>";
}
mv2_aff += "</TABLE></TD></TR></TABLE>";
if(document.getElementById)
document.getElementById("mv2")[removed] = mv2_aff;
else
[removed](mv2_aff);
}

mv2_menu_draw();
</script></div>
<br>
<br>
<br>
<br>
<br>
<br>
<div align="center"> </div>
</body>
</html>

Publicado en 07/12/2013 15:35:32 de Alberto Z.

‪ KolAsim ‪ ‪

Moderator

... ti conviene metterlo sul blocco note, salvarlo con nome | tutti file | nome.html ...e quindi mandarlo in rete e metere il LINK qui nel POST...

.

ciao, KolAsim

Publicado en 07/12/2013 15:59:12 de ‪ KolAsim ‪ ‪

lemonsong

User

Alberto Z.

Questo è l'originale, ho solo apportato le modifiche necessarie, nulla di +

Se continui a postarlo qui, Answers continuerà ad alterarlo (vedi i vari [removed]).

Puoi provare ad inserirlo in un quote come ha fatto Kol, oppure aggiornarlo online.

Ti consiglio però di trovare un altro codice, quello è più "vecchio" di me.

_______ oltre il 5° step ________

http://www.unofficialwsx5.com

Publicado en 07/12/2013 16:11:37 de lemonsong

lemonsong

User

Oops, non ho aggiornato la pagina Kol...

Publicado en 07/12/2013 16:13:07 de lemonsong

Alberto Z.

User

Lo sostituto, con altro menu.

Che ne dite, può andare?

www.ceramicadina.it

Saluti

Publicado en 07/12/2013 20:29:10 de Alberto Z.

Mirko Boschetti

Moderator

Certo...molto meglio...

Publicado en 07/12/2013 21:08:03 de Mirko Boschetti

Sebastian B.

User
Autor

Alberto come hai fatto a mettere quel menu laterali mi lasci il codice?

A quanto ho capito non è quello sopra

Publicado en 11/12/2013 06:48:38 de Sebastian B.

Sebastian B.

User
Autor

e anche il CSS

Publicado en 11/12/2013 06:56:40 de Sebastian B.