Joomla.it Forum

Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => : Fabio7586 11 Feb 2012, 20:41:30

: Jquery e menu cursore
: Fabio7586 11 Feb 2012, 20:41:30
Salve ragazzi, avrei bisogno di creare un menų di questo tipo http://gabrieleromanato.com/esempi/jquery/jquery-menu-cursore.html (http://gabrieleromanato.com/esempi/jquery/jquery-menu-cursore.html), avevo scritto all'autore di questa guida, ma mi ha risposto che non conosce il templating di joomla, per cui chiedo a voi, se possibile, di aiutarmi ad integrare questo codice nel mio template in joomla
in HTML
:
<div id="navigation"> <ul> <li><a href="#">Home[/url]</li> <li><a href="#">About[/url]</li> <li><a href="#">Contatti[/url]</li> </ul> <div id="cursor"></div> </div>
In CSS
:
#navigation {    height: 3em;} #navigation ul {    height: 2em;    border-bottom: 1px solid #232323;    margin: 0;    padding: 0 1em;    list-style: none;} #navigation li {    float: left;    height: 100%;    margin-right: 1em;} #navigation a {    float: left;    height: 100%;    padding: 0 1em;    line-height: 2;    font-weight: bold;    text-decoration: none;    color: #fff;    background: #232323;    border-radius: 6px 6px 0 0;} #navigation a:hover {    background: #666;} #cursor {    background: #e40;    height: 0.5em;    width: 0px;    position: relative;}in JQ
:
$(function() {   $('li', '#navigation').each(function() {     var $li = $(this);    var $a = $('a', $li);    var width = $li.width();    var left = $li.position().left;     $a.mouseover(function() {       $('#cursor', '#navigation').animate({        width: width,        left: left      }, 'slow');     });   }); });Non saprei da dove cominciare! :)
La versione di joomla č l'ultima disponibile (2.5.1)
: Re:Jquery e menu cursore
: 56francesco 11 Feb 2012, 20:44:01
jquery č giā un plugin per joomla,  verifica se ti va bene quello che sta nel sito che porto in firma e poi installi quello..
: Re:Jquery e menu cursore
: Fabio7586 11 Feb 2012, 21:54:41
In veritā cercavo di creare un menų con un effetto di cursore scorrevole e in pių a con sottomenų a tendina come nell'esempio del link che ho pubblicato pių su; il codice per farlo funzionare cosė č quello che ho indicato, ma non so come integrarlo nel mio template.
Quello nel tuo sito in firma, non č quello che cerco di fare  :)
: Re:Jquery e menu cursore
: 56francesco 11 Feb 2012, 22:08:20
mancherebbero solo le righe html e css  mentre jquery ci sta giā,

provo ad inserirle in locale, ti faccio sapere.
: Re:Jquery e menu cursore
: 56francesco 11 Feb 2012, 22:26:15
con il plugin si potrebbe fare, ci vuole tanta pazienza e tempo.. anche perchč solo di file  .js nel plugin ce ne sono 5, un po di prove e si fa.. forza e coraggio...
: Re:Jquery e menu cursore
: Fabio7586 12 Feb 2012, 01:46:53
Grazie innanzitutto per l'aiuto che mi stai dando, ma, ti prego di perdonarmi, sono un neofita di joomla, di che plugin parli? che significa mancherebbero solo le righe html e css? non si devono modificare quelle che ho scritto per fare riferimento alle voci di menų che ho io? :)
Facciamo pių semplice, ho questa roba qui http://www.webdesignshock.com/animated-jquery-menu/ e devo riprodurla esattamente come si presenta; come faccio ad installarla?
Se puoi spiegarmi, te ne prego fallo punto per punto, se non sono troppi e non ti disturbo troppo :)
 
