WebSite X5Help Center

 
Sebastian B.
Sebastian B.
User

Creare un menù laterale  it

Autor: Sebastian B.
Visited 2464, Followers 3, Udostępniony 0  
Tagi: enu,later

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

Posted on the
28 ODPOWIEDZI - 3 USEFUL
 ‪ 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

Czytaj więcej
Posted on the from  ‪ 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

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator

Funziona benissimo...appena provato...

Czytaj więcej
Posted on the from Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

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

Czytaj więcej
Posted on the from Mirko Boschetti
Sebastian B.
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?

Czytaj więcej
Posted on the from Sebastian B.
Template By Silver™
Template By Silver™
User

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

Czytaj więcej
Posted on the from Template By Silver™
Sebastian B.
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>

Czytaj więcej
Posted on the from 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.

Czytaj więcej
Posted on the from 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

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Template By Silver™
Template By Silver™
User

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

Czytaj więcej
Posted on the from Template By Silver™
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

Czytaj więcej
Posted on the from  ‪ 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 

Czytaj więcej
Posted on the from Alberto Z.
Mirko Boschetti
Mirko Boschetti
Moderator

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

Czytaj więcej
Posted on the from Mirko Boschetti
Alberto Z.
Alberto Z.
User

Scusa, ecco il link:  www.ceramicadina.it

Allego anche un'immagine dell'errore riportato.

Grazie anticipatamente.

Czytaj więcej
Posted on the from Alberto Z.
Mirko Boschetti
Mirko Boschetti
Moderator

Non vedo nessun menu laterale a dx....

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


X
Czytaj więcej
Posted on the from Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

Dimenticavo l'allegato....

Czytaj więcej
Posted on the from 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>

Czytaj więcej
Posted on the from 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...

Czytaj więcej
Posted on the from 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>

Czytaj więcej
Posted on the from 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

Czytaj więcej
Posted on the from  ‪ 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

Czytaj więcej
Posted on the from  lemonsong  
 lemonsong  
 lemonsong  
User

Oops, non ho aggiornato la pagina Kol... 

Czytaj więcej
Posted on the from  lemonsong  
Alberto Z.
Alberto Z.
User

Lo sostituto, con altro menu.

Che ne dite, può andare?

www.ceramicadina.it

Saluti

Czytaj więcej
Posted on the from Alberto Z.
Mirko Boschetti
Mirko Boschetti
Moderator

Certo...molto meglio...

Czytaj więcej
Posted on the from Mirko Boschetti
Sebastian B.
Sebastian B.
User
Autor

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

A quanto ho capito non è quello sopra

Czytaj więcej
Posted on the from Sebastian B.
Sebastian B.
Sebastian B.
User
Autor

e anche il CSS

Czytaj więcej
Posted on the from Sebastian B.