phpBB Italia chiude!
phpBB Italia ringrazia tutti gli utenti che hanno dato fiducia al nostro progetto per ben 9 anni, e che, grazie al grande lavoro fatto da tutto lo Staff (rigorosamente a titolo gratuito), hanno portato il portale a diventare il principale punto di riferimento italiano alla piattaforma phpBB.

Purtroppo, causa motivi personali, non ho più modo di gestirlo e portarlo avanti. Il forum viene ora posto in uno stato di sola lettura, nonché un archivio storico per permettere a chiunque di fruire di tutte le discussioni trattate.

Il nuovo portale di assistenza per l'Italia di phpBB diventa phpBB-Store.it, cui ringrazio per aver deciso di portare avanti questo grande progetto.

Grazie ancora,
Carlo - Amministratore di phpBB Italia

Menu laterale Css a scomparsa

Supporto generale stili
Avatar utente
Sir Xiradorn
Grafico
Grafico
Messaggi: 1659
Iscritto il: 11/08/2009, 12:41
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6.15
Database: MariaDB 10.1.9
Località: Lontano....
Contatta:

Re: Menu laterale Css a scomparsa

Messaggio da Sir Xiradorn » 18/06/2016, 18:09

Proviamo a fare sta cosa. Prova a aggiungere prima del menu identificato da qualcosa del tipo <ul id="css3menu1" questo codice

Codice: Seleziona tutto

<a href="javascript:void(0)" title="menu">Menu</a>
Nello stile questo

Codice: Seleziona tutto

.xirmenuappear {
    width: 100px;
    display: block;
    position: absolute;
    padding: 10px;
    background: rgb(77, 78, 70);
    transform: rotate(90deg);
    top: 75px;
    border-radius: 5px;
    color: rgb(255, 170, 0);
    font-weight: bold;
    text-decoration: none;
    text-shadow: 2px 2px 0px black;
    left: -44px;
}
ul#css3menu1 {
	left: -105px;
}
.xirmenuappear:hover {
    left: 60px !important;
    position: absolute !important;
    z-index: 999;
}
.xirmenuappear:hover + #css3menu1, #css3menu1:hover {
    left: 0;
}
A te le personalizzazioni più avanzate
Sir Xiradorn
Immagine
~ XDojo - Xiradorn Lab Division - xiradorn.it ~
~ GitHub - XiradornLab ~

Immagine
Stargate - phpbb 3.0.x || 3.1.x || 3.2.x

RTI kartname
Utente
Utente
Messaggi: 23
Iscritto il: 24/01/2016, 10:15
Sesso: Maschio
Versione: 3.2.0
Server: Windows
PHP: 5.6.29
Database: MySQL 5.1.71
Località: Messina (Sicilia)
Contatta:

Re: Menu laterale Css a scomparsa

Messaggio da RTI kartname » 19/06/2016, 11:08

Installato ,deve esserci qualche errore però da qualche parte ,questo il risultato .
preciso che ho ridotto da -105 a -100 questo

Codice: Seleziona tutto

ul#css3menu1 {
   left: -105px;
}
perché mi sono accorto che spariva completamente e non riuscivo a trovarlo.
Comunque adesso già comincia a "nascondersi" come voluto :D
Parto adesso con le mie domande:
1) E' possibile far scorrere il menù insieme allo scrolling della pagina così da renderlo raggiungibile ovunque ci trovi ?
2) E' possibile rendere la "transizione " ( appare scompare) più lenta invece di essere immediata come da attuale?
3) Non capisco dove poter inserire l'immagine per richiamare il menù

Comunque grazie infinite dell'aiuto ,già così e tutta un'altra cosa asd asd

Avatar utente
Sir Xiradorn
Grafico
Grafico
Messaggi: 1659
Iscritto il: 11/08/2009, 12:41
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6.15
Database: MariaDB 10.1.9
Località: Lontano....
Contatta:

Re: Menu laterale Css a scomparsa

Messaggio da Sir Xiradorn » 19/06/2016, 22:40

Cambia il position e metti in .xirmenuappear al posto di

Codice: Seleziona tutto

position: absolute;
questo

Codice: Seleziona tutto

position: fixed;
Per la transizione usa invece

Codice: Seleziona tutto

