WebSite X5Help Center

 
Sebastian B.
Sebastian B.
User

Creare un menù laterale  it

Autor: Sebastian B.
Besucht 2462, Followers 3, Geteilt 0  
Tags:: enu,later

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

Gepostet am
28 ANTWORTEN - 3 NüTZLICH
 ‪ 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

Mehr lesen
Gepostet am von  ‪ 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

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator

Funziona benissimo...appena provato...

Mehr lesen
Gepostet am von Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

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

Mehr lesen
Gepostet am von 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?

Mehr lesen
Gepostet am von Sebastian B.
Template By Silver™
Template By Silver™
User

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

Mehr lesen
Gepostet am von 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>

Mehr lesen
Gepostet am von 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.

Mehr lesen
Gepostet am von 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

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Template By Silver™
Template By Silver™
User

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

Mehr lesen
Gepostet am von Template By Silver™
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

Mehr lesen
Gepostet am von  ‪ 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 

Mehr lesen
Gepostet am von Alberto Z.
Mirko Boschetti
Mirko Boschetti
Moderator

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

Mehr lesen
Gepostet am von Mirko Boschetti
Alberto Z.
Alberto Z.
User

Scusa, ecco il link:  www.ceramicadina.it

Allego anche un'immagine dell'errore riportato.

Grazie anticipatamente.

Mehr lesen
Gepostet am von Alberto Z.
Mirko Boschetti
Mirko Boschetti
Moderator

Non vedo nessun menu laterale a dx....

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


X
Mehr lesen
Gepostet am von Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

Dimenticavo l'allegato....

Mehr lesen
Gepostet am von 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>

Mehr lesen
Gepostet am von 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...

Mehr lesen
Gepostet am von 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>

Mehr lesen
Gepostet am von 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

Mehr lesen
Gepostet am von  ‪ 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

Mehr lesen
Gepostet am von  lemonsong  
 lemonsong  
 lemonsong  
User

Oops, non ho aggiornato la pagina Kol... 

Mehr lesen
Gepostet am von  lemonsong  
Alberto Z.
Alberto Z.
User

Lo sostituto, con altro menu.

Che ne dite, può andare?

www.ceramicadina.it

Saluti

Mehr lesen
Gepostet am von Alberto Z.
Mirko Boschetti
Mirko Boschetti
Moderator

Certo...molto meglio...

Mehr lesen
Gepostet am von 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

Mehr lesen
Gepostet am von Sebastian B.
Sebastian B.
Sebastian B.
User
Autor

e anche il CSS

Mehr lesen
Gepostet am von Sebastian B.