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

Postato il 05/12/2013 11:05:26 da ‪ KolAsim ‪ ‪

Sebastian B.

User
Autore

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

Postato il 05/12/2013 15:38:07 da 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

Postato il 05/12/2013 20:45:01 da ‪ KolAsim ‪ ‪

Mirko Boschetti

Moderator

Funziona benissimo...appena provato...

Postato il 05/12/2013 22:15:34 da Mirko Boschetti

Mirko Boschetti

Moderator

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

Postato il 05/12/2013 22:18:30 da Mirko Boschetti

Sebastian B.

User
Autore

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?

Postato il 06/12/2013 08:21:07 da Sebastian B.

Template By Silver™

User

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

Postato il 06/12/2013 08:26:02 da Template By Silver™

Sebastian B.

User
Autore

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>

Postato il 06/12/2013 08:41:00 da 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.

Postato il 06/12/2013 08:59:13 da 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

Postato il 06/12/2013 10:43:21 da ‪ KolAsim ‪ ‪

Template By Silver™

User

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

Postato il 06/12/2013 11:39:42 da Template By Silver™

‪ KolAsim ‪ ‪

Moderator

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

Postato il 06/12/2013 12:07:08 da ‪ 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

Postato il 06/12/2013 17:09:52 da Alberto Z.

Mirko Boschetti

Moderator

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

Postato il 06/12/2013 19:36:08 da Mirko Boschetti

Alberto Z.

User

Scusa, ecco il link: www.ceramicadina.it

Allego anche un'immagine dell'errore riportato.

Grazie anticipatamente.

Postato il 07/12/2013 11:31:04 da Alberto Z.

Mirko Boschetti

Moderator

Non vedo nessun menu laterale a dx....

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

X

Postato il 07/12/2013 11:59:02 da Mirko Boschetti

Mirko Boschetti

Moderator

Dimenticavo l'allegato....

Postato il 07/12/2013 12:03:43 da 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.....

Postato il 07/12/2013 12:13:15 da 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>

Postato il 07/12/2013 12:51:17 da 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...

Postato il 07/12/2013 13:34:52 da 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>

Postato il 07/12/2013 15:35:32 da 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

Postato il 07/12/2013 15:59:12 da ‪ 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

Postato il 07/12/2013 16:11:37 da lemonsong

lemonsong

User

Oops, non ho aggiornato la pagina Kol...

Postato il 07/12/2013 16:13:07 da lemonsong

Alberto Z.

User

Lo sostituto, con altro menu.

Che ne dite, può andare?

www.ceramicadina.it

Saluti

Postato il 07/12/2013 20:29:10 da Alberto Z.

Mirko Boschetti

Moderator

Certo...molto meglio...

Postato il 07/12/2013 21:08:03 da Mirko Boschetti

Sebastian B.

User
Autore

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

A quanto ho capito non è quello sopra

Postato il 11/12/2013 06:48:38 da Sebastian B.

Sebastian B.

User
Autore

e anche il CSS

Postato il 11/12/2013 06:56:40 da Sebastian B.