.xirmenuappear {
    transition: all ease-in-out 300ms;
Per ora famo ste due
Sir Xiradorn
Immagine
~ XDojo - Xiradorn Lab Division - xiradorn.it ~
~ GitHub - XiradornLab ~

Immagine
Stargate - phpbb 3.0.x || 3.1.x || 3.2.x

RTI kartname
Utente
Utente
Messaggi: 23
Iscritto il: 24/01/2016, 10:15
Sesso: Maschio
Versione: 3.2.0
Server: Windows
PHP: 5.6.29
Database: MySQL 5.1.71
Località: Messina (Sicilia)
Contatta:

Re: Menu laterale Css a scomparsa

Messaggio da RTI kartname » 20/06/2016, 22:04

Sir Xiradorn ha scritto:Cambia il position e metti in .xirmenuappear al posto di

Codice: Seleziona tutto

position: absolute;
questo

Codice: Seleziona tutto

position: fixed;
Per la transizione usa invece

Codice: Seleziona tutto

.xirmenuappear {
    transition: all ease-in-out 300ms;
Per ora famo ste due
Mi sono perso qualche passaggio :oops: ,perché inserendo le modifiche non succede nulla ,facciamo un passo indietro....
Non ho capito bene dove inserire questo codice

Codice: Seleziona tutto

.xirmenuappear {
    width: 100px;
    display: block;
    position: absolute;
    padding: 10px;
    background: rgb(77, 78, 70);
    transform: rotate(90deg);
    top: 75px;
    border-radius: 5px;
    color: rgb(255, 170, 0);
    font-weight: bold;
    text-decoration: none;
    text-shadow: 2px 2px 0px black;
    left: -44px;
}
ul#css3menu1 {
   left: -105px;
}
.xirmenuappear:hover {
    left: 60px !important;
    position: absolute !important;
    z-index: 999;
}
.xirmenuappear:hover + #css3menu1, #css3menu1:hover {
    left: 0;
}
Perché io l'ho inserito in cima nel file "style.css"

Codice: Seleziona tutto

ul#css3menu1> li{width: 99px;height: auto; transition: 0.3s linear;-moz-transition: 0.3s linear;-webkit-transition: 0.3s linear;-o-transition: 0.3s linear;}
#css3menu1,ul#css3menu1> ul:hover {width: 140px; height: 400px;}
ul#css3menu1{ width: 30px; height: auto; overflow: hidden;  
transition: 0.3s linear; -moz-transition: 0.3s linear; -webkit-transition: 0.3s linear; -o-transition: 0.3s linear}
#css3menu1,ul#css3menu1:hover {width: 620px; height: 600px;}


ul#css3menu1,ul#css3menu1 ul{
   margin:0;list-style:none;padding:0;background-color:#000;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#162436;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#css3menu1 ul{
   display:none;position:absolute;left:100%;top:0;-moz-box-shadow:0.7px 0.7px 1px #3E3E3E;-webkit-box-shadow:0.7px 0.7px 1px #3E3E3E;box-shadow:0.7px 0.7px 1px #3E3E3E;background-color:#000000;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#162436;padding:0 9px 9px;}
ul#css3menu1 li:hover>*{
   display:block;}
ul#css3menu1 li{
   position:relative;display:block;white-space:nowrap;font-size:0;}
ul#css3menu1 li:hover{
   z-index:1;}
ul#css3menu1 ul ul{
   position:absolute;left:100%;top:0;}
ul#css3menu1{
   font-size:0;z-index:999;position:fixed;display:block;float:left;padding:0 1px 1px;}
ul#css3menu1>li{
   margin:1px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
   outline-style:none;}
ul#css3menu1 a{
   display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#ffff7f;cursor:default;padding:10px;background-color:#000000;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
   float:none;margin:9px 0 0;}
ul#css3menu1 ul a{
   text-align:left;padding:8px 0 0 0;background-color:#000000;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#293344;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:bold 13px Arial;color:#ffff7f;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
   background-color:#ffff7f;border-style:none;color:#000000;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
   display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
   background-image:url("data:image/gif;base64,R0lGODlh6AMMAMIFAL6+vtra2ry8vL29vcjIyP///wAAAP///yH5BAEAAAcALAAAAADoAwwAAAPEeLrc/jDKSau9OOvNu/9gKI5kaZ5oqq5s675wLM+0ZRhBre987//AoHBILBqPyKTyE7g9bgPCckqtWq/YrHbL7Xq/FcLAybgJpOC0es1uu9/wuBxOEJAVhuh8z+/7/4CBgoNUYgYLBgBohIyNjo+QkZKTWwQAhwYCdpScnZ6foKGinJmbiYujqaqrrK2urzGWh3h6sLa3uLm6u5SGZZmovMLDxMXGx0F1d3h5wcjP0NHS09QHhrMNNznV3N3e3+CTTdgHCQA7");padding-right:15px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
   background-color:#ffff7f;background-image:none;border-style:solid;border-color:#293344;color:#000000;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
   border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst a.pressed{
   text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.topmenu>a{
   -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
   text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.toplast>a{
   border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast a.pressed{
   text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 _>li>a{
   padding:0;}
ul#css3menu1 li.subfirst>a{
   border-width:0;border-style:none;padding:0;}
ul#css3menu1 li.subfirst:hover>a,ul#css3menu1 li.subfirst a.pressed{
   border-style:none;}
Questo "style.css" è un file generato sempre dal famoso programmino ,file Che seguendo le istruzioni di installazione ,ho poi provveduto a spostare tramite ftp dentro il prosilver

Rispondi

Torna a “Supporto”

Chi c’è in linea

Visitano il forum: Nessuno e 14 ospiti