: Re:Jquery e menu cursore
: Fabio7586 13 Feb 2012, 00:37:47
Nessuno puō aiutarmi? :'(
: Re:Jquery e menu cursore
: conti1 13 Feb 2012, 01:57:40
ciao
il menu che stai tentando di fare esiste gia 
http://www.joomlack.fr/Extensions-Joomla/Menu/maxi-menu-ck-menu-deroulant-avance.html (http://www.joomlack.fr/Extensions-Joomla/Menu/maxi-menu-ck-menu-deroulant-avance.html)
con un poco di modifiche al css lo fai come vuoi tu.
quarda http://www.contiwebsolution.com/demo1.7/
: Re:Jquery e menu cursore
: Fabio7586 13 Feb 2012, 11:54:20
ciao
il menu che stai tentando di fare esiste gia 
http://www.joomlack.fr/Extensions-Joomla/Menu/maxi-menu-ck-menu-deroulant-avance.html (http://www.joomlack.fr/Extensions-Joomla/Menu/maxi-menu-ck-menu-deroulant-avance.html)
con un poco di modifiche al css lo fai come vuoi tu.
quarda http://www.contiwebsolution.com/demo1.7/ (http://www.contiwebsolution.com/demo1.7/)
Mi spieghi da dove devo partire se non ti č di disturbo? Debbo fare tutto con il plugin, oppure debbo modificare qualche file? Quale poi?
: Re:Jquery e menu cursore
: conti1 13 Feb 2012, 11:58:25
ciao
da dove partire?
inizia a scaricare il modulo menu lo installi e  poi modifichi il css del menu e lo fai come quello postato da te.
: Re:Jquery e menu cursore
: Fabio7586 13 Feb 2012, 12:42:55
ciao
da dove partire?
inizia a scaricare il modulo menu lo installi e  poi modifichi il css del menu e lo fai come quello postato da te.
Allora io ho un index.html, cartella js, img e css nella root principale; in css trovo main e style con questi codici:
Main
:
.mainmenuslide {
    height: 29px; width:550px;
    background: url("../img/background_main.png") no-repeat top; position: relative;
    padding: 15px 0 15px 0; margin: 0 -10px 0;
    }
.mainmenuslide li {
    padding: 16px 0 11px 25px; margin: -18px 0 0 9px;
    float: left; list-style: none;
    }
.mainmenuslide li.back {
    background: url("../img/hover_main.png") no-repeat right -52px;
    width: 9px; height: 30px; padding: 0px 0 22px 0;
    z-index: 1;    margin: -12px 0 0 8px; position: absolute;
    }
.mainmenuslide li.back .left {
    background: url("../img/hover_main.png") no-repeat top left ;
    padding: 0px 0 22px 0; height: 30px; margin-right: 24px;
    }
.mainmenuslide li a {
    font: bold 14px arial;
    top: 7px; z-index: 2; float: left;
    height: 30px; position: relative;
    margin: auto 10px; outline: none;   
    }
Style.css
:
@charset "utf-8";
/* CSS Document */
/**** Body ***/
body{
    background:#aedae9;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    line-height:normal;
    color:#FFF;
    margin:0;
    }
/**** Links ***/
a{ text-decoration: none;color:#FFF;}
a:link{ text-decoration:none;}
a:visited{ text-decoration:none;}
/**** Header ***/
#header{
    background: url(../img/background_header.png) no-repeat;
    width:1000px;
    height:108px;
    margin:auto;
    }
.header_navigation{
    float:right;
    width:550px;
    height:24px;
    margin:24px 0 0 0;
    }
/**** content ***/
#content{
    width:940px;
    margin:auto;
    border-left:1px solid gray; border-bottom:1px solid gray ; border-right:1px solid gray ;       
    padding: 30px;
    min-height:500px;
    }
/**** Footer ***/
#footer{
    width:1000px;
    margin:auto;
    }

