WebSite X5Help Center

 
Sebastian B.
Sebastian B.
User

Creare un menù laterale  it

Автор: Sebastian B.
Просмотрено 2463, Подписчики 3, Размещенный 0  
Тэги: enu,later

Salve a tutti come faccio a creare un menu laterale tipo questo oltre al menù principale orizzontale

Размещено
28 Ответы - 3 Полезно
 ‪ KolAsim ‪ ‪
 ‪ 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

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ 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

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator

Funziona benissimo...appena provato...

Читать больше
Размещено От Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

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

Читать больше
Размещено От Mirko Boschetti
Sebastian B.
Sebastian B.
User
Автор

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?

Читать больше
Размещено От Sebastian B.
Template By Silver™
Template By Silver™
User

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

Читать больше
Размещено От Template By Silver™
Sebastian B.
Sebastian B.
User
Автор

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>

Читать больше
Размещено От Sebastian B.
Template By Silver™
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.

Читать больше
Размещено От Template By Silver™
 ‪ KolAsim ‪ ‪
 ‪ 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

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Template By Silver™
Template By Silver™
User

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

Читать больше
Размещено От Template By Silver™
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Alberto Z.
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 

Читать больше
Размещено От Alberto Z.
Mirko Boschetti
Mirko Boschetti
Moderator

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

Читать больше
Размещено От Mirko Boschetti
Alberto Z.
Alberto Z.
User

Scusa, ecco il link:  www.ceramicadina.it

Allego anche un'immagine dell'errore riportato.

Grazie anticipatamente.

Читать больше
Размещено От Alberto Z.
Mirko Boschetti
Mirko Boschetti
Moderator

Non vedo nessun menu laterale a dx....

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


X
Читать больше
Размещено От Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

Dimenticavo l'allegato....

Читать больше
Размещено От Mirko Boschetti
Alberto Z.
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">&nbsp;</div>
</body>
</html>

Читать больше
Размещено От Alberto Z.
Mirko Boschetti
Mirko Boschetti
Moderator

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

Читать больше
Размещено От Mirko Boschetti
Alberto Z.
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">&nbsp;</div>
</body>
</html>

Читать больше
Размещено От Alberto Z.
 ‪ KolAsim ‪ ‪
 ‪ 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

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 lemonsong  
 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

Читать больше
Размещено От  lemonsong  
 lemonsong  
 lemonsong  
User

Oops, non ho aggiornato la pagina Kol... 

Читать больше
Размещено От  lemonsong  
Alberto Z.
Alberto Z.
User

Lo sostituto, con altro menu.

Che ne dite, può andare?

www.ceramicadina.it

Saluti

Читать больше
Размещено От Alberto Z.
Mirko Boschetti
Mirko Boschetti
Moderator

Certo...molto meglio...

Читать больше
Размещено От Mirko Boschetti
Sebastian B.
Sebastian B.
User
Автор

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

A quanto ho capito non è quello sopra

Читать больше
Размещено От Sebastian B.
Sebastian B.
Sebastian B.
User
Автор

e anche il CSS

Читать больше
Размещено От Sebastian B.