In index.html
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide menu with jQuery and CSS | iconshock</title>
<link href="css/style.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mainmenuslide.js"></script>
<script type="text/javascript">
        $(function() {
            $("ul").mainmenuslide({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
</script>
</head>
<body>
<div id="header">
    <div class="header_navigation">
        <ul class="mainmenuslide">
            <li><a href="#" alt="">Home[/url]</li>
            <li><a href="#" alt="">Portafolio[/url]</li>
            <li><a href="#" alt"">Services[/url]</li>
            <li><a href="#" alt"">Blog[/url]</li>
            <li><a href="#" alt"">Contact[/url]</li>
        </ul>
    </div><!-- end header_navigation-->
</div><!-- end header -->
<div id="content">
    <p> En este div va el contenido dinamico de la pagina (content).</p>
</div><!-- end content -->
<div id="footer"></div><!-- End footer-->
</body>
</html>
Il codice css ho provato a copiarlo maximenu_CK.css nella cartella assets, ma non rilevo ne possibili errori nella visualizzazione ne succede nient'altro. In index poi sono definite le voci di menų, io come faccio a richiamere quelle che giā ho?
Cerco di capire come fare cosė una volta fatto per uno posso farlo per tutti quelli che mi interessano; il menų che ho proposto č fatto in jquery, non č che c'č anche una chiamato a qualche funzione di questo framework?
: Re:Jquery e menu cursore
: conti1 13 Feb 2012, 12:51:13
Il codice css ho provato a copiarlo maximenu_CK.css nella cartella assets
il css devi costruirlo sul css del  modulo e non copiare quello dal sito postato da te.
fare quel menu  con il modulo menu che ti dato e facilissimo , hai 3 immagini  su quel menu uno di sfondo e  e 2 sono il pulsante che scorre   tutto quello che devi fare e  integrare le immagini  e nulla d'altro.
: Re:Jquery e menu cursore
: Fabio7586 13 Feb 2012, 13:13:36
il css devi costruirlo sul css del  modulo e non copiare quello dal sito postato da te.
fare quel menu  con il modulo menu che ti dato e facilissimo , hai 3 immagini  su quel menu uno di sfondo e  e 2 sono il pulsante che scorre   tutto quello che devi fare e  integrare le immagini  e nulla d'altro.
ti prego, non chiamarmi rompipalle, non č che potresti dirmi dettagliatamente cosa devo fare, cosa devo scrivere e dove? html e css li conosco un pochino, am non abbastanza da fare da solo, sto ancora capendo come funziona approfonditamente joomla e sto studiando java, non ho ancora il tempo per fare uno studio approfondito su queste cose qui.
Tutto questo chiedendoti grazie per il tempo che mi stai dedicando! :)
: Re:Jquery e menu cursore
: conti1 13 Feb 2012, 13:36:40
allora
per costruire un menų  personalizzato come lo vuoi tu , va fatto di-rettamente sul template che usi  solo in questo modo  avrai i giusti parametri  dei css.
allora non conoscendo  che tipo di tempate stai usando  anche dirti  come fare potrei sempre rincorrere a parametri sballati.

tanto x iniziare  la grafica dello sfondo di quel menų va creata   nel div della posizione del menų.
l'immagine deve essere fatta in modo che si estenda in larghezza  in base hai tuoi  contenuti.
invece quella  che scorre interna  deve essere fatta  nel css del menų  che installato  se hai  visto in modulo hai giā un menų con lo scorrimento interno devi solo sostituire le immagini con le tue.
: Re:Jquery e menu cursore
: Fabio7586 13 Feb 2012, 14:39:32
allora
per costruire un menų  personalizzato come lo vuoi tu , va fatto di-rettamente sul template che usi  solo in questo modo  avrai i giusti parametri  dei css.
allora non conoscendo  che tipo di tempate stai usando  anche dirti  come fare potrei sempre rincorrere a parametri sballati.

tanto x iniziare  la grafica dello sfondo di quel menų va creata   nel div della posizione del menų.
l'immagine deve essere fatta in modo che si estenda in larghezza  in base hai tuoi  contenuti.
invece quella  che scorre interna  deve essere fatta  nel css del menų  che installato  se hai  visto in modulo hai giā un menų con lo scorrimento interno devi solo sostituire le immagini con le tue.
Nel template che ho allegato ho trovato un file tdefault.css con tutti gli stili del template; so che mi sto dilugando tanto, non so cosa eliminare e cosa aggiungere nel file, non so se va in conflitto con qualche altra cosa, invece lo scorrimento interno non vedo il menu giā pronto con lo slide :)

[allegato eliminato da un amministratore essendo vecchio pių di un anno]
: Re:Jquery e menu cursore
: Fabio7586 13 Feb 2012, 16:21:30
Non č che potresti farlo tu e spiegarmi punto per punto ciō che fai :) ? sto provando da due ore, ma non riesco a far nulla.... :'(
: Re:Jquery e menu cursore
: conti1 13 Feb 2012, 17:43:54
allora
ho modificato l' index.php del template   dove  hai il div del topmenu
modificato il css e e creato il tuo menų con il css del menų  che to postato
ora ti passo lo zip del template completo del menų
il secondo  zip e il css del modulo  che devi integrare
vai nei moduli  poi sul modulo del menų ck  e poi su themes  ci incolli quello che ti posto   poi torni in gestione moduli e attivi il  default03
e hai il tuo menu fatto
 ti resta di personalizzare solo la tendina che io lo lasciata  del colore  originale.

ps o dovuto disabilitare il mootools che nella cartella html  altrimenti il mio menu almeno la mia versione non vunzionava non ho l'ultimo del sito che to darto.

altra cosa la grafica gia di suo non e emogenia

questo e il risultato

[allegato eliminato da un amministratore essendo vecchio pių di un anno]
: Re:Jquery e menu cursore
: Fabio7586 14 Feb 2012, 00:18:46
allora
ho modificato l' index.php del template   dove  hai il div del topmenu
modificato il css e e creato il tuo menų con il css del menų  che to postato
ora ti passo lo zip del template completo del menų
il secondo  zip e il css del modulo  che devi integrare
vai nei moduli  poi sul modulo del menų ck  e poi su themes  ci incolli quello che ti posto   poi torni in gestione moduli e attivi il  default03
e hai il tuo menu fatto
 ti resta di personalizzare solo la tendina che io lo lasciata  del colore  originale.

ps o dovuto disabilitare il mootools che nella cartella html  altrimenti il mio menu almeno la mia versione non vunzionava non ho l'ultimo del sito che to darto.

altra cosa la grafica gia di suo non e emogenia

questo e il risultato
Innanzitutto ti ringrazio per l'enorme lavoro che hai svolto per aiutarmi!!!! :) Ma purtroppo non riesco ancora a farlo funzionare, ho fatto tutto ciō che mi hai detto, ho sovrascritto il template che mi hai dato (l'ho installato anche daccapo) ed ho messo nella cartella theme di maximenuck il default03 che mi hai passato, ho selezionato lo stesso dal tool del menų, ma nisba; in allegato ho inserito tutte le impostazioni che mi hai suggerito ed il risultato che ottengo io. Non so che cosa modificare ancora!  :'(

[allegato eliminato da un amministratore essendo vecchio pių di un anno]
: Re:Jquery e menu cursore
: conti1 14 Feb 2012, 17:54:13
ciao
allora ricapitoliamo
il file che to dato  del menu in precedenza con il menu nuovo  non funziona tu hai installato la vesione mod_maximenuck_6.0.1_j25

usa questo  zip x questa vesione




[allegato eliminato da un amministratore essendo vecchio pių di un anno]
: Re:Jquery e menu cursore
: Fabio7586 14 Feb 2012, 18:37:10
ciao
allora ricapitoliamo
il file che to dato  del menu in precedenza con il menu nuovo  non funziona tu hai installato la vesione mod_maximenuck_6.0.1_j25

usa questo  zip x questa vesione
Alleluja!!!!! Grazieeeeee!!!!
Ti posso chiedere un'ultima cosa, mi puoi spiegare per filo e per segno cosa hai fatto e quali voci hai modificato nel file index e nel css? Vorrei essere in greado di replicare le stesse procedure anche con altri menų che ho visto in giro e che ritengo interessanti!
Veramente grazie mille per l'aiuto che mi hai dato! Ti ci vorrebbe una statua!
: Re:Jquery e menu cursore
: Fabio7586 18 Feb 2012, 15:53:49
Ciao, allora, ho provato ad integrare quello che hai fatto nel sito; mentre in locale tutto funge alla perfezione, nel sito il layout č tutto disordinato; inoltre lo slide scompare se non attivo le funzioni mootool che in locale avevo disattivato; non so come fare; ho provato anche a modifica le posizioni nel css, ma forse sbaglio perchč non cambia nulla!  :'(
Puoi aiutarmi? :)

[allegato eliminato da un amministratore essendo vecchio pių di un anno]